<template>
  <div id="tag-all-select">
    <el-collapse v-model="activeNames" @change="changeDisplay" :style="`text-align:${selectList.length > 0 ? 'left' : 'center'};`">
      <el-row style="background:#ffffff;">
        <el-col :span="24" v-if="selectList.length > 0" @click.native="changeDisplay">
          <el-tag
            v-for="(item, index) in displayList"
            :key="index"
            :closable="true"
            @close="tagClose(item)"
            style="margin-right:0.5rem;"
            :disable-transitions="true"
          >
            {{ item.label }}
          </el-tag>
        </el-col>
        <el-col :span="24" style="width:100%" @click.native="changeDisplay" v-else>
          {{ placeholder }}
        </el-col>
      </el-row>
      <el-collapse-item name="1" style="text-align:left;">
        <el-row :gutter="10" class="selectCard">
          <el-col :span="6" class="firstMenu">
            <el-checkbox-group
              v-model="selectList"
              @change="
                val => {
                  selectChange(val, 'first');
                }
              "
            >
              <el-col v-for="(item, index) in firstList" :key="index" class="word">
                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-col>
          <el-col :span="18" style="padding:0 1rem;">
            <el-checkbox-group
              v-model="selectList"
              @change="
                val => {
                  selectChange(val, 'second');
                }
              "
            >
              <el-col :span="6" v-for="(item, index) in secondList" :key="index" class="word">
                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
              </el-col>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'tag-all-select',
  props: {
    selected: { type: Array, default: () => [] }, //已选项
    placeholder: { type: String, default: '请选择' }, //提示
    firstList: { type: Array, default: () => [] }, //一级选项列表
    secondList: { type: Array, default: () => [] }, //二级选项列表
    type: { type: String },
  },
  components: {},
  data: () => ({
    activeNames: '',
    selectList: [],
    displayList: [],
  }),
  created() {},
  watch: {
    selected: {
      handler(val, oval) {
        let dif = _.difference(val, oval);
        let key = Object.keys(val[0]);
        if (dif.length > 0) {
          this.defaultProcess();
        }
      },
    },
  },
  computed: {},
  methods: {
    //一/二级选择方法
    selectChange(val, type) {
      if (type === 'first') {
        this.processProvince(val);
      } else {
        this.processCity();
      }
    },
    //处理直辖/省份
    processProvince(val) {
      //1对比出哪个是新选的,如果没有新选的,那就是取消
      let is_selected = this.selected.map(item => item.value); //将选择前的结果的value整理出来
      let different = _.difference(val, is_selected); //对比出新选的value是哪个
      if (different.length > 0) {
        //新选的情况
        //2查看是不是直辖市
        let haveCityList = [];
        haveCityList = different.filter(item => {
          return this.haveCity(item);
        });
        //3,不是直辖市,让父组件查询城市列表;并去掉此选项
        if (haveCityList.length > 0) {
          //此处操作:将最后一次结果还原,并告诉父组件请求该省下的城市
          this.$set(this, `selectList`, is_selected);
          let code = '';
          if (typeof haveCityList[0] === 'object') {
            code = haveCityList[0].value;
          } else {
            code = haveCityList[0];
          }
          this.$emit('listChange', { val: code, type: this.type });
        } else {
          //是直辖市/城市,选择此城市,然后过滤出这条数据,用于显示,删除
          this.processCity();
        }
      } else {
        this.processCity();
      }
    },
    //看着名很咋地,其实就是同步数据
    processCity() {
      let newArr = [];
      this.selectList.map(item => {
        let result = this.firstList.filter(fil => fil.value === item);
        if (result.length > 0) {
          result.forEach(res => {
            newArr.push(res);
          });
        } else {
          result = this.secondList.filter(fil => fil.value === item);
          if (result.length > 0) {
            result.forEach(res => {
              newArr.push(res);
            });
          } else {
            result = this.displayList.filter(fil => fil.value === item);
            if (result.length > 0) {
              result.forEach(res => {
                newArr.push(res);
              });
            }
          }
        }
      });
      this.disFilter(newArr);
    },
    //关闭标签方法
    tagClose(val) {
      //取消选择
      let leastList = this.selectList.filter(item => item !== val.value);
      let leastDisplayList = this.displayList.filter(item => item.value !== val.value);
      this.$set(this, `selectList`, leastList);
      this.disFilter(leastDisplayList);
    },
    //是不是直辖市
    haveCity(item) {
      let value;
      if (typeof item === 'object') {
        value = item.value;
      } else {
        value = item;
      }
      if (
        value === '110000' ||
        value === '120000' ||
        value === '310000' ||
        value === '500000' ||
        value === '710000' ||
        value === '810000' ||
        value === '820000'
      ) {
        return false;
      } else if (value.indexOf('0000') > 0) {
        return true;
      } else {
        return false;
      }
    },
    //显示/隐藏选择面板
    changeDisplay() {
      if (this.activeNames !== '') {
        this.$set(this, `activeNames`, '');
      } else {
        this.$set(this, `activeNames`, '1');
      }
    },
    //初始化处理
    defaultProcess() {
      //处理复选框
      let select = this.selected.filter(item => item.value !== undefined);
      if (select.length > 0) {
        let result = this.selected.map(item => item.value);
        this.$set(this, `selectList`, result);
        //处理显示
        this.$set(this, `displayList`, this.selected);
      } else {
        let result = this.selected.map(item => {
          return this.defalutSearch(item);
        });
        this.disFilter(result);
      }
    },
    //显示处理;选择值
    disFilter(val) {
      this.$emit('selectChange', { val: val, type: this.type });
      this.$set(this, `displayList`, val);
    },
    defalutSearch(label) {
      let result = this.firstList.filter(fil => fil.label === label);
      if (result.length > 0) {
        return result[0];
      } else {
        result = this.secondList.filter(fil => fil.label === label);
        if (result.length > 0) {
          return result[0];
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.selectCard {
  border: 1px solid #e7e8ec;
}
.firstMenu {
  background: #c9cacf;
  border: 1px solid #e7e8ec;
}
</style>
