<template>
  <div :style="`height: ${isDialog ?'100%':'100vh'};background-color: #fff`">
    <el-row style="height: 100%">
      <el-col :span="12" style="height: 100%;overflow: auto;padding-bottom: 12px;" class="leftCol">
        <div style="text-align: center">
          <el-switch
              v-model="configSwitch"
              active-text="数据配置"
              inactive-text="图表配置">
          </el-switch>
        </div>
        <div v-if="!configSwitch" style="margin-top: 12px">
          <el-form label-width="200px">
            <el-form-item label="内容">
              <el-input v-model="textData.text"></el-input>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="textData.color" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-color-picker v-model="textData.backgroundColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="字号">
              <el-input v-model="textData.fontSize"></el-input>
            </el-form-item>
            <el-form-item label="字体风格">
              <el-select v-model="textData.fontStyle" placeholder="请选择">
                <el-option label="标准" value="normal"></el-option>
                <el-option label="倾斜" value="italic"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="粗细">
              <el-radio-group v-model="textData.fontWeight">
                <el-radio :label="100">100</el-radio>
                <el-radio :label="200">200</el-radio>
                <el-radio :label="300">300</el-radio>
                <el-radio :label="400">400</el-radio>
                <el-radio :label="500">500</el-radio>
                <el-radio :label="600">600</el-radio>
                <el-radio :label="700">700</el-radio>
                <el-radio :label="800">800</el-radio>
                <el-radio :label="900">900</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="边距">
              <span style="padding: 0 8px">上:</span>
              <el-input v-model="textData.paddingTop" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">下:</span>
              <el-input v-model="textData.paddingBottom" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">左:</span>
              <el-input v-model="textData.paddingLeft" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">右:</span>
              <el-input v-model="textData.paddingRight" style="width: calc(25% - 50px)"></el-input>
            </el-form-item>
            <el-form-item label="边框">
              <span style="padding: 0 8px">上:</span>
              <el-input v-model="textData.borderTopWidth" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">下:</span>
              <el-input v-model="textData.borderBottomWidth" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">左:</span>
              <el-input v-model="textData.borderLeftWidth" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">右:</span>
              <el-input v-model="textData.borderRightWidth" style="width: calc(25% - 50px)"></el-input>
            </el-form-item>
            <el-form-item label="边框风格">
              <span style="padding: 0 8px">上:</span>
              <el-select style="width: calc(25% - 50px)" v-model="textData.borderTopStyle" placeholder="请选择">
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="实线" value="solid"></el-option>
              </el-select>
              <span style="padding: 0 8px">下:</span>
              <el-select style="width: calc(25% - 50px)" v-model="textData.borderBottomStyle" placeholder="请选择">
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="实线" value="solid"></el-option>
              </el-select>
              <span style="padding: 0 8px">左:</span>
              <el-select style="width: calc(25% - 50px)" v-model="textData.borderLeftStyle" placeholder="请选择">
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="实线" value="solid"></el-option>
              </el-select>
              <span style="padding: 0 8px">右:</span>
              <el-select style="width: calc(25% - 50px)" v-model="textData.borderRightStyle" placeholder="请选择">
                <el-option label="虚线" value="dashed"></el-option>
                <el-option label="实线" value="solid"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="边框颜色">
              <span style="padding: 0 8px;vertical-align: top">上:</span>
              <el-color-picker v-model="textData.borderTopColor" show-alpha></el-color-picker>
              <span style="padding: 0 8px;vertical-align: top">下:</span>
              <el-color-picker v-model="textData.borderBottomColor" show-alpha></el-color-picker>
              <span style="padding: 0 8px;vertical-align: top">左:</span>
              <el-color-picker v-model="textData.borderLeftColor" show-alpha></el-color-picker>
              <span style="padding: 0 8px;vertical-align: top">右:</span>
              <el-color-picker v-model="textData.borderRightColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item label="圆角">
              <span style="padding: 0 8px">上左:</span>
              <el-input v-model="textData.borderTopLeftRadius" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">上右:</span>
              <el-input v-model="textData.borderTopRightRadius" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">下左:</span>
              <el-input v-model="textData.borderBottomLeftRadius" style="width: calc(25% - 50px)"></el-input>
              <span style="padding: 0 8px">下右:</span>
              <el-input v-model="textData.borderBottomRightRadius" style="width: calc(25% - 50px)"></el-input>
            </el-form-item>
            <el-form-item label="文字间距">
              <el-input v-model="textData.letterSpacing"></el-input>
            </el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-form>
        </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="JSON.stringify(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="text">
          <ComplexText :defaultData="{textData,requests}"></ComplexText>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import addIcon from '@/assets/add.png'
import subtractIcon from '@/assets/subtract.png'
import {ComplexText} from '@/components/Configure/complex/index'
import request from "@/utils/request";

export default {
  components: {ComplexText},
  props: ['defaultData', 'isDialog'],
  watch: {},
  data() {
    return {
      addIcon,
      subtractIcon,
      configSwitch: false,
      textData: {},
      requests: [
        {
          text: '',
          data: ''
        }
      ],
    }
  },
  created() {
  },
  mounted() {
    console.log(this.defaultData)
    if(this.defaultData){
      this.textData =  this.defaultData.textData
      this.requests =  this.defaultData.requests
    }
  },
  methods: {

    onSubmit() {
      this.defaultData = {textData:this.textData,requests:this.requests}
      // 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, '')
      //             }
      //           }),
      //           textData: this.textData
      //         }
      //     ),
      //     type: 'text'
      //   }
      // }).then((val) => {
      //   console.log(val);
      // });
    },
    reset() {
      this.$set(this, 'textData', {})
    },
    addRequest() {
      this.requests.push(
          {
            text: '',
            data: ''
          }
      )
    },
    subtractRequest(key) {
      if (this.requests?.length > 1) {
        this.$delete(this.requests, key)
      }
    },
    async InitiateRequest() {
      console.log(this.requests)
      let data = {}
      this.requests.forEach(e => {
        console.log(e.data)
        if (e.data?.constructor === Object) {
          data = {...data, ...e.data}
        }
      })
      console.log(data)
    },
  },
}
</script>
<style scoped lang="less">

.leftCol::-webkit-scrollbar {
  display: none;
}

.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;
  }
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
