<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="地区">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </el-form-item>
        <!--{{checkedCities}}-->
        <el-checkbox-group v-model="checkedCities">
            <el-form-item :label="item.title" v-for="item in group" :key="item.title">
            <span v-for="cityList in item.data" :key="cityList.Province" class="province-content">
                <el-checkbox :label="cityList.id">{{cityList.label}}</el-checkbox>
                <el-popover
                    placement="bottom"
                    width="200"
                    trigger="click">
                    <span v-for="CityArrayItem in cityList.children" class="popover-content">
                        <el-checkbox :label="CityArrayItem.id">{{CityArrayItem.label}}</el-checkbox>
                        <!--<span v-for="CityArrayItem in cityList.CityArray" class="popover-content">-->
                            <!--<el-checkbox :label="CityArrayItem.City">{{CityArrayItem.CityName}}</el-checkbox>-->
                            <!--<el-popover-->
                                    <!--placement="bottom"-->
                                    <!--width="200"-->
                                    <!--trigger="click">-->
                                <!--<span v-for="CityArrayItem in cityList.CityArray" class="popover-content">-->
                                    <!--<el-checkbox :label="CityArrayItem.City">{{CityArrayItem.CityName}}</el-checkbox>-->
                                <!--</span>-->
                                <!--<i class="el-icon-arrow-down" slot="reference"></i>-->
                            <!--</el-popover>-->
                        <!--</span>-->
                    </span>
                    <i class="el-icon-arrow-down" slot="reference"></i>
                </el-popover>
            </span>
            </el-form-item>
        </el-checkbox-group>
    </el-form>
</template>

<script>
    import areaList from './queryAreaTree4Component';
    export default {
      name: 'ElRegionSelection',
      componentName: 'ElRegionSelection',
      data() {
        return {
          isIndeterminate: false,
          checkAll: false,
          checkedCities: [],
          checkAllList: [],
          group: [{
            title: '华东',
            codes: ['310000', '320000', '330000', '340000', '360000'],
            data: []
          }, {
            title: '华北',
            codes: ['110000', '120000', '140000', '370000', '130000', '150000'],
            data: []
          }, {
            title: '华中',
            codes: ['430000', '420000', '410000'],
            data: []
          }, {
            title: '华南',
            codes: ['440000', '450000', '350000', '460000'],
            data: []
          }, {
            title: '东北',
            codes: ['210000', '220000', '230000'],
            data: []
          }, {
            title: '西北',
            codes: ['610000', '650000', '620000', '640000', '630000'],
            data: []
          }, {
            title: '西南',
            codes: ['500000', '530000', '520000', '540000', '510000'],
            data: []
          }, {
            title: '港澳台',
            codes: ['810000', '820000', '710000'],
            data: []
          }, {
            title: '海外',
            codes: ['990000'],
            data: []
          }]
        };
      },
      watch: {
        'checkedCities': {
          handler(val) {
            if (val.length) {
              this.isIndeterminate = true;
              if (val.length === this.checkAllList.length) {
                /* 判断是否全选 */
                this.checkIsAll(val);
              }
            } else {
              this.checkAll = false;
              this.isIndeterminate = false;
            }
          },
          deep: true
        }
      },
      mounted() {
        this.group.map(item => {
          item.codes.map(codeItem => {
            this.checkAllList.push(codeItem);
            areaList.map(cityItem => {
              if (codeItem === cityItem.id) {
                item.data.push(cityItem);
              }
            });
          });
        });
      },
      methods: {
        handleCheckAllChange(val) {
          this.checkedCities = val ? [] : [];
          this.isIndeterminate = false;
          if (this.checkedCities.length && !this.checkAll) {
            // console.log(1)
            this.isIndeterminate = false;
            this.checkAll = true;
          } else if (!this.checkedCities.length) {
            // console.log(1)
            this.isIndeterminate = false;
            this.checkAll = true;
          }
        },
        checkIsAll(val) {
          const that = this;
          that.checkAllList.map(allList => {
            let isEqual = false;
            val.map(item => {
              if (allList === item) {
                isEqual = true;
              }
            });
            if (isEqual) {
              that.checkAll = true;
              that.isIndeterminate = false;
            } else {
              that.checkAll = false;
              that.isIndeterminate = true;
            }
          });
        }
      }
    };
</script>

<style scoped>
    .province-content:not(:last-child) {
        margin-right: 10px;
    }
    .popover-content {
        display: inline-block;
        padding: 5px;
    }
    .el-icon-arrow-down {
        cursor: pointer;
        padding: 5px;
    }
</style>
