<template>
  <!--
    	作者 WuYuseng
    	时间：2019-11-1
    	描述：区域
    -->
  <el-dialog title="添加可配送区域" :visible.sync="dialogVisible" width="700px" custom-class="area-dialog" :before-close="closeArea">
    <div class="modal-wrapper">
      <!--选择省-->
      <div class="address-item scroll-box">
        <el-checkbox :indeterminate="indeterminate" v-model="all_active" @change="allProvinceFunc">全选</el-checkbox>
        <div class="province-item" :class="{ curr: index == province_index }" v-for="(item, index) in options" :key="index" @click.self="cityShow(index)">
          <el-checkbox :indeterminate="item.indeterminate" v-model="item.checked" :disabled="item.disabled" :label="item.value" @change="handleCheckedProvinceChange(index)">
            {{ item.label }}
          </el-checkbox>
        </div>
      </div>
      <!--选择市-->
      <div class="address-item scroll-box">
        <template v-if="province_index != null">
          <el-checkbox
            :indeterminate="options[province_index].indeterminate"
            v-model="options[province_index].checked"
            :disabled="options[province_index].disabled"
            @change="allCityFunc"
          >
            全选
          </el-checkbox>
          <div class="province-item" :class="{ curr: index == province_index }" v-for="(item, index) in options[province_index]['children']" :key="index">
            <el-checkbox :label="item.value" v-model="item.checked" :disabled="item.disabled" @change="handleCheckedCityChange(index)">{{ item.label }}</el-checkbox>
          </div>
        </template>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeArea">取 消</el-button>
      <el-button type="primary" @click="confirmArea">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils/base';
