<template>
  <LabelBox
    :label="formItems.attrs?.label"
    :need-star="formItems.attrs?.needStar"
    :width="formItems.attrs?.width"
  >
    <el-select
      v-model="selectedLabels"
      size="mini"
      :placeholder="formItems.attrs?.placeholder || '请选择'"
      :filterable="false"
      v-bind="formItems.attrs"
      popper-class="el-select-popper-class display-none"
      v-on="formItems.events"
      @change="handleChange"
      @focus="showDialog = true"
      @clear="handleClear"
    />

    <tree-search-dialog
      v-model="selectedKeys"
      :visible="showDialog"
      v-bind="formItems.attrs?.info"
      :account-data="accountData"
      :account-groups="accountGroups"
      :default-expanded-keys="defaultExpandedKeys"
      @cancel="showDialog = false"
      @confirm="handleConfirm"
    />
  </LabelBox>
</template>

<script>
import LabelBox from '../labelBox/index.vue';
import TreeSearchDialog from '../TreeSearchDialog';

export default {
  name: 'SelectTreeTable',
  components: {
    LabelBox,
    TreeSearchDialog,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // formItems: {},
      selectedKeys: '',
      selectedLabels: '',
      showDialog: false,
    };
  },
  computed: {
    accountData() {
      return this.formItems.options.length > 0 ? [this.formItems.options[0]] : [];
    },
    accountGroups() {
      const list = [...this.formItems.options];
      list.splice(0, 1);
      return list;
    },
    defaultExpandedKeys() {
      return this.accountData.map(item => { return item.id; });
    },
  },
  watch: {
    value(newVal) {
      if (!newVal) {
        this.selectedLabels = '';
      } else if (newVal && !this.selectedLabels) {
        this.selectedLabels = this.findTextByValue(this.formItems.options, newVal);
      }
    },
  },
  mounted() {
    console.log(this.formItems, 'fff');
  },
  methods: {
    findTextByValue(options, targetValue) { // 查找对应label
      function search(items) {
        for (const item of items) {
          if (item.value === targetValue) {
            return item.text;
          }
          if (item.children && item.children.length > 0) {
            const result = search(item.children);
            if (result) {
              return result;
            }
          }
        }
        return null;
      }
      return search(options);
    },
    handleChange(val) {
      this.$emit('input', val);
      this.$emit('outOperation', val);
    },
    handleConfirm(val) {
      // console.log('Confirmed selections:', val);
      this.selectedKeys = val.value;
      this.selectedLabels = val.text;
      this.showDialog = false;
      this.handleChange(val.value);
    },
    handleClear(value) {
      // console.log('handleClear', value);
      this.handleConfirm({ value: '', text: '' });
    },
  },
};
</script>
<style lang="scss">
.el-select-popper-class {
    &.display-none {
      // popper 弹窗隐藏样式
      display: none !important;
    }
}
</style>
<style lang="scss" scoped>
::v-deep.el-select {
  width: 100%;
  height: 24px;
  line-height: 24px;
}

::v-deep.input-box {
  height: 24px;
}

::v-deep.el-select .el-input__icon {
  height: 24px;
  line-height: 25px;
}

::v-deep.el-select .el-input-group__prepend {
  box-sizing: border-box;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  border: none;
}

::v-deep.el-select .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>

