<template>
  <div class="group-check-cnt">
    <el-checkbox
      v-if="!notAll"
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全部</el-checkbox
    >
    <el-checkbox-group v-model="checkedVal" @change="handleCheckedChange">
        <el-checkbox
          v-for="item in groupArr"
          :label="item.key"
          :key="item.key"
          class="el-checkbox"
      
        >
          <span class="span-label" @click="focusBox(item.ref)">
            {{ item.label }}<i v-if="!!item.arr" class="el-icon-arrow-down" />
          </span>
          <el-cascader
            style="width: 100px"
            placeholder=""
            v-model="item[key]"
            :options="item.arr"
            :ref="item.ref"
            class="mycascader"
          >
          </el-cascader>
        </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    groupArr: {
      type: Array,
      required: true,
    },
    notAll: {
      type: Boolean,
      required: false,
    },
  },
  watch: {
    groupArr: {
      handler: function(arr) {
        
      },
      immediate: true
    }
  },
  data() {
    return {
      checkedVal: [],
      isIndeterminate: false,
      checkAll: false,
      isDropdownVisible: false,
      origon:'',
      industry:'',
    };
  },
  methods: {
    focusBox(ref) {
      console.log(11111111);
      this.isDropdownVisible = !this.isDropdownVisible;
      console.log(this.isDropdownVisible, "this.isDropdownVisible");
      this.$nextTick(() => {
        this.$refs[ref].dropDownVisible = this.isDropdownVisible;
      });
      if (this.isDropdownVisible) {
        console.log(this.$refs[ref])
        this.$refs[ref][0].$el.querySelector(".el-input__suffix").click();
      }
    },
    isBlurDropdown(value) {
      console.log(value);
      this.isDropdownVisible = value;
    },
    handleCheckedChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.groupArr.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.groupArr.length;
      this.$emit("onGroupChange", this.checkedVal);
    },
    handleCheckAllChange(val) {
      this.checkedVal = val ? this.groupArr?.map((ot) => ot.value) : [];
      this.isIndeterminate = false;
      this.$emit("onGroupChange", this.checkedVal);
    },
  },
};
</script>

<style lang="scss" scoped>
.group-check-cnt {
  > .el-checkbox {
    margin: 10px 0;
  }
  ::v-deep .el-checkbox__label {
    color: #3d3d3d;
    font-size: 16px;
    font-weight: 400;
    padding-left: 6px;
    line-height: 20px;
    position: relative;
    width: 90px;
  }
  .quesiton {
    display: block;
    font-size: 13px;
    color: #b9b9b9;
    position: absolute;
    right: -14px;
    top: -6px;
  }
  .el-icon-arrow-down {
    font-size: 14px;
    margin-left: 3px;
  }
    .el-checkbox {
      position: relative !important;
      .span-label{
        position: absolute;
        z-index: 500;
        top: 8px;
        background: #fff;
      }
      .mycascader{
        
      }
      ::v-deep .el-cascader .el-input .el-input__inner {
        border: none !important;
      }
      ::v-deep .el-cascader .el-input .el-input__suffix {
        display: none;
      }
      ::v-deep .el-cascader .el-cascader__tags{
        display: none !important;
      }
    }
}
</style>