<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-08 09:34:38
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-23 17:07:18
 -->
<!--
<header-param :itemData="itemData" :frontOriginType="frontOriginType"></header-param>

import headerParam from '@/components/createApi/header-param.vue';
-->
<template>
  <div>
    <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_3 is-leaf">
                <div class="cell">
                  必选
                </div>
              </th>
              <th
                colspan="1"
                rowspan="1"
                class="el-table_1_column_4 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_6 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">
          <template v-for="(itemValue, itemName, index) in itemData.properties">
            <table
              v-if="!itemValue.constFlag"
              :key="index + itemName + 121"
              cellspacing="0"
              cellpadding="0"
              border="0"
              class="el-table__body"
              style="width: 100%; table-layout: fixed;">
              <tbody>
                <tr class="el-table__row">
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_1">
                    <div class="cell">
                      <el-input
                        v-model="itemValue.currentKey"
                        @blur="blurKey(itemValue, itemName)" />
                    </div>
                  </td>
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_2">
                    <div class="cell">
                      <el-select
                        v-model="itemValue.type"
                        placeholder="请选择参数类型">
                        <el-option
                          label="string"
                          value="string" />
                        <el-option
                          label="number"
                          value="number" />
                        <el-option
                          label="boolean"
                          value="boolean" />
                        <el-option
                          label="integer"
                          value="integer" />
                      </el-select>
                    </div>
                  </td>
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_3">
                    <div class="cell">
                      <el-checkbox
                        v-model="itemValue.check"
                        @change="changeCheck($event, itemValue)" />
                    </div>
                  </td>
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_3">
                    <div class="cell">
                      <el-input
                        v-model="itemValue.defaultVal"
                        :disabled="itemValue.check"
                        placeholder="默认值" />
                    </div>
                  </td>
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_3">
                    <div class="cell">
                      <el-input
                        v-model="itemValue.example"
                        placeholder="示例" />
                    </div>
                  </td>
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_3">
                    <div class="cell">
                      <el-input
                        v-model="itemValue.description"
                        placeholder="描述" />
                    </div>
                  </td>
                  <td
                    rowspan="1"
                    colspan="1"
                    class="el-table_1_column_3">
                    <div class="cell">
                      <el-button
                        type="text"
                        @click="handleDel(itemValue, itemName, index)">
                        删除
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
        </div>
      </div>
    </div>
    <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>
</template>
<script>
export default {
  name: 'HeaderParam',
  props: {
    itemData: {
      type: Object,
      default() {
        return {};
      }
    },
    frontOriginType: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      trData: {
        type: 'object',
        properties: {
          name: {
            frontOriginType: this.frontOriginType, // 来源类型 query,body,header
            type: 'string',
            currentKey: 'name',
            isBackendField: 0, // 是否后端字段
            defaultVal: '', // 默认值
            isRootKey: false, // 是否是后端参数字段
            isRootKeyFlag: false, // 是否是后端参数字段 check
            rootKey: '', // 后端参数字段
            objectClass: '', // 如果是object 并且是dubbo
            description: '描述',
            example: '示例',
            check: true
          }
        }
      },
      keyLength: 1
    };
  },
  mounted() {
    const that = this;
    that.trData = JSON.parse(JSON.stringify(that.itemData));
  },
  methods: {
    /**
     * @description: key 输入变化
     * @param {Object} obj
     * @param {String} oldKey
     * @author: 无尘
     */
    blurKey(obj, oldKey) {
      const that = this;
      if (obj.currentKey != oldKey) {
        that.$set(that.itemData.properties, obj.currentKey, obj);
        that.$delete(that.itemData.properties, oldKey);
      }
    },
    /**
     * @description: 必选了禁用默认值
     * @param {Boolean} e
     * @param {Object} item
     * @author: 无尘
     */
    changeCheck(e, item) {
      if (e) {
        item.defaultVal = '';
      }
    },
    /**
     * @description: 删除
     * @param {Object} obj
     * @param {String} itemKey
     * @param {Number} index
     * @author: 无尘
     */
    handleDel(obj, itemKey, index) {
      const that = this;
      that.$delete(that.itemData.properties, itemKey);
    },
    toAddItem() {
      const that = this;
      let length = that.keyLength++;
      that.$set(that.itemData.properties, 'field' + length, {
        frontOriginType: that.frontOriginType, // 来源类型 query,body,header
        backendOriginType: that.frontOriginType,
        type: 'string',
        currentKey: 'field' + length,
        isBackendField: 0, // 是否后端字段
        defaultVal: 'val', // 默认值
        isRootKey: false, // 是否是后端参数字段
        isRootKeyFlag: false, // 是否是后端参数字段 check
        rootKey: '', // 后端参数字段
        objectClass: '', // 如果是object 并且是dubbo
        description: '描述',
        example: '示例',
        check: true
      });
    }
  },
  watch: {
    itemData: function(newData, oldData) {
      const that = this;
      that.trData = JSON.parse(JSON.stringify(newData));
    }
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.add-line {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #e4e7ed;
  cursor: pointer;
}
</style>
