<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="height: 100%">
          <div style="height: calc(100% - 60px - 30px);overflow: auto;" class="notScroll">
            <el-form label-width="200px">
              <!--          标题配置-->
              <el-divider content-position="center">标题配置</el-divider>
              <div v-for="(i,k) in chartData.title" style="margin-bottom: 1vw">
                <div style="margin: 0 8px 12px 100px;">
                  <el-divider v-if="k>0" content-position="center"></el-divider>
                </div>
                <TitleOption :formData.sync="chartData.title[k]"/>
                <div style="margin-left: 200px">
                  <div class="subtract" @click="subtractChartOption('title',k)">
                    <img :src="subtractIcon" alt="" style="width: 100%">
                  </div>
                  <div class="add" @click="addChartOption('title')" v-if="k===chartData.title.length-1">
                    <img :src="addIcon" alt="" style="width: 100%">
                  </div>
                </div>
              </div>
              <!--          横轴配置-->
              <el-divider content-position="center">横轴配置</el-divider>
              <div>
                <div v-for="(i,k) in chartData.xAxis" style="margin-bottom: 1vw">
                  <XAxisOption :formData.sync="chartData.xAxis[k]"/>
                  <div style="margin-left: 200px">
                    <div class="subtract" @click="subtractChartOption('xAxis',k)">
                      <img :src="subtractIcon" alt="" style="width: 100%">
                    </div>
                    <div class="add" @click="addChartOption('xAxis')">
                      <img :src="addIcon" alt="" style="width: 100%">
                    </div>
                  </div>
                </div>
              </div>
              <!--          纵轴配置-->
              <el-divider content-position="center">纵轴配置</el-divider>
              <div>
                <div v-for="(i,k) in chartData.yAxis" style="margin-bottom: 1vw">
                  <YAxisOption :formData.sync="chartData.yAxis[k]"/>
                  <div style="margin-left: 200px">
                    <div class="subtract" @click="subtractChartOption('yAxis',k)">
                      <img :src="subtractIcon" alt="" style="width: 100%">
                    </div>
                    <div class="add" @click="addChartOption('yAxis')">
                      <img :src="addIcon" alt="" style="width: 100%">
                    </div>
                  </div>
                </div>
              </div>
              <!--          图表配置-->
              <el-divider content-position="center">图表配置</el-divider>
              <div>
                <div v-for="(i,k) in chartData.series" style="margin-bottom: 1vw;">
                  <el-form-item label="图表类型">
                    <el-select v-model="chartData.series[k].type" placeholder="请选择" @change="seriesTypeChange(k)">
                      <el-option
                          v-for="i in typeOptions"
                          :key="i.value"
                          :label="i.label"
                          :value="i.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <LineOption v-if="chartData.series[k].type==='line'" :formData.sync="chartData.series[k]"/>
                  <div style="margin-left: 200px">
                    <div class="subtract" @click="subtractChartOption('series',k)">
                      <img :src="subtractIcon" alt="" style="width: 100%">
                    </div>
                    <div class="add" @click="addChartOption('series')">
                      <img :src="addIcon" alt="" style="width: 100%">
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>

          <div style="text-align: center;height: 60px;line-height: 60px">
            <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="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%">
        <div class="chart">
          <ComplexChart ref="ComplexChart" :defaultData="{chartData,requests}"></ComplexChart>
        </div>
      </el-col>
    </el-row>

    <el-dialog
        title="添加请求"
        append-to-body
        :visible.sync="addRequestDialogVisible"
        width="30%">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card shadow="hover">
            <div style="text-align: center">
              <el-image
                  style="width: 100px; height: 100px;"
                  :src="networkImg"
                  fit="fill"></el-image>
            </div>
            <div style="text-align: center">网络请求</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div style="text-align: center">
              <el-image
                  style="width: 100px; height: 100px;"
                  :src="customizationRequestImg"
                  fit="fill"></el-image>
            </div>
            <div style="text-align: center">自定义请求</div>
          </el-card>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addRequestDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addRequestDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import ComplexChart from '@/components/Configure/complex/chart'