export default {
  data() {
    return {
      /*弹窗是否打开*/
      dialogVisible: false,
      /*省*/
      provinceList: [],
      /*选择省的角标*/
      province_index: null,
      /*当前选中的省*/
      activeProvinceId: [],
      /*当前对象*/
      activeModel: {},
      /*区域*/
      options: [],
      /*是否全部选中*/
      all_active: false,
      /*不确定*/
      indeterminate: false
    };
  },
  props: ['show_area', 'areaModel', 'areas'],
  created() {
    this.init();
  },
  methods: {
    /*初始化*/
    init() {
      this.dialogVisible = this.show_area;
      this.setList(this.areas);
      this.options = deepClone(this.areas);
      this.isAll();
    },

    /*设置list*/
    setList(list) {
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if(item.checked!=true){
          item.checked = false;
        }
        if(item.indeterminate!=true){
           item.indeterminate = false;
        }
        if(item.index==null){
          item.index=[];
          item.disabled = false;
        }
        if (Object.prototype.toString.call(item.children) == '[object Array]') {
          //判断子本索引个数，和其它索引个数
          let this_num=0,other_num=0,no_num=0,count=item.children.length;
          for (let c = 0; c < count; c++) {
            let child = item.children[c];
            if(child.checked!=true){
              child.checked = false;
            }
            if(child.index==this.areaModel.index&&item.index.indexOf(this.areaModel.index)!=-1){
              child.checked=true;
              child.disabled = false;
              this_num++;
            }else if(child.index!=null&&item.index.indexOf(child.index)!=-1){
              child.checked=true;
              child.disabled = true;
              other_num++;
            }else{
              child.checked=false;
              child.disabled = false;
              no_num++;
            }

            if(this_num==count||other_num==count){
               item.checked=true;
               item.indeterminate = false;
               if(other_num==count){
                 item.disabled = true;
               }else{
                 item.disabled = false;
               }
            }else if(this_num==0||other_num==0){
              item.checked=false;
              item.indeterminate = false;
              item.disabled = false;
            }else{
              item.disabled = false;
              if(this_num>0){
                item.checked=false;
                item.indeterminate = true;
              }
            }
          }
        }
      }
    },

    /*选择全部省和市*/
    allProvinceFunc() {
      if (!this.all_active) {
        this.all_active = false;
        this.indeterminate = false;
      } else {
        this.all_active = true;
        this.indeterminate = false;
      }

      for (let i = 0; i < this.options.length; i++) {
        let item = this.options[i];
        if(item.disabled!=true){
          item.checked = this.all_active;
          if(this.all_active){
            item.index.push(this.areaModel.index);
          }else{
            let is_index=item.index.indexOf(this.areaModel.index);
            if(is_index!=-1){
              item.index.splice(is_index,1);
            }
          }
          item.indeterminate = this.indeterminate;
          if (Object.prototype.toString.call(item.children) == '[object Array]') {
            for (let c = 0; c < item.children.length; c++) {
              let child = item.children[c];
              if(child.disabled!=true){
                child.checked = this.all_active;
                if(this.all_active){
                  child.index=this.areaModel.index;
                }else{
                  child.index=null;
                }
              }
            }
          }
        }
      }
    },

    /*选择省*/
    handleCheckedProvinceChange(i) {
      this.province_index = i;
      this.options[i].indeterminate = false;
      if (this.options[i].checked&&this.options[i].disabled!=true) {
        this.options[i].checked = true;
        this.options[i].index.push(this.areaModel.index);
      } else {
        let is_index=this.options[i].index.indexOf(this.areaModel.index);
        if(is_index!=-1){
          this.options[i].index.splice(is_index,1);
        }
        if(this.options[i].disabled!=true){
          this.options[i].checked = false;
        }
      }
      if (Object.prototype.toString.call(this.options[i].children) == '[object Array]') {
        for (let c = 0; c < this.options[i].children.length; c++) {
          let child = this.options[i].children[c];
          if (child.disabled != true) {
            child.checked = this.options[i].checked;
            child.index=this.areaModel.index;
          }
        }
      }
      this.isAll();
    },

    /*选择全部的市*/
    allCityFunc() {
      let flag = this.options[this.province_index].checked;
      if (flag) {
        if(this.options[this.province_index].index.indexOf(this.areaModel.index)==-1){

          this.options[this.province_index].index.push(this.areaModel.index);
        }
      } else {
        let is_index=this.options[this.province_index].index.indexOf(this.areaModel.index);
        if(is_index!=-1){
          this.options[this.province_index].index.splice(is_index,1);
        }
      }
      this.options[this.province_index].indeterminate=false;
      for (let c = 0; c < this.options[this.province_index].children.length; c++) {
        let child = this.options[this.province_index].children[c];
        if (child.disabled != true) {
          child.checked = flag;
          if(flag){
            child.index=this.areaModel.index;
          }else{
            child.index=null;
          }
        }
      }
      this.isAll();
    },

    /*选择市*/
    handleCheckedCityChange(i) {
      let flag = this.options[this.province_index].children[i].checked;
      let indeterminate=this.options[this.province_index].children[i].indeterminate;
      let _index=this.options[this.province_index].index.indexOf(this.areaModel.index);
      let n = this.isChooseAll(this.options[this.province_index].children);
      if(flag){
        if(_index==-1){
          this.options[this.province_index].index.push(this.areaModel.index);
        }
        this.options[this.province_index].children[i].index=this.areaModel.index;
      }else{
        if(_index!=-1&&indeterminate==false){
          this.options[this.province_index].index.splice(_index,1);
        }else if(_index==-1&&indeterminate==true){
          this.options[this.province_index].index.push(this.areaModel.index);
        }
        this.options[this.province_index].children[i].index=null;
      }
      if (n == 0) {
        this.options[this.province_index].checked = false;
        this.options[this.province_index].indeterminate = false;
      } else if (n == 2) {
        this.options[this.province_index].checked = true;
        this.options[this.province_index].indeterminate = false;
      } else {
        this.options[this.province_index].checked = false;
        this.options[this.province_index].indeterminate = true;
      }
      this.isAll();
    },

    /*判断是否选中了所有的省和市*/
    isAll() {
      let n = this.isChooseAll(this.options);
      if (n == 0) {
        this.all_active = false;
        this.indeterminate = false;
      } else if (n == 2) {
        this.all_active = true;
        this.indeterminate = false;
      } else {
        this.all_active = false;
        this.indeterminate = true;
      }
    },

    /*判断列表是否全选*/
    isChooseAll(list) {
      let allcount = 0;
      if (Object.prototype.toString.call(list) == '[object Array]') {
        for (let i = 0; i < list.length; i++) {
          if(Object.prototype.toString.call(list[i].index) == '[object Array]'){
            if ((list[i]['checked']==true&&list[i].index.indexOf(this.areaModel.index)!=-1) || list[i]['indeterminate']==true) {
              allcount++;
            }
          }else{
            if (list[i]['checked']==true || list[i]['indeterminate']==true) {
              allcount++;
            }
          }
        }
        if (allcount == list.length) {
          return 2;
        } else {
          if (allcount > 0) {
            return 1;
          } else {
            return 0;
          }
        }
      } else {
        return 2;
      }
    },

    /*选择省 - 只是展示城市列表*/
    cityShow(i) {
      this.province_index = i;
    },

    /*关闭弹窗*/
    closeArea() {
      this.dialogVisible = false;
      this.$emit('closeArea', { statu: false, type: 'cancel' });
    },

    /*确认并关闭弹窗*/
    confirmArea() {
      this.dialogVisible = false;
      let obj = {
        statu: false,
        type: 'confirm',
        this_area: this.options,
        total_area: []
      };
      this.$emit('closeArea', obj);
    }


  }
};
</script>

<style>
.area-dialog .el-dialog__header {
  border-bottom: 1px solid #dddddd;
}
.area-dialog .el-dialog__body {
  padding: 20px;
}
.area-dialog .modal-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.area-dialog .scroll-box {
  overflow-y: auto;
}
.area-dialog .address-item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid #eee;
  height: 400px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.area-dialog .el-checkbox {
  padding: 8px 10px 8px 22px;
  min-height: 20px;
  box-sizing: border-box;
  margin-right: 0;
  position: relative;
}
.area-dialog .province-item {
  cursor: pointer;
}
.area-dialog .province-item:hover,
.area-dialog .province-item.curr {
  background: #eeeeee;
}
/* .area-dialog .address-item .el-checkbox {
  display: block;
  margin-right: 0;
}

.area-dialog .address-item .el-checkbox-item:hover,
.area-dialog .address-item .active-checkbox {
  background: #eeeeee;
}
.area-dialog .address-item .el-checkbox__input {
  position: absolute;
  left: 10px;
  top: 10px;
}
.area-dialog .address-item .el-checkbox__label {
  display: block;
} */
</style>
