<!-- 說明 -->
<!-- @author ex-jinming002-->
<script>
export default {
  name: 'Overall',
  data() {
    return {
      // 頂部全選所有狀態
      checkAll: false,
      isIndeterminate: false,
      checkBoxData: [],
      testData: [
        {
          title: '基本資訊：',
          options: [{ label: 
 
'存在問題', value: 'laborum officia' }],
        },
        {
          title: '預計進展詳情：',
          options: [
            {
              label: '預計土地盤整年份',
              value: 'nostrud fugiat',
            },
            { label: '是否計劃本年度開工', value: 'aliqua' },
            { label: 'in deserunt', value: '
 
mollit sed' },
          ],
        },
        {
          title: '實際進展詳情：',
          options: [
            { label: '簽約時間', value: 'consectetur proident' },
            { label: '用地面積(公頃)', value: 'dolor et qui cupidatat' },
            { label: '開工時間', value: 'dolore ut occaecat non cillum' },
          ],
        },
        {
          title: 
 
'中止專案：',
          options: [
            { label: '中止原因', value: 'exercitation ut' },
            { label: '土地實際盤整面積', value: 'amet' },
            { label: '是否計劃盤整', value: 'Excepteur esse in' },
          ],
        },
      ],
    }
  },

  mounted() {
    const tempArr = []
    this.testData.forEach(item => {
      tempArr.push({
        // 子項的全選狀態
        checkAll: false,
        // 子項的預設選中的checkbox
        checkedCities: [],
        isIndeterminate: false,
        options: item.options,
        title: item.title,
      })
    })
    console.log(this.checkBoxData, '遍歷之前的')
    this.checkBoxData = tempArr
    console.log(this.checkBoxData, '遍歷之hou的')
  },

  methods: {
    // 全選所有子項
    handleCheckAll(val) {
      this.checkBoxData.forEach((item, index) => {
        this.handleCheckAllChange(val, index)
        this.checkBoxData[index].checkAll = val
      })
    },
    // 子項的全選change事件
    handleCheckAllChange(val, index) {
      console.log(val)
      this.checkBoxData[index].checkedCities = (val
        ? this.checkBoxData[index].options
        : []
      ).map(item => item.value)
      this.checkBoxData[index].isIndeterminate = false
      this.TopCheckBoxCheck()
    },
    // 子項change事件
    handleCheckedCitiesChange(value, index) {
      console.log(this.checkBoxData[index].checkedCities)
      const checkedCount = value.length
      this.checkBoxData[index].checkAll =
        checkedCount === this.checkBoxData[index].options.length
      this.checkBoxData[index].isIndeterminate =
        checkedCount > 0 &&
        checkedCount < this.checkBoxData[index].options.length
      this.TopCheckBoxCheck()
    },
    TopCheckBoxCheck() {
      const allSelectLen = this.checkBoxData.filter(item => item.checkAll)
        .length

      if (allSelectLen === this.checkBoxData.length) {
        this.checkAll = true
        this.isIndeterminate = false
      } else {
        this.checkAll = false
        this.isIndeterminate =
          this.checkBoxData.findIndex(item => item.isIndeterminate) >= 0 ||
          this.checkBoxData.findIndex(item => item.checkAll) >= 0
      }
    },
    handleCheck() {
      const res = this.checkBoxData.map(item => {
        if (item.checkedCities && item.checkedCities.length > 0) {
          return item.checkedCities
        }
      })
      console.log(res.flat())
      const result = res
        .flat()
        .filter(item => {
          if (item) {
            return item
          }
        })
        .join()
      console.log(result)
    },
  },
}
</script>
<template>
  <section class="Overall" v-if="checkBoxData && checkBoxData.length > 0">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAll"
      >全選</el-checkbox
    >
    <br /><br /><br />
    <div v-for="(item, index) in checkBoxData" :key="index">
      <el-checkbox
        :indeterminate="item.isIndeterminate"
        v-model="item.checkAll"
        @change="
          val => {
            handleCheckAllChange(val, index)
          }
        "
        >{{ item.title }}</el-checkbox
      >
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group
        v-model="item.checkedCities"
        @change="
          val => {
            handleCheckedCitiesChange(val, index)
          }
        "
      >
        <el-checkbox
          v-for="option in item.options"
          :label="option.value"
          :key="option.value"
          >{{ option.label }}</el-checkbox
        >
      </el-checkbox-group>
      <br />
      <br />
      <br />
    </div>
    <br /><br /><br />
    <el-button :style="{ 'margin-left': '100px' }" @click="handleCheck"
      >提交</el-button
    >
  </section>
</template>
<style lang="less">
.Overall {
}
</style>