import addIcon from '@/assets/add.png'
import subtractIcon from '@/assets/subtract.png'
import {LineOption, TitleOption, XAxisOption, YAxisOption} from "@/components/Configure/options";
import {preConfig} from '@/components/Configure/options/preConfig'
import request from "@/utils/request";
import {merge} from 'lodash';
import networkImg from '@/assets/request/network.png'
import customizationRequestImg from '@/assets/request/customizationRequestImg.png'

export default {
  components: {
    ComplexChart,
    LineOption,
    XAxisOption,
    YAxisOption,
    TitleOption
  },
  props: ['defaultData', 'isDialog'],
  watch: {},
  data() {
    return {
      addIcon,
      subtractIcon,
      networkImg,
      customizationRequestImg,
      typeOptions: [
        {
          label: 'line',
          value: 'line',
        },
        {
          label: 'bar',
          value: 'bar',
        },
        {
          label: 'pie',
          value: 'pie',
        },
      ],
      configSwitch: false,
      chartDataInit: {
        title: [
          {
            textStyle: {}
          }
        ],
        xAxis: [
          {
            type: 'category',
            nameTextStyle: {},
            nameTruncate: {},
            axisLine: {
              lineStyle: {}
            },
            axisTick: {
              lineStyle: {}
            },
            minorTick: {
              lineStyle: {}
            },
            axisLabel: {},
            splitLine: {
              lineStyle: {}
            },
            minorSplitLine: {
              lineStyle: {}
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            nameTextStyle: {},
            nameTruncate: {},
            axisLine: {
              lineStyle: {}
            },
            axisTick: {
              lineStyle: {}
            },
            minorTick: {
              lineStyle: {}
            },
            axisLabel: {},
            splitLine: {
              lineStyle: {}
            },
            minorSplitLine: {
              lineStyle: {}
            }
          }
        ],
        series: [
          {},
        ],
        type: null,
      },
      requests: [
        {
          text: '',
          data: ''
        }
      ],
      chartData: null,
      addRequestDialogVisible: false
    }
  },
  created() {
    this.chartData = (this.chartDataInit)
    // JSON.parse(JSON.stringify(this.chartDataInit))
    if (this.defaultData) {
      this.chartData = (merge({}, this.chartDataInit, this.defaultData.chartData))
      this.requests = this.defaultData.requests
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      if (this.defaultData) {
        this.$emit('change', {chartData: this.chartData, requests: this.requests})
      } else {
        request({
          method: 'post',
          url: '/componentLib/setComponentLibData',
          data: {
            data: JSON.stringify(
                {
                  requests: this.requests,
                  chartData: this.chartData
                }
            ),
            type: 'chart'
          }
        }).then((val) => {
          console.log(val);
        });
      }
    },
    reset() {
      this.chartData = JSON.parse(JSON.stringify(this.chartDataInit))
    },
    subtractChartOption(key, index) {
      if (this.chartData?.[key]?.length > 1) {
        this.$delete(this.chartData[key], index)
      }
    },
    addChartOption(key) {
      Object.keys(preConfig[key].option).forEach(e => {
        if (Array.isArray(this.chartData[e])) {
          this.chartData[e].push(JSON.parse(JSON.stringify(preConfig[key].option[e])))
        } else {
          this.$set(this.chartData, e, JSON.parse(JSON.stringify(preConfig[key].option[e])))
        }
      })
    },
    addRequest() {
      // this.requests.push(
      //     {
      //       text: '',
      //       data: ''
      //     }
      // )
      this.addRequestDialogVisible = true
    },
    subtractRequest(key) {
      if (this.requests?.length > 1) {
        this.$delete(this.requests, key)
      }
    },
    async InitiateRequest() {
      await this.$refs.ComplexChart.getRequestData()
      let data = {}
      this.requests.forEach(e => {
        if (e.data?.constructor === Object) {
          data = {...data, ...e.data}
        }
      })
    },
    seriesTypeChange(k) {
      console.log()
      this.$set(this.chartData.series, k, {
        type: this.chartData.series[k].type,
        ...preConfig[this.chartData.series[k].type]
      })
    }
  },
}
</script>
<style scoped lang="less">
.chart {
  width: 100%;
  height: 100%;
}

.notScroll {
  &::-webkit-scrollbar {
    display: none;
  }
}

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