<template>
  <el-popover class="fl" placement="bottom-start" width="406" trigger="click">
    <div class="dm-store__area clearfix">
        <div class="dm-store__area__left fl">
            <el-checkbox v-for="(v,i) in areaList" v-model="v.isCheck" :key="i" @change="setCurrentCity(v)">{{v.provinceName}}</el-checkbox>
        </div>
         <div class="dm-store__area__right fr">
           cccc
            <el-checkbox v-for="(v,i) in currentCityList" v-model="v.isCheck" :key="i">{{v.cityName}}</el-checkbox>
        </div>
    </div>
      <div class="el-input dm-store__type__inner w200" slot="reference">
        <div class="el-input__inner block">
            已选择1个门店区域
        </div>
    </div>
  </el-popover>
</template>
<script>
const baseUrl = 'http://gicdev.demogic.com';
export default {
  name:'options-type',
  props:{
    checked:{
      type:Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    newChecked(val) {
      this.$emit('get-emit',val);
    }
  },
  data() {
    return {
      areaList:[],
      currentCityList:[],
      newChecked:this.checked
    }
  },
  created() {
    this.getAreaTree();
  },
  methods:{
    init() {
      this.newChecked = this.checked;
      console.log(this.newChecked)
    },
    delTag(index){
      this.newChecked.splice(index,1);
    },
    filterLabel(val) {
      let result = '';
      this.typeList.map( v => {
        if (val === v.value) {
          result = v.label;
        }
      })
      return result;
    },
    getAreaTree() {
        this.axios.get(baseUrl + '/api-plug/dict-district-tree?requestProject=gic-web').then(res => {
            this.areaList = res.data.result.map(v => ({
              isCheck:false,
              ...v,
            }))
            console.log(this.areaList)
        })
    },
    setCurrentCity(item) {
      this.currentCityList = item.children || [];
      item.children.map(v => {
        v.isCheck = item.isCheck
      });
    }
  }
}
</script>

