<template>
  <ed-dialog ref="BasicDialog" :fullscreen="true" :showOkBtn="false" :title="title"
          :visible="visibleMainDialog"
          @close="closeMainDialog">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>参数</span>
        <el-button-group style="float: right;">
          <el-button :loading="loading" icon="el-icon-document-add" size="small" type="primary"
                     @click="saveFieldInfo">保存
          </el-button>
          <el-button :loading="loading" icon="el-icon-refresh-right" size="small"
                     @click="refresh">刷新
          </el-button>
          <el-button :loading="loading" icon="el-icon-plus" size="small"
                     @click="addParamObj">添加
          </el-button>
          <el-button :loading="loading" icon="el-icon-plus" size="small"
                     @click="showAddParamFast">快速添加
          </el-button>
        </el-button-group>
      </div>
      <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
               class="demo-form-inline">
        <el-table
          :data="tableInfoForm.params"
          border>
          <el-table-column
            label="字段名称"
            prop="fieldName"
          >
            <template slot-scope="scope">
              <el-form-item :prop="`params[${scope.$index}].fieldName`"
                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
                <el-input v-model="scope.row.fieldName"
                          placeholder="字段名称"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="映射名称"
            prop="mappingFieldName"
          >
            <template slot-scope="scope">
              <el-form-item :prop="`params[${scope.$index}].mappingFieldName`"
                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
                <el-input v-model="scope.row.mappingFieldName"
                          placeholder="字段映射"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="字段类型"
            prop="dataType"
          >
            <template slot-scope="scope">
              <el-form-item>
                <el-select v-model="scope.row.dataType">
                  <el-option label="VARCHAR" value="VARCHAR"></el-option>
                  <el-option label="INTEGER" value="INTEGER"></el-option>
                  <el-option label="LONGTEXT" value="LONGTEXT"></el-option>
                  <el-option label="DATETIME" value="DATETIME"></el-option>
                  <el-option label="ARRAY" value="ARRAY"></el-option>
                  <el-option label="OBJECT" value="OBJECT"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="输入输出"
            prop="paramType"
          >
            <template slot-scope="scope">
              <el-form-item>
                <el-select v-model="scope.row.paramType">
                  <el-option label="输入参数" value="in"></el-option>
                  <el-option label="输出参数" value="out"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="默认值"
            prop="defaultValue"
          >
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.defaultValue"
                          placeholder="默认值"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            prop="remark"
            width="150">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.remark"
                          placeholder="备注"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="主键字段"
            prop="primaryKey"
            width="150">
            <template slot-scope="scope">
              <el-form-item>
                <el-switch
                  v-model="scope.row.primaryKey">
                </el-switch>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="是否模糊匹配"
            prop="isFuzzyMatch"
          >
            <template slot-scope="scope">
              <el-form-item>
                <el-switch
                  v-model="scope.row.isFuzzyMatch">
                </el-switch>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button slot="reference" style="color: red" type="text" @click="deleteRow(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
    <ed-dialog ref="BasicDialog" :showOkBtn="true" :visible="visible"
            title="快速添加"
            @close="closeDialog"
            @ok="addParamObjFast">
      <ed-code-editor
        :value="fastText"
        language="javascript"
        placeholder="例:fieldName1|mappingFieldName1,fieldName2|mappingFieldName2,fieldName3|mappingFieldName3  以逗号分隔"
        @input="changeText"
      ></ed-code-editor>
    </ed-dialog>
  </ed-dialog>
</template>

<script>
import {listFieldInfo, saveParams} from "../../../../api/interface";

export default {
  name: "InterfaceParam",
  data() {
    return {
      loading: false,
      visibleMainDialog: false,
      visible: false,
      title: '',
      row: {},
      tableInfoForm: {
        params: []
      },
      fastText: '',
      dataId: ''
    }
  },
  methods: {
    show(row, title) {
      this.row = row
      this.title = title
      this.visibleMainDialog = true
      this.showFieldInfo()
    },
    refresh() {
      this.dataId = ''
      this.fastText = ''
      this.showFieldInfo()
    },
    saveFieldInfo() {
      this.$refs['tableInfoForm'].validate((valid) => {
        if (valid) {
          let formData = {
            dataSourceName: 'interface_params',
            id: this.dataId,
            key: {
              interface_id: this.row.id
            },
            data: this.tableInfoForm.params,
          }
          // 发起请求
          return this.requestAddOrEditFieldInfo(formData)
        }
      })
    },
    requestAddOrEditFieldInfo(formData) {
      this.loading = true
      let dataSourceId = this.row.id
      formData.dataSourceId = dataSourceId
      saveParams(formData).then((res) => {
        if (res.success) {
          // if (!this.dataId)
          // this.dataId = res.data
          this.$message.success(res.msg||'操作成功!');
        } else {
          this.$message.warning(res.msg||'操作失败!');
        }
      }).finally(() => {
        this.loading = false
      })
    },
    addParamObj() {
      const paramObj = {
        fieldName: '',
        mappingFieldName: '',
        dataType: 'VARCHAR',
        paramType: 'in',
        defaultValue: '',
        remark: '',
        primaryKey: false,
        isFuzzyMatch: false
      }
      this.tableInfoForm.params.push(paramObj)
    },
    addParamObjFast() {
      return new Promise((resolve, reject) => {
        if (this.fastText) {
          //解析dataQuick
          let dataQ = this.fastText.split(',')
          dataQ.forEach((d) => {
            let fieldNames = d.split('|')
            this.tableInfoForm.params.push({
              fieldName: fieldNames[0],
              mappingFieldName: fieldNames[1],
              dataType: 'varchar',
              isFuzzyMatch: true
            })
          })
          this.visible = false
          resolve()
        } else {
          this.$message.warning('输入框为空')
        }
      }).catch((e) => {
        this.$message.warning(e)
      });
    },
    showFieldInfo() {
      //显示表信息
      let params = {
        dataSourceName: 'interface_params',
        wheres: [
          {
            fieldName: 'interface_id',
            fieldValue: this.row.id,
            operator: '='
          }
        ]
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
      });
      listFieldInfo(params).then(res => {
        if (res.success) {
          if (res.data) {
            this.tableInfoForm.params = res.data.dataInfoArray
            this.dataId = res.data.id
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        loading.close()
      })
    },
    changeText(val) {
      this.fastText = val
    },
    showAddParamFast() {
      this.visible = true
    },
    deleteRow(data) {
      if (data.row.id) {
        this.deleteIds.push(data.row.id)
      }
      this.tableInfoForm.params.splice(data.$index, 1)
    },
    closeDialog() {
      this.visible = false;
    },
    closeMainDialog() {
      this.visibleMainDialog = false;
    }

  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0px
}

</style>
