<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-14 16:51:07
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-01-10 10:36:24
 -->
<!--
<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" cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;table-layout: fixed;" :key="index + itemName + 121">
          <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"></i></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)"></el-checkbox></div>
              </td>
              <td v-if="interfaceType == '0'" rowspan="1" colspan="1" class="el-table_1_column_1">
                <div class="cell">
                  <el-input class="w-110" v-model="itemValue.rootKey" placeholder="请输入参数名" @blur="blurKey(itemValue, itemName)"></el-input>
                </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>
                    <el-option label="query" value="query"></el-option>
                    <el-option label="body" value="body"></el-option>
                    <el-option label="form" value="form"></el-option>
                  </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 class="w-110" v-model="itemValue.defaultVal" placeholder="请输入参数值"></el-input>
                </div>
              </td>
              <td v-if="interfaceType == '1'" rowspan="1" colspan="1" class="el-table_1_column_4">
                <div class="cell">
                  <el-input class="w-110" v-model="itemValue.objectClass" placeholder="请输入包路径"></el-input>
                </div>
              </td>
              <td v-if="interfaceType == '1'" rowspan="1" colspan="1" class="el-table_1_column_4">
                <div class="cell">
                  <el-input class="w-110" :disabled="!itemValue.isRootKey" v-model="itemValue.sort" placeholder="请输入排序"></el-input>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <back-table-row class="el-table__row child-row" v-if="itemValue.type == 'array'" :interfaceType="interfaceType" :itemData="itemValue" :key="index + '122' + itemName" @changeData="changeData"> </back-table-row>
        <back-table-row class="el-table__row child-row" v-if="itemValue.type == 'object'" :interfaceType="interfaceType" :itemData="itemValue" :key="index + '122' + itemName" @changeData="changeData"> </back-table-row>
      </template>
    </div>
    <div v-if="itemData.type == 'array'">
      <template v-for="(itemValue, itemName, index) in itemData.items.properties">
        <table v-if="!itemValue.constFlag" cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;table-layout: fixed;" :key="index + itemName + 121">
          <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"></i></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)"></el-checkbox></div>
              </td>
              <td v-if="interfaceType == '0'" rowspan="1" colspan="1" class="el-table_1_column_1">
                <div class="cell">
                  <el-input class="w-110" v-model="itemValue.rootKey" placeholder="请输入参数名" @blur="blurKey(itemValue, itemName)"></el-input>
                </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>
                    <el-option label="query" value="query"></el-option>
                    <el-option label="body" value="body"></el-option>
                    <el-option label="form" value="form"></el-option>
                  </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 class="w-110" v-model="itemValue.defaultVal" placeholder="请输入参数值"></el-input>
                </div>
              </td>
              <td v-if="interfaceType == '1'" rowspan="1" colspan="1" class="el-table_1_column_4">
                <div class="cell">
                  <el-input class="w-110" v-model="itemValue.objectClass" placeholder="请输入包路径"></el-input>
                </div>
              </td>
              <td v-if="interfaceType == '1'" rowspan="1" colspan="1" class="el-table_1_column_4">
                <div class="cell">
                  <el-input class="w-110" :disabled="!itemValue.isRootKey" v-model="itemValue.sort" placeholder="请输入排序"></el-input>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <back-table-row class="el-table__row child-row" v-if="itemValue.type == 'array'" :interfaceType="interfaceType" :itemData="itemValue" :key="index + '122' + itemName" @changeData="changeData"> </back-table-row>
        <back-table-row class="el-table__row child-row" v-if="itemValue.type == 'object'" :interfaceType="interfaceType" :itemData="itemValue" :key="index + '122' + itemName" @changeData="changeData"> </back-table-row>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'back-table-row',
  props: {
    itemData: {
      type: [Object, Array],
      default() {
        return {};
      }
    },
    interfaceType: {
      type: String,
      default() {
        return '0';
      }
    }
  },
  data() {
    return {
      trData: {},
      tempArr: [],
      newItemData: {},
      allDataList: []
    };
  },
  methods: {
    /**
     * 不选择的时候判断父级是否禁用
     * @param  {[type]} obj [description]
     * @return {[type]}     [description]
     */
    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 (obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          tag = await that.handleParentDisable(obj[k].items.properties);
        }
      }
      // console.log('子组件 return tag:', tag);
      return tag;
    },
    /**
     * 触发父组件
     */
    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);
    },
    /**
     * key 输入变化
     */
    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);
    },
    /**
     * 改变checkbox
     */
    /* eslint-disable */
    async changeCheck(obj, key) {
      const that = this;
      // console.log('改变checkbox:', obj, key);
      await that.findKey(obj.currentKey, obj.isRootKey, obj)
      // 查找父级禁用和不禁用

      // 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();
    },
    /**
     * 处理
     */
    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;
    },
    /**
     * 专门处理来自json的数据
     */
    async handledisFlag(handleData) {
      const that = this;
      // console.log(handleData);
      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);
        }
      }
    }
  },
  watch: {
    itemData: function(newData, oldData) {
      const that = this;
      that.trData = JSON.parse(JSON.stringify(newData));
      // that.handleToArr();
      // console.log("right watch1", that.itemData)
    }
  },
  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 = [];
  },
};
</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>
