<!-- 可输入下拉框 -->
<template>
  <div>
    <el-select
      v-model="currentValue"
      :size="size"
      :disabled="disabled"
      :placeholder="placeholder"
      :clearable="clearable"
      :multiple="multiple"
      allow-create
      filterable
      default-first-option
    >
      <el-option v-for="value in currentOptions" :key="value" :label="value" :value="value"></el-option>
    </el-select>
  </div>
</template>
<script>
import Request from '../../../../lib/utils/request'

export default {
  name: 'CsFieldTextDatalist',
  props: {
    value: {
      default: null
    },
    tenantId: {
      type: Number,
      default: null
    },
    size: {
      type: String,
      default: 'mini'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: null
    },
    options: {
      type: Array,
      default: null
    },
    clearable: {
      type: Boolean,
      default: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    fieldFullName: {
      type: String,
      default: null
    }
  },
  components: {},
  data() {
    return {
      currentValue: null,
      currentOptions: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    value: {
      handler(val) {
        this.setData()
      },
      immediate: false, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    currentValue(val) {
      this.$emit('input', val)
    },
    options: {
      handler(val) {
        this.setData()
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    fieldFullName: {
      handler(val) {
        this.getFieldFullName()
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    }
  },
  //方法集合
  methods: {
    setData() {
      this.currentValue = this.value
      this.getFieldFullName()
    },

    /* 根据全字段名称获取数据库中的值 */
    getFieldFullName() {
      let currentOptions = []
      this.options.forEach(item => {
        if (currentOptions.indexOf(item) == -1) {
          currentOptions.push(item)
        }
      })

      // 全字段名称
      if (!this.fieldFullName) {
        this.currentOptions = this.$util.copy(currentOptions)
        return
      }
      // 租户编号判断
      if (!this.tenantId && this.tenantId !== 0) {
        this.$util.warning('请输入租户编号')
        return
      }

      Request({
        url: '/api/TextDatalist/{0}?fieldFullName={1}'.format(this.tenantId, this.fieldFullName),
        method: 'get'
      }).then(res => {
        res.forEach(item => {
          if (currentOptions.indexOf(item) == -1) {
            currentOptions.push(item)
          }
        })

        this.currentOptions = this.$util.copy(currentOptions)
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped></style>
