<template>
  <div :style="`height: ${isDialog ?'100%':'100vh'};background-color: #fff`">
    <div v-bind="{width:1,height:1}"></div>
    <el-row style="height: 100%">
      <el-col :span="12" style="height: 100%;overflow: auto;padding: 12px 5% 12px 12px;">
        <div style="text-align: center">
          <el-switch
            v-model="configSwitch"
            active-text="数据配置"
            inactive-text="表格配置">
          </el-switch>
        </div>
        <div v-if="!configSwitch">
          <el-form ref="originalData" :model="originalData" label-width="200px">
            <h3 style="margin-left: 100px;margin-bottom: 8px">
            <span style="margin-right: 8px">
            表头数据配置
          </span>
            </h3>
            <div v-for="(i,k) in originalData.th" style="margin-bottom: 1vw">
              <el-form-item label="列名称">
                <el-input v-model="i.label"></el-input>
              </el-form-item>
              <el-form-item label="列数据字段名称" v-if="!i.type">
                <el-input v-model="i.prop"></el-input>
              </el-form-item>
              <el-form-item label="宽度">
                <el-input v-model="i.width"></el-input>
              </el-form-item>
              <el-form-item label="固定位置">
                <el-radio-group v-model="i.fixed">
                  <el-radio :label="null">不固定</el-radio>
                  <el-radio label="left">左</el-radio>
                  <el-radio label="right">右</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="类型">
                <el-radio-group v-model="i.type">
                  <el-radio :label="null">默认</el-radio>
                  <el-radio label="selection">多选</el-radio>
                  <el-radio label="index">索引</el-radio>
                  <el-radio label="expand">可展开</el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="margin-left: 200px">
                <div class="subtract" @click="subtractTableOption('th',k)">
                  <img :src="subtractIcon" alt="" style="width: 100%">
                </div>
                <div class="add" @click="addTableOption('th')" v-if="k===originalData.th.length-1">
                  <img :src="addIcon" alt="" style="width: 100%">
                </div>
              </div>
            </div>
            <h3 style="margin-left: 100px;margin-bottom: 8px">
            <span style="margin-right: 8px">
            表格数据配置
          </span>
            </h3>
            <div v-for="(i,k) in originalData.data" style="margin-bottom: 1vw">
              <el-form-item label="数据字段名称">
                <el-input v-model="i.key"></el-input>
              </el-form-item>
              <el-form-item label="数据">
                <el-input v-model="i.data"></el-input>
              </el-form-item>
              <div style="margin-left: 200px">
                <div class="subtract" @click="subtractTableOption('data',k)">
                  <img :src="subtractIcon" alt="" style="width: 100%">
                </div>
                <div class="add" @click="addTableOption('data')" v-if="k===originalData.data.length-1">
                  <img :src="addIcon" alt="" style="width: 100%">
                </div>
              </div>
            </div>


            <h3 style="margin-left: 100px;margin-bottom: 8px">
            <span style="margin-right: 8px">
            表头样式配置
          </span>
            </h3>
            <div v-for="(i,k) in originalData.data" style="margin-bottom: 1vw">
              <el-form-item label="数据字段名称">
                <el-input v-model="i.key"></el-input>
              </el-form-item>
              <el-form-item label="数据">
                <el-input v-model="i.data"></el-input>
              </el-form-item>
            </div>

          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </div>
        <div v-if="configSwitch">
          <div v-for="(i,k) in requests"
               style="padding:  0 10px 0 200px">
            <div class="textArea">
              <el-input
                style="margin: 12px 0;"
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="i.text">
              </el-input>
              <div class="textAreaIcon">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="i.data">
                  <i slot="reference" class="el-icon-info"></i>
                </el-popover>
              </div>
            </div>
            <div>
              <div class="subtract" @click="subtractRequest(k)" v-if="requests.length >1">
                <img :src="subtractIcon" alt="" style="width: 100%">
              </div>
              <div class="add" @click="addRequest()" v-if="requests.length === k+1">
                <img :src="addIcon" alt="" style="width: 100%">
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <el-button type="primary" @click="InitiateRequest">发起请求</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%;position: relative">
        <div class="rightTable">
          <ComplexTable :defaultData="{originalData,requests}" ref="ComplexTable" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import addIcon from '@/assets/add.png';
import subtractIcon from '@/assets/subtract.png';
import { preConfig } from '@/components/Configure/options/preConfig';
import {
  ComplexTable
} from '@/components/Configure/complex';
import request from '@/utils/request1.js';

export default {
  components: {
    ComplexTable
  },
  props: ['defaultData', 'isDialog'],
  data() {
    return {
      addIcon,
      subtractIcon,
      configSwitch: false,
      requests: [
        {
          text: '',
          data: ''
        }
      ],
      // 原始数据
      originalData: {
        th: [
          {
            label: '',
            prop: '',
            type: '',
            width: '',
            fixed: ''
          }
        ],
        data: [
          {
            key: '',
            data: ''
          }
        ]
      }
    };
  },
  created() {
    console.log(this.defaultData);
  },
  mounted() {
  },
  methods: {
    subtractTableOption(key, index) {
      if (this.originalData[key]?.length > 1) {
        this.$delete(this.originalData[key], index);
      }
    },
    addTableOption(key) {
      this.originalData[key].push(JSON.parse(JSON.stringify(preConfig.tableData[key].option)));
    },
    addRequest() {
      this.requests.push(
        {
          text: '',
          data: ''
        }
      );
    },
    subtractRequest(key) {
      if (this.requests?.length > 1) {
        this.$delete(this.requests, key);
      }
    },
    async InitiateRequest() {
      await this.$refs.ComplexTable.InitiateRequest();
      let data = {};
      this.requests.forEach(e => {
        console.log(e.data);
        if (e.data?.constructor === Object) {
          data = { ...data, ...e.data };
        }
      });
      console.log(data);
    },
    onSubmit() {
      request({
        method: 'post',
        url: '/componentLib/setComponentLibData',
        data: {
          data: JSON.stringify(
            {
              requests: this.requests.map(e => {
                return {
                  data: JSON.parse(e.data || '{}'),
                  text: e.text.replace(/\n/g, '').replace(/\r/g, '')
                };
              }),
              originalData: this.originalData
            }
          ),
          type: 'table'
        }
      }).then((val) => {
        console.log(val);
      });
    },
    reset() {

    }
  }
};
</script>
<style scoped lang="less">
.rightTable {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  height: 60vh;
}

.add {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #409EFF;
  border-radius: 50%;
  margin: 0 1vw;
  cursor: pointer;
}

.subtract {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #909399;
  border-radius: 50%;
  cursor: pointer;
}

.textArea {
  position: relative;

  .textAreaIcon {
    position: absolute;
    top: 12px;
    right: 8px;
  }
}
</style>
