<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-14 16:51:07
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-24 09:30:01
 -->
<!--
<back-table-right :itemData="itemData" :interfaceType="interfaceType"></back-table-right>

import backTableRight from '@/components/createApi/back-table-right.vue';
-->
<template>
  <div>
    <div v-if="itemData.type != 'array'">
      <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"
                style="width: 36px;">
                <div
                  v-if="itemValue.type == 'object' || itemValue.type == 'array'"
                  class="cell">
                  <i class="el-icon-minus" />
                </div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_1_column_1">
                <div class="cell">
                  <el-checkbox
                    v-model="itemValue.isRootKey"
                    :disabled="itemValue.isRootKeyFlag"
                    @change="changeCheck(itemValue, itemName)" />
                </div>
              </td>
              <td
                v-if="interfaceType == '0'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_1">
                <div class="cell">
                  <el-input
                    v-model="itemValue.rootKey"
                    class="w-110"
                    placeholder="请输入参数名"
                    @blur="blurKey(itemValue, itemName)" />
                </div>
              </td>
              <td
                v-if="interfaceType == '0'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_2">
                <div class="cell">
                  <el-select
                    v-model="itemValue.backendOriginType"
                    placeholder="请选择参数位置">
                    <el-option
                      label="header"
                      value="header" />
                    <el-option
                      label="query"
                      value="query" />
                    <el-option
                      label="body"
                      value="body" />
                    <el-option
                      label="form"
                      value="form" />
                  </el-select>
                </div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_1_column_3">
                <div class="cell">
                  {{ itemValue.type }}
                </div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_1_column_4">
                <div class="cell">
                  <el-input
                    v-model="itemValue.defaultVal"
                    class="w-110"
                    placeholder="请输入参数值" />
                </div>
              </td>
              <td
                v-if="interfaceType == '1'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_4">
                <div class="cell">
                  <el-input
                    v-model="itemValue.objectClass"
                    class="w-110"
                    placeholder="请输入包路径" />
                </div>
              </td>
              <td
                v-if="interfaceType == '1'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_4">
                <div class="cell">
                  <el-input
                    v-model="itemValue.sort"
                    class="w-110"
                    :disabled="!itemValue.isRootKey"
                    placeholder="请输入排序" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <back-table-row
          v-if="itemValue.type == 'array'"
          :key="index + '122' + itemName"
          class="el-table__row child-row"
          :interface-type="interfaceType"
          :item-data="itemValue"
          @changeData="changeData" />
        <back-table-row
          v-if="itemValue.type == 'object'"
          :key="index + '122' + itemName"
          class="el-table__row child-row"
          :interface-type="interfaceType"
          :item-data="itemValue"
          @changeData="changeData" />
      </template>
    </div>
    <div v-if="itemData.type == 'array'">
      <template v-for="(itemValue, itemName, index) in itemData.items.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"
                style="width: 36px;">
                <div
                  v-if="itemValue.type == 'object' || itemValue.type == 'array'"
                  class="cell">
                  <i class="el-icon-minus" />
                </div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_1_column_1">
                <div class="cell">
                  <el-checkbox
                    v-model="itemValue.isRootKey"
                    :disabled="itemValue.isRootKeyFlag"
                    @change="changeCheck(itemValue, itemName)" />
                </div>
              </td>
              <td
                v-if="interfaceType == '0'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_1">
                <div class="cell">
                  <el-input
                    v-model="itemValue.rootKey"
                    class="w-110"
                    placeholder="请输入参数名"
                    @blur="blurKey(itemValue, itemName)" />
                </div>
              </td>
              <td
                v-if="interfaceType == '0'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_2">
                <div class="cell">
                  <el-select
                    v-model="itemValue.backendOriginType"
                    placeholder="请选择参数位置">
                    <el-option
                      label="header"
                      value="header" />
                    <el-option
                      label="query"
                      value="query" />
                    <el-option
                      label="body"
                      value="body" />
                    <el-option
                      label="form"
                      value="form" />
                  </el-select>
                </div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_1_column_3">
                <div class="cell">
                  {{ itemValue.type }}
                </div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_1_column_4">
                <div class="cell">
                  <el-input
                    v-model="itemValue.defaultVal"
                    class="w-110"
                    placeholder="请输入参数值" />
                </div>
              </td>
              <td
                v-if="interfaceType == '1'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_4">
                <div class="cell">
                  <el-input
                    v-model="itemValue.objectClass"
                    class="w-110"
                    placeholder="请输入包路径" />
                </div>
              </td>
              <td
                v-if="interfaceType == '1'"
                rowspan="1"
                colspan="1"
                class="el-table_1_column_4">
                <div class="cell">
                  <el-input
                    v-model="itemValue.sort"
                    class="w-110"
                    :disabled="!itemValue.isRootKey"
                    placeholder="请输入排序" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <back-table-row
          v-if="itemValue.type == 'array'"
          :key="index + '122' + itemName"
          class="el-table__row child-row"
          :interface-type="interfaceType"
          :item-data="itemValue"
          @changeData="changeData" />
        <back-table-row
          v-if="itemValue.type == 'object'"
          :key="index + '122' + itemName"
          class="el-table__row child-row"
          :interface-type="interfaceType"
          :item-data="itemValue"
          @changeData="changeData" />
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BackTableRow',
  props: {
    itemData: {
      type: [ Object, Array ],
      default() {
        return {};
      }
    },
    interfaceType: {
      type: String,
      default() {
        return '0';
      }
    }
  },
  data() {
    return {
      trData: {},
      tempArr: [],
      newItemData: {},
      allDataList: []
    };
  },
  mounted() {
    const that = this;
    that.trData = JSON.parse(JSON.stringify(that.itemData));
    // that.handleToArr();
    // console.log("right watch2", that.itemData)
    // if (that.itemData.level == 1 && that.itemData.properties.hasOwnProperty('bodyRoot')) {
    //   that.handledisFlag(that.itemData)
    // }
    that.handledisFlag(that.itemData);
  },
  beforeDestroy() {
    this.tempArr = [];
  },
  methods: {
    /**
     * @description: 不选择的时候判断父级是否禁用
     * @param  {Object} obj
     * @return {Boolean}
     * @author: 无尘
     */
    async handleParentDisable(obj) {
      const that = this;
      let tag = true;
      for (let k in obj) {
        // console.log('obj[k].isRootKey:', obj[k], obj[k].isRootKey);
        if (obj[k].isRootKey) {
          tag = false;
          break;
        }
        if (obj[k].type == 'object' && Object.keys(obj[k].properties).length) {
          tag = await that.handleParentDisable(obj[k].properties);
          // console.log('object-------', tag);
          // break;
        }
        if (tag == false) {
          break;
        }
        if (obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          tag = await that.handleParentDisable(obj[k].items.properties);
        }
        if (tag == false) {
          break;
        }
      }
      // console.log('子组件 return tag:', tag);
      return tag;
    },
    /**
     * @description: 触发父组件
     * @param {Object} data
     * @param {String} isRootKey
     * @author: 无尘
     */
    async changeData(data, isRootKey) {
      const that = this;
      // console.log('子组件 that.itemData:', that.itemData, isRootKey);
      // 如果是对象，查看子级有没有选中的字段
      let trueFlag = true;
      if (!isRootKey && that.itemData.type == 'object' && Object.keys(that.itemData.properties).length) {
        trueFlag = await that.handleParentDisable(that.itemData.properties);
      }
      if (!isRootKey && that.itemData.type == 'array' && Object.keys(that.itemData.items.properties).length) {
        trueFlag = await that.handleParentDisable(that.itemData.items.properties);
      }
      // console.log('子组件:trueFlag:', trueFlag);
      if (trueFlag == false) {
        // console.log(that.itemData);
        that.itemData.isRootKeyFlag = true;
      } else {
        that.itemData.isRootKeyFlag = isRootKey ? true : false;
      }

      that.$emit('changeData', data, isRootKey);
    },
    /**
     * @description: key 输入变化
     * @param {Object} obj
     * @param {String} oldKey
     * @author: 无尘
     */
    blurKey(obj, oldKey) {
      /* const that = this;
      if (obj.rootKey != oldKey) {
        that.$set(that.itemData.properties, obj.rootKey, obj);
        that.$delete(that.itemData.properties, oldKey);
      } */
    },
    async handleDisable(obj, flag, parentKey, arrItem) {
      const that = this;
      for (let k in obj) {
        if (obj[k].currentKey == parentKey) {
          obj[k].isRootKeyFlag = flag ? true : false;
        }
        if (obj[k].currentKey == parentKey && parentKey == 'items') {
          arrItem.isRootKeyFlag = flag ? true : false;
        }
        if (obj[k].type == 'object' && Object.keys(obj[k].properties).length) {
          await that.handleDisable(obj[k].properties, flag, parentKey);
        }
        if (obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          await that.handleDisable(obj[k].items.properties, flag, parentKey, obj[k]);
        }
      }
    },
    findKey(objKey, isRootKey, obj) {
      const that = this;
      // console.log('findKey:', that.itemData, isRootKey);
      that.changeData(that.itemData, isRootKey);
    },
    /**
     * @description: 改变checkbox
     * @param {Object} obj
     * @param {String} key
     * @author: 无尘
     */
    async changeCheck(obj, key) {
      const that = this;
      // console.log('改变checkbox:', obj, key);
      await that.findKey(obj.currentKey, obj.isRootKey, obj);
      // 查找父级禁用和不禁用
      /* eslint-disable */
      // console.log('obj.type:',obj.type)
      // 设置子级禁用和不禁用
      if (obj.type == 'object' && Object.keys(obj.properties).length) {
        obj.isRootKeyFlag = false;
        for (let k in obj.properties) {
          obj.properties[k].isRootKeyFlag = obj.isRootKey ? true : false;
          obj.properties[k].isRootKey = false;
          if (obj.properties[k].type == 'object' && Object.keys(obj.properties[k].properties).length) {
            obj.isRootKey ? await that.checkArrObjData(obj.properties[k].properties) : await that.checkArrObjFalse(obj.properties[k].properties);
          }
          if (obj.properties[k].type == 'array' && Object.keys(obj.properties[k].items.properties).length) {
            obj.isRootKey ? await that.checkArrObjData(obj.properties[k].items.properties) : await that.checkArrObjFalse(obj.properties[k].items.properties);
          }
        }
      }
      if (obj.type == 'array' && Object.keys(obj.items.properties).length) {
        obj.isRootKeyFlag = false;
        for (let key in obj.items.properties) {
          obj.items.properties[key].isRootKeyFlag = obj.isRootKey ? true : false;
          obj.items.properties[key].isRootKey = false;
          if (obj.items.properties[key].type == 'object' && Object.keys(obj.items.properties[key].properties).length) {
            obj.isRootKey ? await that.checkArrObjData(obj.items.properties[key].properties) : await that.checkArrObjFalse(obj.items.properties[key].properties);
          }
          if (obj.items.properties[key].type == 'array' && Object.keys(obj.items.properties[key].properties).length) {
            obj.isRootKey ? await that.checkArrObjData(obj.items.properties[key].items.properties) : await that.checkArrObjFalse(obj.items.properties[key].items.properties);
          }
        }
      }
      that.$forceUpdate();
    },
    async checkArrObjData(item) {
      const that = this;
      for (let k in item) {
        item[k].isRootKeyFlag = true; // 都禁用
        item[k].isRootKey = false; // 都不选中
        if (item[k].type == 'object' && Object.keys(item[k].properties).length) {
          // item[k].isRootKeyFlag = true;
          await that.checkArrObjData(item[k].properties);
        }
        if (item[k].type == 'array' && Object.keys(item[k].items.properties).length) {
          // item[k].isRootKeyFlag = true;
          await that.checkArrObjData(item[k].items.properties);
        }
      }
      that.$forceUpdate();
    },
    async checkArrObjFalse(item) {
      const that = this;
      for (let k in item) {
        item[k].isRootKeyFlag = false; // 都不禁用
        item[k].isRootKey = false; // 都不选中
        if (item[k].type == 'object' && Object.keys(item[k].properties).length) {
          // item[k].isRootKeyFlag = false;
          await that.checkArrObjFalse(item[k].properties);
        }
        if (item[k].type == 'array' && Object.keys(item[k].items.properties).length) {
          // item[k].isRootKeyFlag = false;
          await that.checkArrObjFalse(item[k].items.properties);
        }
      }
      that.$forceUpdate();
    },
    /**
     * @description: 处理
     * @author: 无尘
     */
    async handleToArr() {
      const that = this;
      if(that.itemData.level == 1 && that.itemData.properties.hasOwnProperty('bodyRoot')) {
        let arrObj = [];
        let newItemData = JSON.parse(JSON.stringify(that.itemData));
        that.newItemData = JSON.parse(JSON.stringify(that.itemData));
        if(Object.keys(newItemData.properties.bodyRoot.properties).length) {
          for(let key in newItemData.properties.bodyRoot.properties) {
            let innerArr = [];
            innerArr.push(newItemData.properties.bodyRoot);
            let returnArr = await that.handleLoop(newItemData.properties.bodyRoot.properties[key], innerArr);
            returnArr.forEach(ele => {
              if (Array.isArray(ele)) {
                arrObj.push(ele);
              }
            })
            if(Array.isArray(returnArr[0])) {
              continue;
            }
            arrObj.push(returnArr);
          }
          that.allDataList = arrObj;
          // console.log(that.allDataList)
          that.$store.dispatch('saveTempBackData', that.allDataList);
        }

      }
    },

    async handleLoop(item, innerArr) {
      const that = this;
      innerArr.push(item);
      if(item.type != 'object' && item.type != 'array'){
        return innerArr;
      }
      let arrRet = [];
      if(item.type == 'object' && Object.keys(item.properties).length) {
        for(let key in item.properties) {
          let mid = JSON.parse(JSON.stringify(innerArr));
          let arrMid = await that.handleLoop(item.properties[key], mid);
          arrRet.push(arrMid);
        }
      }
      if(item.type == 'array' && Object.keys(item.items.properties).length) {
        for(let key in item.items.properties) {
          let mid = JSON.parse(JSON.stringify(innerArr));
          let arrMid = await that.handleLoop(item.items.properties[key], mid);
          arrRet.push(arrMid);
        }
      }
      return arrRet;
    },
    /**
     * @description: 专门处理来自json的数据
     * @param {Object} handleData
     * @author: 无尘
     */
    async handledisFlag(handleData) {
      const that = this;
      // console.log('数据:',handleData);
      let notRootKey = [];
      for(let key in handleData.properties) {
        // 子级有一个选中，设置父级禁用，设置子级禁用
        if (handleData.properties[key].isRootKey) {
          that.changeCheck(handleData.properties[key]);
        }
        if (handleData.properties[key].type == 'object' && Object.keys(handleData.properties[key].properties).length) {
          await that.handledisFlag(handleData.properties[key]);
        }
        if (handleData.properties[key].type == 'array' && Object.keys(handleData.properties[key].items.properties).length) {
          await that.handledisFlag(handleData.properties[key].items);
        }
        // 如果子级下都是单个字段，都没有选中的,修改父级不禁用
        // 如果之前子级下有选中的，后来修改了类型，需要重新设置子级的禁用
        if (!handleData.properties[key].isRootKey && handleData.properties[key].type != 'object' && handleData.properties[key].type != 'array') {
          handleData.properties[key].isRootKeyFlag = false;
          notRootKey.push(key);
        }
      }
      if (notRootKey.length == Object.keys(handleData.properties).length) {
        handleData.isRootKeyFlag = false;
        // 子级的父级设置好之后，还要向子级的父级的父级去设置父级的禁用，所以只有父级以及其子级都不选时候需要去触发父级方法，判断父级的父级是否需要禁用
        that.$emit('changeData', handleData, handleData.isRootKey);
      }
    }
  },
  watch: {
    itemData: function(newData, oldData) {
      const that = this;
      that.trData = JSON.parse(JSON.stringify(newData));
      // that.handleToArr();
      // console.log("right watch1", that.itemData)
    }
  },

};
</script>
<style lang="less" scoped>
.w-110 {
  width: 110px;
}
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.child-row {
  padding-left: 10px;
}
</style>
