<template>
  <div class="fullheight">
    <el-dialog
      width="60%"
      title="认证接口"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      v-if="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <el-form :model="apiInfo" v-form data-vv-scope="bizAuthForm">
        <el-row :gutter="0" justify="start" align="top" type="flex">
          <el-col :span="12" style="">
            <ht-form-item label="请求地址" label-width="140px">
              <ht-input
                v-model="apiInfo.url"
                placeholder="请输入请求地址"
                autocomplete="off"
                validate="required"
                :width="320"
              >
              </ht-input>
            </ht-form-item>
          </el-col>
          <el-col :span="12" style="">
            <ht-form-item label="请求类型" label-width="140px">
              <ht-radio
                v-model="apiInfo.requestType"
                :options="[
                  {key: 'POST', value: 'POST'},
                  {key: 'GET', value: 'GET'}
                ]"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0" justify="start" align="top" type="flex">
          <el-col :span="12" style="">
            <ht-form-item label-width="140px" label="接口头部">
              <ht-input
                v-model="apiInfo.header"
                placeholder="请求接口的头部信息"
                autocomplete="off"
                :width="320"
              >
                <template slot="append">
                  <el-tooltip
                    slot="label"
                    effect="dark"
                    content='接口头部（header）为JSON格式，如：{"Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9"}'
                  >
                    <i class="icon-question"></i>
                  </el-tooltip>
                </template>
              </ht-input>
            </ht-form-item>
          </el-col>
          <el-col :span="12" style="">
            <ht-form-item label="请求体" label-width="140px">
              <ht-radio
                v-model="apiInfo.bodyType"
                :options="[
                  {key: 'json', value: 'json格式'},
                  {key: 'form-data', value: 'form-data格式'}
                ]"
              />
            </ht-form-item>
          </el-col>
        </el-row>

        <ht-form-item label="输入参数" label-width="140px">
          <table cellspacing="0" cellpadding="5" border="0">
            <tbody>
              <tr v-for="(input, index1) in parameInputs" :key="index1">
                <td>
                  <el-input
                    v-model="input.key"
                    placeholder="请输入字段"
                    style="margin-left:-5px;"
                  ></el-input>
                  <!-- :validate="{required: true}" -->
                </td>
                <td>
                  <ht-select
                    v-model="input.type"
                    :options="valueList"
                    placeholder="请选择值来源"
                    @change="inputTypeChange(input)"
                  />
                  <!--    :validate="{required: true}" -->
                </td>
                <td v-if="input.type == '2'">
                  <ht-input
                    v-model="input.value"
                    placeholder="请输入值"
                  ></ht-input>
                </td>
                <td v-if="input.type == '3'">
                  <el-button
                    @click="showScriptDialog(input)"
                    type="text"
                    class="typeBtn"
                    >选择脚本
                    <i class="el-icon-search"></i>
                  </el-button>
                  <ht-input
                    type="textarea"
                    v-model="input.value"
                    placeholder="请输入值"
                  ></ht-input>
                </td>
                <td>
                  <el-button
                    class="btn-padding"
                    style="margin-left:5px;"
                    icon="el-icon-plus"
                    @click="parameInputs.push({...inputObj})"
                  ></el-button>
                  <el-button
                    class="btn-padding"
                    style="margin-left:5px;"
                    icon="el-icon-delete"
                    @click="parameInputs.remove(input)"
                  ></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </ht-form-item>
        <ht-form-item label="返回字段" label-width="140px">
          <ht-input
            v-model="apiInfo.paramKey"
            :maxlength="300"
            :showWordLimit="true"
            validate="required"
            placeholder="返回用来认证的字段名称"
            :width="450"
          >
          </ht-input>
        </ht-form-item>
        <div>
          <el-tag type="warning">返回字段配置说明</el-tag>
          <ol class="guide-ol">
            <li>
              例如返回数据为：
              <code
                >{state: true, message: "请求成功", result: {token:
                "ABCZDFE12"}}</code
              ><br />
              则返回字段可设置为：
              <code>result.token</code>
            </li>
          </ol>
        </div>
      </el-form>
      <div slot="footer" style="text-align: right;">
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <el-button type="primary" @click="saveData">
          确定
        </el-button>
       
      </div>
      <!-- 脚本选择对话框 -->
      <eip-script-dialog
        :appendToBody="true"
        ref="eipScriptDialog"
        @onConfirm="handleScriptSelected"
      ></eip-script-dialog>
    </el-dialog>
  </div>
</template>
<script>
const EipScriptDialog = () => import('@/components/dialog/EipScriptDialog.vue')
export default {
  name: 'biz-auth-dialog',
  components: {
    EipScriptDialog
  },
  data() {
    return {
      dialogVisible: false,
      valueList: [
        {value: '固定值', key: '2'},
        {value: '脚本', key: '3'}
      ],
      apiInfo: {},
      cloneApiInfo: {},
      inputObj: {
        key: '',
        type: '',
        value: ''
      },
      parameInputs: [],
      editConditionRow: {}
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    inputTypeChange(row) {
      row.value = ''
    },
    handleScriptSelected(script, name) {
      this.editConditionRow.value = this.editConditionRow.value + script
      //强制刷新
      this.$forceUpdate()
    },
    showScriptDialog(row) {
      this.$refs.eipScriptDialog.showDialog()
      this.editConditionRow = row
    },
    showDialog(apiInfo) {
      this.cloneApiInfo = _.cloneDeep(apiInfo)
      this.apiInfo = _.cloneDeep(apiInfo)
      this.parameInputs = apiInfo.inputs
      if (!this.parameInputs || this.parameInputs.length <= 0) {
        this.parameInputs = []
        this.parameInputs.push({...this.inputObj})
      }
      this.dialogVisible = true
    },
    beforeCloseDialog() {
      this.apiInfo = this.cloneApiInfo
      this.dialogVisible = false
    },
    saveData() {
      this.$validator.validateAll('bizAuthForm').then(result => {
        if (result) {
          this.apiInfo.inputs = this.parameInputs
          this.$emit('onConfirm', this.apiInfo)
          this.dialogVisible = false
        } else {
          let arr = this.$validator.errors.items.filter(
            item => item.scope == 'bizAuthForm'
          )
          let errorLength = arr.length
          this.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
.typeBtn {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}

.btn-padding {
  padding: 5px;
}
.linkageTable-tr td {
  text-align: center;
}
</style>