<template>
  <div class="flex">
    <el-select class="wp100" @change="change" v-model="faNode[nodeKey]" filterable clearable placeholder="请选择API" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
      <el-option v-for="option in enumList" :key="option.id" :label="option.name" :value="option.id">
      </el-option>
    </el-select>
    <div class="add-btn select-line-icon ml5" @click="addList()">
      <i class="el-icon-circle-plus-outline" />
    </div>
    <el-drawer size='80%' title="API配置" :visible.sync="drawer" append-to-body @closed='closed'>
      <API />
    </el-drawer>
  </div>
</template>

<script>
import { getAPIList } from '../../api/apiconfig.js'
import API from '../API/index.vue'

export default {
  components: {
    API
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    faNode: {
      type: Object,
      required: true
    },
    nodeKey: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      drawer: false,
      // type: '',
      enumList: []
    }
  },
  watch: {
    // 'item.APItype'(val) {
    //   // this.type = val
    //   // this.init(val)
    //   this.faNode[this.nodeKey] = ''
    // },
    faNode() {
      this.init()
    }
  },
  //生命周期，创建完成（可以访问当前this实例）
  created() {
    this.faNode[this.nodeKey] = this.faNode[this.nodeKey] || ''
    this.init()
  },
  //方法集合
  methods: {
    change(value) {
      this.faNode[this.nodeKey] = value
      this.$forceUpdate()
      this.$emit('getList', this.getList(value))
    },
    getList(value) {
      let result = {}
      this.enumList.forEach(item => {
        if (item.id == value) {
          result = item
        }
      })
      return result
    },
    init(type) {
      getAPIList({ type: this.item.APItype }).then(res => {
        this.enumList = res.data
        if (this.faNode[this.nodeKey]) {
          this.change(this.faNode[this.nodeKey])
        }
      })
    },
    closed() {
      this.init(this.item.APItype)
    },
    addList() {
      this.drawer = true
    }
  }
}
</script>
<style scoped lang='less'>
.el-select {
  width: 100% !important;
}
.flex {
  display: flex;
  & .add-btn {
    cursor: pointer;
    color: green;
  }
}
</style>