<template>
  <div class="inputs">
    <el-select
      v-if="inputWriteable && permission_sub != 'n'"
      v-validate="inputValidate"
      :name="inputName"
      v-model="valueDesc"
      size="small"
      popper-class="dic-select"
      clearable
      @clear="clear"
      ref="elSelect"
      placeholder="请选择"
      :style="this.styles"
      :filterable="filterable"
      :filter-method="filterMethod"
    >
      <el-option v-if="selectlist && selectlist.length > 0" :value="inputVal">
        <el-scrollbar style="height:100%">
          <el-tree
            ref="elTree"
            node-key="key"
            style="height:245px"
            :data="selectlist"
            :highlight-current="true"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          ></el-tree>
        </el-scrollbar>
      </el-option>
    </el-select>
    <span v-if="!inputWriteable && permission_sub != 'n'">{{ valueDesc }}</span>
  </div>
</template>
<script>
import utils from '@/hotent-ui-util.js'
import sub_pio_mixin from '@/sub-permission-mixin.js'
export default {
  name: 'eip-dic',
  props: [
    'validate',
    'value',
    'name',
    'permission',
    'dickey',
    'bind',
    'styles',
    'filterable'
  ],
  mixins: [sub_pio_mixin], //混入方式引入表单组件中公共属性，处理子表、孙表行内联动（切面修改permission_sub_sub）
  data() {
    return {
      selectlist: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      valueDesc: '',
      tagFormatValue: [],
      newValidate: null,
      writeable: true
    }
  },
  computed: {
    inputVal: {
      get: function() {
        if (utils.isEmpty(this.value)) {
          return ''
        }
        return this.value
      },
      set: function(val) {
        this.$emit('input', val)
      }
    },
    inputWriteable: function() {
      return this.writeable
        ? utils.getWriteable(this.permission_sub)
        : this.writeable
    },
    inputValidate: function() {
      if (this.newValidate) {
        return this.newValidate
      }
      var validateObj = this.$store.state.index.validate
      return utils.addRequiredOrNot(
        this.permission_sub,
        this.validate,
        validateObj,
        this
      )
    },
    inputName: function() {
      let labeldesc = ''
      if (
        this.$slots &&
        this.$slots.labeldesc &&
        this.$slots.labeldesc[0].children &&
        this.$slots.labeldesc[0].children[0].text
      ) {
        labeldesc = this.$slots.labeldesc[0].children[0].text
        return this.name ? this.name : utils.getName() + '-' + labeldesc
      } else {
        return this.name ? this.name : utils.getName()
      }
    }
  },
  methods: {
    clear() {
      this.filterMethod('')
      this.$emit('input', '')
      // this.$refs.elTree.setCurrentNode({});
    },
    handleNodeClick(data) {
      this.inputVal = data.key
      this.valueDesc = data.name
      this.$refs.elSelect.blur()
      setTimeout(() => {
        this.$validator.validate()
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    findDesc(list) {
      if (list && list.length > 0) {
        list.forEach(l => {
          if (l.key == this.value) {
            this.valueDesc = l.name
            return
          }
          if (l.children) {
            this.findDesc(l.children)
          }
        })
      }
    },
    filterMethod(query) {
      this.$refs.elTree.filter(query)
    }
  },
  mounted() {
    if (this.dickey) {
      this.$store
        .dispatch('menu/getByTypeKeyForComBo', this.dickey)
        .then(res => {
          this.selectlist = res
          if (this.value !== null && this.value !== undefined) {
            this.findDesc(res)
          }
        })
    }

    const _me = this
    const exp = this.bind
    if (exp) {
      const pInst = utils.getOnlineFormInstance(_me)

      _me.$watch('inputVal', function(newVal, oldVal) {
        if (newVal !== oldVal) {
          utils.setValueByPath(pInst, exp, newVal)
        }
      })
    }

    const {subScopeEl, index} = utils.getSubScopeElAndIndex(this.$el)
    if (
      subScopeEl &&
      (subScopeEl.getAttribute('row_readonly') == 'true' ||
        subScopeEl.getAttribute('row_readonly') === true)
    ) {
      this.writeable = false
    }
  },
  created() {
    this.inputName = this.name ? this.name : utils.getName()
    this.$validator = this.$root.$validator
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

div[aria-invalid='true'] ::v-deep .el-input__inner,
div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
  border-color: #f56c6c;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  padding-right: 0;
  padding-left: 0;
  background-color: #fff;
}

.el-select-dropdown__item {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: $--color-text-regular;
  height: 100%;
  line-height: 34px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

li.el-select-dropdown__item.selected {
  font-weight: normal;
  padding-right: 0;
  padding-left: 0;
}
</style>
