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

      <!-- 种类 -->
      <div class="type-wrap">
        <van-cell-group>
          <van-checkbox-group
            v-model="result"
            ref="checkboxGroup"
            @change="checked"
          >
            <van-cell v-for="item in typeList" clickable :key="item.id">
              <van-checkbox :name="item.name" shape="square">
                <span>{{ item.name }}</span>
              </van-checkbox>
            </van-cell>
          </van-checkbox-group>
        </van-cell-group>
      </div>
    </div>
    <!-- 底部信息 -->
    <footer class="footer">
      <van-cell-group>
        <div class="allSelect">
          <van-checkbox v-model="allChecked" shape="square" @click="checkAll"
            >全选</van-checkbox
          >
        </div>
        <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: "pipe-section",
  components: {
    LHeader,
  },
  data() {
    return {
      text: "选择管段",
      searchVal: "",
      result: [],
      allChecked: false, // 全选状态
      typeList: [
        {
          name: "S17T555550: 污水(1000, 100)",
          id: "1",
        },
        {
         name: "S19T546550: 合流(1006, 150)",
          id: "2",
        },
        {
         name: "S16T55220: 雨水(100, 100)",
          id: "3",
        },
        {
         name: "S15T5635550: 污水(1000, 100)",
          id: "4",
        },
        {
         name: "S19T55550: 合流(1009, 120)",
          id: "5",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onSearch() {},
    checked() {
      if (this.result.length == this.typeList.length) {
        this.allChecked = true;
      } else {
        this.allChecked = false;
      }
    },
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(this.allChecked);
    },
    confirm() {
      console.log(this.result);
      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: space-between;
    .allSelect {
      margin-left: 0.533333rem;
      .van-checkbox {
        display: flex;
        align-items: flex-end;
      }
    }
    .operate {
      height: 1.333333rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .van-button {
        width: 1.6rem;
      }
    }
  }
}
</style>
