<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-12 15:11:33
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-24 09:24:28
 -->
<!--
<header-param :itemData="itemData"></header-param>

import headerParam from '@/components/createApi/header-param.vue';
-->
<template>
  <div>
    <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"
                  :disabled="itemValue.level == 2"
                  @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="请选择参数类型"
                  @change="changeType(itemValue.type, itemValue, itemValue.currentKey, itemValue.level)">
                  <el-option
                    label="string"
                    value="string" />
                  <el-option
                    label="number"
                    value="number" />
                  <el-option
                    label="boolean"
                    value="boolean" />
                  <el-option
                    label="object"
                    value="object" />
                  <el-option
                    label="array"
                    value="array" />
                  <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
                  v-if="itemValue.type == 'array' || itemValue.type == 'object'"
                  type="text"
                  @click="handleAdd(itemValue, itemValue.currentKey, index, itemValue.level)">
                  添加子属性
                </el-button>
                <el-button
                  v-if="itemValue.level != 2"
                  type="text"
                  @click="handleDel(itemValue.parentKey, itemValue.currentKey, index, itemValue.level)">
                  删除
                </el-button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <body-row
        v-if="itemValue.type == 'array' && Object.keys(itemValue.items.properties).length"
        :key="index + '1122' + itemName"
        class="el-table__row"
        style="padding-left: 10px;"
        :front-origin-type="frontOriginType"
        :item-data="itemValue.items" />
      <body-row
        v-if="itemValue.type == 'object' && Object.keys(itemValue.properties).length"
        :key="index + '122' + itemName"
        class="el-table__row"
        style="padding-left: 10px;"
        :front-origin-type="frontOriginType"
        :item-data="itemValue" />
    </template>
  </div>
</template>
<script>
export default {
  name: 'BodyRow',
  props: {
    itemData: {
      type: Object,
      default() {
        return {};
      }
    },
    frontOriginType: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      trData: {},
      keyLength: 1 // 记录生成 obj key的标志
    };
  },
  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 {String} parentKey
     * @param {String} itemKey
     * @param {Number} index
     * @param {Number} level
     * @author: 无尘
     */
    handleDel(parentKey, itemKey, index, level) {
      const that = this;
      that.handleDelData(that.itemData, parentKey, itemKey);
    },
    handleDelData(itemData, pkey, itemKey) {
      const that = this;
      that.handleObjData(itemData, pkey, itemKey);
    },
    handleObjData(itemData, pkey, itemKey) {
      const that = this;
      for (let i in itemData) {
        if (itemData[i] == pkey) {
          that.$delete(itemData.properties, itemKey);
        }
      }
      that.$forceUpdate();
    },
    /**
     * @description: 修改 type
     * @param {String} type
     * @param {Object} obj
     * @param {String} itemKey
     * @param {Number} level
     * @author: 无尘
     */
    changeType(type, obj, itemKey, level) {
      const that = this;
      if (type == 'string' || type == 'boolean' || type == 'number' || type == 'object') {
        obj.properties = {};
        if (obj.hasOwnProperty('items')) {
          that.$delete(obj, 'items');
        }
      }
      if (type == 'array') {
        that.$set(obj, 'items', {
          parentKey: itemKey, // 新增父级的 key
          currentKey: 'items',
          level: parseInt(level) + 1, //  层级
          frontOriginType: that.frontOriginType, // 来源类型 query,body,header
          backendOriginType: that.frontOriginType,
          type: 'object',
          isBackendField: 0, // 是否后端字段
          defaultVal: '', // 默认值
          isRootKey: false, // 是否是后端参数字段
          isRootKeyFlag: false, // 是否是后端参数字段 check
          rootKey: '', // 后端参数字段
          objectClass: '', // 如果是object 并且是dubbo
          description: '描述',
          example: '示例',
          check: true,
          properties: {},
          required: []
        });
      }
      that.$forceUpdate();
    },
    /**
     * @description: 添加子属性
     * @param {Object} obj
     * @param {String} itemKey
     * @param {Number} index
     * @param {Number} level
     * @returns {Boolean}
     * @author: 无尘
     */
    handleAdd(obj, itemKey, index, level) {
      const that = this;
      let length = that.keyLength++;
      if (obj.type == 'array') {
        that.$set(obj.items.properties, 'field' + length, {
          parentKey: itemKey, // 新增父级的 key
          level: parseInt(level) + 1, //  层级
          frontOriginType: that.frontOriginType, // 来源类型 query,body,header
          backendOriginType: that.frontOriginType,
          type: 'string',
          currentKey: 'field' + length, // 当前的 key
          isBackendField: 0, // 是否后端字段
          defaultVal: '', // 默认值
          isRootKey: false, // 是否是后端参数字段
          isRootKeyFlag: false, // 是否是后端参数字段 check
          rootKey: '', // 后端参数字段
          objectClass: '', // 如果是object 并且是dubbo
          description: '描述',
          example: '示例',
          check: true,
          properties: {}
        });
        that.$forceUpdate();
        return false;
      }
      // 这里是对对象的添加操作
      that.$set(obj.properties, 'field' + length, {
        parentKey: itemKey, // 新增父级的 key
        level: parseInt(level) + 1, //  层级
        frontOriginType: that.frontOriginType, // 来源类型 query,body,header
        backendOriginType: that.frontOriginType,
        type: 'string',
        currentKey: 'field' + length, // 当前的 key
        isBackendField: 0, // 是否后端字段
        defaultVal: '', // 默认值
        isRootKey: false, // 是否是后端参数字段
        isRootKeyFlag: false, // 是否是后端参数字段 check
        rootKey: '', // 后端参数字段
        objectClass: '', // 如果是object 并且是dubbo
        description: '描述',
        example: '示例',
        check: true,
        properties: {}
      });
      that.$forceUpdate();
    }
  },
  watch: {
    itemData: function(newData, oldData) {
      const that = this;
      if (newData) {
        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>
