<template>
  <ed-drawer ref="BasicDialog" :fullscreen="false" :showOkBtn="true" :visible="visible" size="60%"
          title="接口依赖配置"
          @close="closeDialog"
          @ok="handleSubmit">
    <el-form ref="tableInfoForm" :inline="false" :model="form"
             class="demo-form-inline" label-position="left">
      <el-form-item label="选择接口" label-width="100px">
        <el-input v-model="form.depend_interface_name" class="input-with-select" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search"
                     @click="showChoose"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="调用依赖" label-width="100px">
        <el-table :data="form.callRecord"
                  border>
          <el-table-column label="字段名称" prop="fieldName" width="150">
          </el-table-column>
          <el-table-column label="输入输出" prop="paramType" width="150">
          </el-table-column>
          <el-table-column label="备注" prop="remark" width="150">
          </el-table-column>
          <el-table-column label="比较符" prop="operator" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="`callRecord[${scope.$index}].operator`"
                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
                <el-select v-model="scope.row.operator">
                  <el-option v-for="item in operatorOptions" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="值" prop="operatorValue" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="`callRecord[${scope.$index}].operatorValue`"
                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
                <el-input v-model="scope.row.operatorValue"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!--          <el-table-column label="数据类型" prop="dataType" width="150">-->
          <!--          </el-table-column>-->
          <el-table-column label="操作" prop="body" width="150">
            <template slot-scope="scope">
              <el-button slot="reference" style="color: red" type="text" @click="deleteCallRow(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="参数传递" label-width="100px">
        <el-table :data="form.transferRecord"
                  border>
          <el-table-column label="字段名称" prop="fieldName" width="150">
          </el-table-column>
          <el-table-column label="输入输出" prop="paramType" width="150">
          </el-table-column>
          <el-table-column label="备注" prop="remark" width="150">
          </el-table-column>
          <el-table-column label="传递参数" prop="transferParam" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="`transferRecord[${scope.$index}].transferParam`"
                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
                <el-select v-model="scope.row.transferParam">
                  <el-option v-for="item in transferParamOptions" :key="item.value" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="表达式" prop="expression" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="`transferRecord[${scope.$index}].expression`"
                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
                <el-input v-model="scope.row.expression"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!--          <el-table-column label="数据类型" prop="dataType" width="150">-->
          <!--          </el-table-column>-->
          <el-table-column label="操作" prop="body" width="150">
            <template slot-scope="scope">
              <el-button slot="reference" style="color: red" type="text" @click="deleteTransRow(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 弹窗组件 -->
    <ed-dialog :visible="visibleChoose" title="选择弹窗" @close="visibleChoose=false" @ok="chooseValue">
      <InterfaceChoose v-if="visibleChoose" ref="InterfaceChoose"></InterfaceChoose>
    </ed-dialog>
  </ed-drawer>
</template>

<script>

import InterfaceChoose from "../../../../popup/src/InterfaceChoose.vue";
import {selectDataList} from "../../../../api/easyData";
import {pick} from 'lodash'
import {saveDepend, updateDepend} from "../../../../api/interface";

