<template>
  <div ref="riskReportQueryList" class="riskReportQueryList">
    <div style="background:#fff;padding:10px;">
      <div style="font-size:16px;height:40px;line-height:45px;padding-left:20px;border-bottom:1px solid #DCDFE6;font-weight: 700;">
        查询
      </div>
      <el-form ref="ruleForm" :model="ruleForm" label-width="120px" style="background: #fff; padding: 20px 0 0px;font-weight:400;">
        <el-row>
          <el-col :span="5">
            <el-form-item label="选择模型" prop="riskPhase">
              <el-cascader v-model="ruleForm.value" clearable filterable :options="options2" :props="{  multiple: true}" :collapse-tags="true" placeholder="请选择" @change="selectHandle">
                <template slot-scope="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left:40px;">
            <el-button type="primary" @click="defaultSelectSomeone">选中某项</el-button>
            <el-button type="primary" @click="defaultSelectAll">全选</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: "riskReportQueryList",
  // import引入的组件需要注入到对象中才能使用PopupTreeInput
  components: { Treeselect },
  props: [""],
  data() {
    // 这里存放数据
    return {
      lastSelectedList: [], // 上次选中的数据
      oneDimensionalList: [], //  源数据平铺成一级节点
      ruleForm: {
        value: [],
      }, //查询 传参
      options2: [
        {
          value: "全选",
          label: '全选',
        },
        {
          value: 1,
          label: '东南',
          children: [{
            value: 2,
            label: '上海',
          }, {
            value: 3,
            label: '江苏',
          }, {
            value: 4,
            label: '浙江',
          }]
        }, {
          value: 5,
          label: '西北',
          children: [{
            value: 6,
            label: '陕西',
          }, {
            value: 7,
            label: '新疆维吾尔自治区',
            children: [{
              value: 8,
              label: '陕西',
            }, {
              value: 9,
              label: '新疆维吾尔自治区',
            }],
          }],
        }, {
          value: 10,
          label: '西北',

        }],
      options2Number: 0,
      selectAllStatusList: [],
      test: "",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    test: {
      deep: true, // deep: true  // 可以深度检测到 test 对象的属性值的变化
      handler(newV) {
        this.test = newV;
      },
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 全选的数据
    this.oneDimensionalList = []
  },
  // 方法集合
  methods: {
    getTreeList(list) {
      let _this = this;
      for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.label !== '全选') {
          this.oneDimensionalList.push(list[i])
        }
        if (a.children && a.children.length > 0) {
          let res = _this.getTreeList(a.children);
          if (res) {
            return res;
          }
        }
      }
    },
    defaultSelectSomeone() {
      this.ruleForm.value = [['1', '2']];
    },
    defaultSelectAll() {
      this.selectHandle([['全选']])
    },
    judgetAllSelected(node) {
      // 判断是否是全选,也就是看已选择的选中中包不包含"全选"
      console.log("node11111111", node);
      let isAllSelected = false
      for (let i = 0; i < node.length; i++) {
        if (node[i][0] === '全选') {
          isAllSelected = true
          break;
        }
      }
      return isAllSelected
    },
    loopSelectData(list, parentNode = []) {
      list.length > 0 && list.forEach(e => {
        let pNode = [...parentNode]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
        if (e.children && e.children.length > 0) {
          pNode.push(e.value)// 1 11
          this.loopSelectData(e.children, pNode)
        } else {
          if (parentNode.length > 0) {
            this.ruleForm.value.push([...parentNode, e.value])
          } else {
            this.ruleForm.value.push([e.value])
          }
        }
      })
    },
    checkIsAddAllSelected() {
      // 通过dom获取到控制全选，不选，半选的样式
      let label1 = document.querySelector('.el-cascader-panel').querySelector('.el-cascader-menu__wrap').querySelectorAll("li")[0].querySelectorAll("label")[0]
      let span1 = document.querySelector('.el-cascader-panel').querySelector('.el-cascader-menu__wrap').querySelectorAll("li")[0].querySelectorAll("label")[0].querySelectorAll("span")[0]

      // 获取所有的数据
      let list = this.options2; // 原始数据列表
      if (this.oneDimensionalList.length === 0) {
        this.getTreeList(list) // 把所有的父子级平铺成一个一级列表
      }

      let origin = [...this.oneDimensionalList].filter(item => !item.children)//获取所有的叶子节点
      let nowList = [...this.ruleForm.value].filter(item => item[0] !== '全选')

      // 半选时, 如果有之前选过全选,要把全选过滤掉
      if (origin.length > nowList.length && nowList.length != 0) {
        this.ruleForm.value = this.ruleForm.value.filter(item => item[0] !== '全选')
        //设置半选样式，setTimeout可以解决样式渲染不上的问题
        setTimeout(function () {
          label1.className = "el-checkbox"
          span1.className = "el-checkbox__input is-indeterminate"
        }, 1)
      } else if (nowList.length == 0) {
        //不选时, 如果有之前选过全选,要把全选过滤掉
        this.ruleForm.value = this.ruleForm.value.filter(item => item[0] !== '全选')
        label1.className = "el-checkbox"
        span1.className = "el-checkbox__input"
      } else {
        // 当所有的数据都选择时, 要自动把全选勾选上  最后这种是：origin.length == nowList.length
        if (this.ruleForm.value[0] && this.ruleForm.value[0][0] !== '全选') {
          this.ruleForm.value = [['全选'], ...this.ruleForm.value]
          label1.className = "el-checkbox"
          span1.className = "el-checkbox__input is-checked"
        }
      }
    },
    // 选择级联选择器
    async selectHandle(e = []) {
      console.log("node1111", e);
      this.ruleForm.value = []

      // 选中的数据格式: [['全选'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]
      let list = this.options2//级联选择器的数据
      let current = []; // 获取当前选中的哪个数据，因为element文档中没有获取当前选中数据的方法，只能通过上次选中的数据和这次选中的数据进行比较来获取

      // 选中的所有数据list和上一次选中的list进行比较
      if (e.length >= this.lastSelectedList.length) {
        let keys = this.lastSelectedList.map(item => JSON.stringify(item))
        current = e.filter(item => !keys.includes(JSON.stringify(item)))
        console.log('选中某项', current);
      } else {
        // 取消选中
        let keys = e.map(item => JSON.stringify(item))
        current = this.lastSelectedList.filter(item => !keys.includes(JSON.stringify(item)))
        console.log('取消选中', current);
      }
      // 根据element的选中数据格式, 每一个选项都是一个列表, 列表第一项为父级value, 第二项为选中的子级value, ...以此类推
      const currentValue = current.length > 0 ? current[0][0] || '' : ''
      if (currentValue === '全选') {
        if (this.judgetAllSelected(e)) {
          this.loopSelectData(list)//获取全选时回显的数据
        } else {
          this.ruleForm.value = []//不选
        }
      } else {
        this.ruleForm.value = e//半选
      }
      // 根据当前选择的数据（不包括全选）和全选时所有的数据--进行对比
      this.checkIsAddAllSelected();

      this.lastSelectedList = this.ruleForm.value; // 保存上一次的选择结果
      this.changeHandle();
    },
    changeHandle() {
      // 这里是处理成自己需要的数据格式, 需要把全选的这一选项过滤掉
      // 原始选择的数据格式 [['全选'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]
      console.log('changeHandle: ', this.ruleForm.value);
    },
  },
};
</script>
<style lang='scss' >


</style>
<style lang='scss' scoped>
 ::v-deep .el-form-item__label {
  font-weight: 400 !important;
}
</style>