<template>
  <div>
    <el-select v-model="valueData" clearable @clear="clearData()" placeholder="请选择" @visible-change="visibleChange"
               :loading="loading" @change="change(valueData)">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  import {objdictList} from "@/api/system/dict/type";

  export default {
    name: "BizDict",
    model: {
      prop: 'value',
      event: 'changeValue'
    },
    props: {
      //是否是单独使用
      isCoom:{
        type:Boolean,
        default:false,
      },
      value: {
        type: String,
        default: "",
      },
      //参数1
      para1: {
        type: String,
        default: "",
      },
      //固定配置
      parmar: {
        type: Object,
        default: () => {
          return {
            dictType: 'ds',
          }
        },
      },
      //value和label对应哪个字段
      arrayOpt: {
        type: Object,
        default: () => {
          return {
            numberOne: 0,
            numberTwo: 1
          }
        },
      }
    },
    data() {
      return {
        options: [],
        valueData:"",
        loading: false,
        isNumber: 0,
      }
    },
    watch: {
      para1: {
        handler(newName, oldName) {
          this.isNumber = 0;
          this.options = [];
          this.valueData = "";
          this.para1 = newName;
          this.$emit('changeData', this.value);
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true,
        deep:true,
      },
      value: {
         handler(newName, oldName) {
           console.log(newName,'newName');
           //单独组件根据监听进行回显，级联组件通过页面v-if进行刷新
           //    if(this.isCoom) {
                this.options = [];
                this.showData(newName)
              // }else {
              //   this.valueData=newName;
              // }
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true,
        deep:true,
      }
    },
    methods: {
      async visibleChange(is) {
        //防止二次触发刷新
        console.log(is,'is');
        if (is && this.isNumber < 1) {
          this.loading = true;
          let data = await objdictList({...this.parmar, outType: 0, para1: this.para1});
          if (data.code == 200) {
            this.isNumber++;
            this.options = [];
            data.data.data.forEach(items => {
              this.options.push({
                label: items[this.arrayOpt.numberTwo],
                value: items[this.arrayOpt.numberOne]
              })
            });
            this.loading = false;
          }
        }
      },
      change(value) {
        this.$emit('changeData', value);

      },
      clearData() {
        this.valueData = "";
        this.$emit('changeData', "");
      },
      async showData(value) {
        if(this.isCoom)
        {
          this.options=[];
        }
        //回显列表只有一条数据，当进行下拉才进行全部数据的加载
        let data = await objdictList({...this.parmar, outType: 1, para1: value});
        if (data.code == 200) {
          if (this.options.length === 0) {
            data.data.data.forEach(items => {
              this.options.push({
                label: items[this.arrayOpt.numberTwo],
                value: items[this.arrayOpt.numberOne]
              })
            });
            this.valueData=value;
            this.isNumber=0;
            console.log(this.valueData,'this.valueData');
            console.log(this.options,'this.options');
          }
        }
      }
    },
    created() {
      this.showData(this.value);
    }
  }
</script>

<style scoped>

</style>