export default {
  name: "InterfaceDepend",
  components: {InterfaceChoose},
  data() {
    return {
      row: {},
      visible: false,
      form: {},
      visibleChoose: false,
      transferParamOptions: [],
      dataId: "",
      operatorOptions: [ // 下拉选项
        {
          title: '=',
          value: '=='
        }, {
          title: '>',
          value: '>'
        }, {
          title: '<',
          value: '<'
        }, {
          title: '<=',
          value: '<='
        }, {
          title: '>=',
          value: '>='
        }, {
          title: '!=',
          value: '!='
        }, {
          title: 'is null',
          value: '==null'
        }, {
          title: 'is not null',
          value: '!=null'
        }
      ],
    };
  },
  methods: {
    initParams() {
      this.getInterfaceParams(this.row.id).then(res => {
        res.forEach(r => {
          if (r.paramType == 'in') {
            this.transferParamOptions.push({
              label: r.remark + '|' + r.fieldName,
              value: r.fieldName,
            })
          }
        })
      })
      //加载接口依赖
      this.getInterfaceDepend()
    },
    getInterfaceDepend() {
      this.loading = true
      //显示表信息
      let params = {
        dataSourceName: 'interface_depend',
        whereList: [
          {
            fieldName: 'interface_id',
            fieldValue: this.row.id,
            operator: '='
          }
        ]
      }
      selectDataList(params).then(res => {
        if (res.success) {
          if (res.data && res.data.length > 0) {
            let fieldsVal = pick(JSON.parse(res.data[0].key_info), 'depend_interface_name', 'depend_interface_id');
            this.$nextTick(() => {
              this.form = {...this.form, ...fieldsVal}
            });
            this.form.callRecord = JSON.parse(res.data[0].data_info).callRecord
            this.form.transferRecord = JSON.parse(res.data[0].data_info).transferRecord
            this.dataId = res.data[0].id
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    getInterfaceParams(interfaceId) {
      let param = {
        dataSourceName: 'interface_params',
        whereList: [{
          fieldName: 'interface_id',
          fieldValue: interfaceId,
          operator: '='
        }]
      }
      let that = this
      return new Promise((resolve, reject) => {
        selectDataList(param).then((res) => {
          if (res.success) {
            if (res.data.length > 0) {
              let params = JSON.parse(res.data[0].data_info)
              resolve(params)
            }
          } else {
            that.$message.warning(res.msg);
          }
        })
      })
    },
    chooseValue() {
      const chooseInfo = this.$refs.InterfaceChoose.getData()
      let fieldsVal = {
        'depend_interface_name': chooseInfo.label,
        'depend_interface_id': chooseInfo.value
      };
      this.form = {...this.form, ...fieldsVal}
      this.$nextTick(() => {
        this.form = {...this.form, ...fieldsVal}
        this.getInterfaceParams(fieldsVal.depend_interface_id).then(res => {
          this.$set(this.form, 'callRecord', Object.assign([], res))
          this.$set(this.form, 'transferRecord', Object.assign([], res))
        })
      });
      this.visibleChoose = false
    },
    handleSubmit() {
      this.$refs['tableInfoForm'].validate((valid) => {
        if (valid) {
          //调用依赖
          let callRecord = this.form.callRecord
          let transferRecord = this.form.transferRecord
          //验证成功后保存数据
          let formData = {
            dataSourceName: 'interface_depend',
            id: this.dataId,
            keyInfo: JSON.stringify({
              interface_id: this.row.id,
              depend_interface_name: this.form.depend_interface_name,
              depend_interface_id: this.form.depend_interface_id
            }),
            dataInfo: JSON.stringify({callRecord: callRecord, transferRecord: transferRecord}),
          }
          if (this.dataId) {
            updateDepend(formData).then((res) => {
              if (res.success) {
                if (!this.dataId) {
                  this.dataId = res.data
                }
                this.$message.success(res.msg || "操作成功!");
                this.visible = false;
              } else {
                this.$message.warning(res.msg);
              }
              this.loading = false
            }).finally(() => {
            })
          } else {
            saveDepend(formData).then((res) => {
              if (res.success) {
                if (!this.dataId) {
                  this.dataId = res.data
                }
                this.$message.success(res.msg || "操作成功!");
                this.visible = false;
              } else {
                this.$message.warning(res.msg);
              }
            }).finally(() => {
            })
          }

        }
      })

    },
    showChoose() {
      this.visibleChoose = true

    },
    show(row) {
      this.row = row
      this.visible = true;
      this.initParams()
    },
    closeDialog() {
      this.visible = false;
    },
    deleteCallRow(data) {
      this.form.callRecord.splice(data.$index, 1)
    },
    deleteTransRow(data) {
      this.form.transferRecord.splice(data.$index, 1)
    }
  }
}
</script>

<style scoped>
</style>
