<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" v-for="item in workKinds" :key="item.index">
        <div class="type-title">
          <strong>{{ item.title }}</strong>
        </div>
        <van-cell-group>
          <van-checkbox-group
            v-model="result"
            :ref="`checkboxGroup${item.index}`"
            @change="checked"
          >
            <van-cell v-for="data in item.typeList" clickable :key="data.id">
              <van-checkbox :name="data.name" shape="square">
                <span>{{ data.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";
import { getFun,postFun, putFunTwo, postFunTwo } from '@/service/table'
export default {
  name: "work-task",
  components: {
    LHeader,
  },
  data() {
    return {
      text: "选择任务类型",
      searchVal: "",
      result: [],
      allChecked: false, // 全选状态
      workKinds: [
        {
          index: 0,
          title: "常规养护任务",
          typeList: [
            {
              name: "水冲管道",
              id: "1",
            },
            {
              name: "水冲截流",
              id: "2",
            },
            {
              name: "水冲倒虹吸",
              id: "3",
            },
          ],
        },
        {
          index: 1,
          title: "管线赋值任务",
          typeList: [
            {
              name: "设施赋值同步检测",
              id: "4",
            },
          ],
        },
      ]
    };
  },
  mounted() {
  },
  methods: {
    onSearch() {},
    checked() {
      let allTypeList = [];
      allTypeList = this.workKinds.map((e) => {
        return e.typeList;
      });
      if (this.result.length == allTypeList.flat().length) {
        this.allChecked = true;
      } else {
        this.allChecked = false;
      }
    },
    checkAll() {
      // let allCheckedFlag = this.allChecked
      if (this.allChecked) {
        let allTypeList = [];
        allTypeList = this.workKinds.map((e) => {
          return e.typeList;
        });
        this.result = allTypeList.flat().map(e => e.name);
      } else {
        this.result = [];
      }
      // this.$refs.checkboxGroup[0].toggleAll(allCheckedFlag)
    },
    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 {
  .type-title {
    padding: 10px 19px;
    font-size: 16px;
  }
  /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>
