<template>
  <div>
    <LHeader :text="text"></LHeader>
    <div class="content-wrap">
      <div class="search-wrap">
        <van-search v-model="searchVal" placeholder="搜索" @input="onSearch" />
      </div>

      <!-- 种类 -->
      <div class="type-wrap">
        <van-cell-group>
          <van-radio-group v-model="radio">
            <van-cell v-for="item in typeList" clickable :key="item.no">
              <van-radio :name="item.name">{{ item.name }}</van-radio>
            </van-cell>
          </van-radio-group>
        </van-cell-group>
      </div>
    </div>
    <!-- 底部信息 -->
    <footer class="footer">
      <van-cell-group>
        <div class="operate">
          <van-button
            size="small"
            type="info"
            plain
            native-type="button"
            style="border-radius: 5px; background-color: #ffffff"
            @click.native="cancel"
            >取消</van-button
          >
          <van-button
            size="small"
            type="info"
            native-type="button"
            style="margin: 0 10px 0 20px; border-radius: 5px"
            @click.native="confirm"
            >确定</van-button
          >
        </div>
      </van-cell-group>
    </footer>
  </div>
</template>

<script>
import LHeader from "@/components/header.vue";
export default {
  name: "micro-watersh",
  components: {
    LHeader,
  },
  data() {
    return {
      text: "选择微流域",
      searchVal: "",
      radio: "",
      typeList: [
        {
          no: "1",
          name: "安宁庄路",
        },
        {
          no: "2",
          name: "国际创业园",
        },
        {
          no: "3",
          name: "西二旗",
        },
        {
          no: "4",
          name: "北京体育大学",
        },
        {
          no: "5",
          name: "建清园",
        },
        {
          no: "6",
          name: "林业大学",
        },
        {
          no: "7",
          name: "小关",
        }
      ],
    };
  },
  mounted() {},
  methods: {
    onSearch() {},
    confirm() {
      console.log(this.radio);
      history.go(-1);
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.content-wrap {
  padding-bottom: 1.6rem;
  background-color: #f0f1f5;
}
// 搜索
.search-wrap {
  margin: 0.26667rem;
  .van-search {
    border-radius: 5px;
    padding: 5px 12px;
  }
  .van-search__content {
    background-color: #ffffff;
  }
}
.type-wrap {
  /deep/ .van-cell__value--alone {
    margin: 0.08rem 0;
  }
}
.footer {
  width: 100%;
  height: 1.5rem;
  z-index: 9;
  position: fixed;
  bottom: 0px;
  .van-cell-group {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .operate {
      height: 1.333333rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .van-button {
        width: 1.6rem;
      }
    }
  }
}
</style>
