
<!--
<create-event-field></create-event-field>

import createBase from '@/components/api/create-event-field.vue';
-->
<template>
  <div class="base-info-show border-box">
    <el-form
      ref="baseForm"
      label-width="104px"
      :model="apiInfoData"
      :rules="rules">
      <el-form-item
        label="协议:"
        prop="protocol">
        {{ apiInfoData.protocol }}
      </el-form-item>
      <el-form-item
        label="API版本号"
        prop="version">
        <limit-input
          :input-width="329"
          :input-value.sync="apiInfoData.version"
          :holder="'请输入API版本号'"
          :get-by-type="'word'"
          :max-length="20" />
      </el-form-item>
      <el-form-item
        label="参数配置"
        class="color-303133 font-w-700" />
      <el-form-item label="">
        <div class="body-param-wrap">
          <div
            class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
            style="width: 100%; table-layout: fixed;">
            <div class="el-table__header-wrapper">
              <table
                cellspacing="0"
                cellpadding="0"
                border="0"
                class="el-table__header"
                style="width: 100%; table-layout: fixed;">
                <thead class="has-gutter">
                  <tr class="">
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_1 is-leaf">
                      <div class="cell">
                        参数名
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_2 is-leaf">
                      <div class="cell">
                        参数类型
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_5 is-leaf">
                      <div class="cell">
                        示例值
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_5 is-leaf">
                      <div class="cell">
                        描述
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_7 is-leaf">
                      <div class="cell">
                        操作
                      </div>
                    </th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
              <div class="table-content">
                <result-table
                  ref="resultBodyTable"
                  :is-not-root="true"
                  :item-data="resultParams"
                  @refreshData="refreshData" />
                <div
                  class="add-line text-center"
                  @click="toAddItem">
                  <i class="el-icon-circle-plus-outline color-5584FF" /><span class="color-5584FF font-14 p-l-4">添加行</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitback">
          上一步
        </el-button>
        <el-button
          type="primary"
          @click="submitForm('baseForm')">
          下一步
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import showMsg from '@/assets/js/showmsg';
import { postRequest } from '@/api/api';
// import { isRepeat } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
import resultTable from '@/components/createApi/result-table.vue';
export default {
  name: 'CreateEventField',
  components: {
    limitInput,
    resultTable
  },

  data() {
    return {
      importType: '',
      showDialog: false,
      apiInfoData: {
        version: '',
        resultParams: {},
        protocol: 'http'
      },
      rules: {
        version: [ { required: true, message: '请输入API版本号', trigger: 'blur' } ]
      },
      keyLength: 1,
      resultParams: {
        type: 'object',
        level: 1,
        properties: {
        }
      },
    };
  },
  mounted() {
    const that = this;
    if (Object.keys(that.$store.state.fieldEventInfo).length) {
      that.handleStoreData();
    }
  },
  methods: {
    /**
     * @description: 添加行
     * @author: 唐尼
     */
    toAddItem() {
      const that = this;
      let length = Object.keys(that.resultParams.properties || {}).length + 1;
      // console.log(that.resultParams);
      // console.log(Object.keys(that.resultParams.properties).length);
      // console.log(keyLength);
      // let length = keyLength++;

      that.$set(that.resultParams.properties, 'field' + length, {
        level: 2,
        parentKey: '', // 新增父级的 key
        type: 'string',
        currentKey: 'field' + length,
        defaultVal: '', // 默认值
        description: '描述',
        example: '示例',
        properties: {}
      });
    },
    /**
     * @description: 创建 API
     * @author: 唐尼
     */
    toPostApi() {
      const that = this;
      let apiInfoData = that.apiInfoData;
      let para = {
        interfaceGroupId: that.$route.query.interfaceGroupId,
        projectId: that.$route.query.projectId, // 项目id
        // 基础信息
        interfaceName: that.$store.state.baseEventInfo.interfaceName, // 接口名称
        code: that.$store.state.baseEventInfo.code, // 配置code
        interfaceDescribe: that.$store.state.baseEventInfo.interfaceDescribe, // 接口描述
        // 字段配置
        protocol: apiInfoData.protocol, // 协议http
        version: apiInfoData.version, // api版本号
        resultParams: JSON.stringify(that.resultParams), // 配置结果
        // 编辑
        interfaceId: that.$store.state.baseEventInfo.interfaceId, // api id
        interfaceVersionId: that.$store.state.baseEventInfo.interfaceVersionId // api 版本 id
      };
      postRequest(that.$store.state.baseEventInfo.interfaceId ? '/gateway-manage/update-api' : '/gateway-manage/create-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('保存成功', 'success');
            that.$store.dispatch('clearApiData');
            that.$router.push(`/apiListManage?interfaceId=${resData.result.interfaceId}&interfaceName=${resData.result.interfaceName}&projectId=${that.$route.query.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${that.$route.query.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}&apiType=${2}`);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    refreshData(data) {
      const that = this;
      that.frontData = data;
    },
    /**
     * @description: 上一步
     * @author: 无尘
     */
    submitback() {
      const that = this;
      that.$emit('submitBack');
    },
    /**
     * @description: 下一步
     * @param {String} formName
     * @author: 无尘
     */
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.handleData();
        } else {
          return false;
        }
      });
    },
    /**
     * @description: 下一步之前处理数据
     * @author: 唐尼
     */
    async handleData() {
      const that = this;
      that.apiInfoData.resultParams = that.resultParams;
      await that.toPostApi();
    },
    /**
     * @description: 处理状态中的前端数据
     * @author: 无尘
     */
    async handleStoreData() {
      const that = this;
      that.apiInfoData = JSON.parse(JSON.stringify(that.$store.state.fieldEventInfo));
      that.resultParams = that.apiInfoData.resultParams;
    }
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.w-329 {
  width: 329px;
}
.base-info-show {
  width: 100%;
  margin-top: 56px;
  .el-form {
    /deep/ .el-form-item__label {
      color: #606266;
    }
    .font-w-700 {
      /deep/ .el-form-item__label {
        color: #303133;
        font-weight: 600;
      }
    }
    /deep/ .el-form-item__content {
      color: #303133;
    }
  }
  .el-table th {
    padding: 7px 0;
  }
}
</style>
