<template>
  <el-drawer title="设置API" :visible.sync="drawer" append-to-body size="50%">
    <mg-form :config="options" class="mb50" :form="form" ref="form" label-position="right" label-width="100px">
    </mg-form>
    <div class="fixbottom uni-flex py10 pl20">
      <el-button size='default' @click="drawer = false">取消</el-button>
      <el-button size='default' type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import selectFormItem from '../selectFormItem/index.vue'
import APISelect from '../APISelect/index.vue'

export default {
  props: ['form', 'drawingList', 'flowConfig', 'config'],
  data() {
    return {
      drawer: true,
      options: [
        {
          label: '名称',
          prop: 'name',
          required: true,
          type: 'input',
        },
        {
          label: '功能类型',
          prop: 'type',
          required: true,
          type: 'select',
          enum: 'API_type',
          // listeners: {
          //   change: this.change
          // }
        },
        {
          label: '触发条件',
          prop: 'blurType',
          required: true,
          type: 'select',
          enum: 'blur_type',
        },
        {
          label: 'API',
          prop: 'apiId',
          required: true,
          APItype: '',
          dom: APISelect,
          listeners: {
            getList: this.getList //根据api变更选择更新入参和出参的下拉选项
          }
        },
        {
          label: '入参',
          prop: 'param',
          APItype: 1,
          dataList: [],
          dom: selectFormItem,
          attrs: {
            flowConfig: this.flowConfig,
            drawingList: this.drawingList,
            form: this.config,
          }
        },
        {
          label: '出参',
          prop: 'response',
          APItype: 2,
          dataList: [],
          isList: this.form.type == 2,
          dom: selectFormItem,
          attrs: {
            flowConfig: this.flowConfig,
            drawingList: this.drawingList,
            form: this.config,
          }
        },
      ]
    }
  },
  watch: {
    drawer() {
      this.$emit('setAPI')
    }
  },
  mounted() {
    // this.change(this.form.type)
  },
  methods: {
    submit() {
      this.$emit('setAPI', this.form)
    },
    //更新是根据options下标根据变化，变更配置时需确认出入参下标是否变化
    getList(data) {
      if (data.param == 'null') {
        data.param = '[]'
      }
      this.options[4].dataList = data.param
      this.options[5].isList = (this.form.type == 2)
      this.options[5].dataList = data.response
    },
    // change(value) {
    //   this.options[2].APItype = value
    // }
  }
}
</script>
