<template>
  <div style="height: 100%">
    <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-show="!configSwitch" style="height: 100%">
          <el-form ref="form" :model="defaultData.configForm" label-width="80px">
            <el-form-item label="字体颜色">
              <el-cascader
                  v-model="defaultData.configForm['textColor']" placeholder="请选择字体颜色"
                  :options="getCascaderOption('color')"
                  @change="textColorChange"></el-cascader>
            </el-form-item>
            <el-form-item label="X坐标数据">
              <el-select v-model="defaultData.configForm['Xdata']" placeholder="请选择数据"
                         @change="XdataChange"
                         clearable>
                <el-option :label="i" :value="i"
                           v-for="i in Object.keys(networkData)"></el-option>
              </el-select>
            </el-form-item>
            <div v-for=" (item,k) in defaultData.configForm['datas']">
              <el-form-item label="名称">
                <el-input v-model="item.name" @change="nameChange(k)"></el-input>
              </el-form-item>
              <el-form-item label="数据">
                <el-select v-model="item['data']" placeholder="请选择数据" @change="dataChange(k)"
                           clearable>
                  <el-option :label="i" :value="i"
                             v-for="i in Object.keys(networkData)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="柱子颜色">
                <el-cascader
                    v-model="item['barColor']" placeholder="请选择线颜色"
                    :options="getCascaderOption('color')"
                    @change="barColorChange(k)"></el-cascader>
              </el-form-item>
              <div class="add" @click="addDatas()" v-if=" k === defaultData.configForm['datas'].length -1">
                <img :src="addIcon" alt="" style="width: 100%">
              </div>
              <div class="subtract" @click="subtractDatas(k)">
                <img :src="subtractIcon" alt="" style="width: 100%">
              </div>
            </div>

            <div class="add" @click="addDatas()" v-if="  defaultData.configForm['datas'].length ===0">
              <img :src="addIcon" alt="" style="width: 100%">
            </div>
          </el-form>

          <div style="text-align: center;height: 60px;line-height: 60px">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>重置</el-button>
          </div>
        </div>
        <div v-show="configSwitch">
          <NetworkRequest :requests="defaultData.requests" @GetFinalData="getData"/>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%">
        <div class="chart">
          <ComplexChart :defaultData="chartData" :colors="(styleData||{}).colors1"></ComplexChart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ComplexChart from '@/components/Configure/complex/chart'
import {queryGlobalCfg} from "@/api/configure/configuration/globalCfg";
import NetworkRequest from "@/components/Configure/networkRequest/NetworkRequest";

import addIcon from '@/assets/add.png'
import subtractIcon from "@/assets/subtract.png";

export default {
  components: {
    ComplexChart,
    NetworkRequest
  },
  props: ['defaultData', 'isDialog', 'styleData'],
  watch: {
    networkData: {
      handler() {
        this.getChartData()
      },
      deep: true
    },
    'defaultData.requests': {
      async handler() {
        await this.getData()
        this.getChartData()
      },
      deep: true
    },
  },
  data() {
    return {
      addIcon,
      subtractIcon,
      globalList: [],
      configSwitch: false,
      chartData: {},
      networkData: {},
    }
  },
  created() {
    this.$detectingNullValues(this.defaultData, ['configForm', 'datas', 0])
    this.$detectingNullValues(this.defaultData, ['configForm', 'Xdata'])
  },
  async mounted() {
    this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData))
    // 获取全局配置
    await queryGlobalCfg().then(e => {
      this.globalList = e
    })
    // 轮询
    await this.getData()
    this.getChartData()
  },
  methods: {
    addDatas() {
      let series = JSON.parse(JSON.stringify(this.defaultData.chartData.series[0]))
      this.$set(this.chartData.series, this.defaultData.configForm['datas'].length, series)
      this.$set(this.defaultData.chartData.series, this.defaultData.configForm['datas'].length, series)
      this.$set(this.defaultData.configForm['datas'], this.defaultData.configForm['datas'].length, {
        data: '',
        barColor: '',
        name: '',
      })
    },
    subtractDatas(k) {
      this.$delete(this.chartData.series, k)
      this.$delete(this.defaultData.chartData.series, k)
      this.$delete(this.defaultData.configForm['datas'], k)
    },
    // 筛选配置项
    getCascaderOption(el) {
      if (el === 'color') {
        let styleData = JSON.parse(JSON.stringify(this.styleData?.colors || []))
        console.log(typeof styleData)
        return [
          {
            value: 'system',
            label: '全局变量',
            children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
              return {
                value: v.globalCfgId,
                label: v.globalCfgName,
                color: v.globalCfgDate
              }
            })
          },
          {
            value: 'styleData',
            label: '界面风格',
            children: styleData?.map((v, k) => {
              return {
                value: k,
                label: v,
                color: v
              }
            }) || []
          }
        ]
      } else {

        return [
          {
            value: 'system',
            label: '全局变量',
            children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
              return {
                value: v.globalCfgId,
                label: v.globalCfgName,
                color: v.globalCfgDate
              }
            })
          }
        ]
      }
    },
    async getData(e) {
      let data = await this.$getFinalData(this.defaultData.requests)
      this.$set(this, 'networkData', data)
    },
    async onSubmit() {
      if (this.isDialog) {
        this.$emit('close')
      }
    },
    getChartData() {
      this.textColorChange()
      this.XdataChange()
      this.defaultData.configForm['datas']?.forEach((i, k) => {
        this.dataChange(k)
        this.barColorChange(k)
        this.nameChange(k)
      })
    },
    textColorChange() {
      this.$detectingNullValues(this.chartData, ['textStyle', 'color'])
      if (this.defaultData.configForm['textColor']?.[0] === 'system') {
        this.$set(this.chartData.textStyle, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm.textColor?.[1])?.globalCfgDate || '')
      }
      if (this.defaultData.configForm['textColor']?.[0] === 'styleData') {
        this.$set(this.chartData.textStyle, 'color', this.styleData.colors[this.defaultData.configForm['textColor'][1]])
      }
    },
    dataChange(k) {
      this.$detectingNullValues(this.chartData, ['series', k, 'data'])
      this.$set(this.chartData.series[k], 'data', this.networkData[this.defaultData.configForm['datas'][k].data])
    },
    XdataChange() {
      this.$detectingNullValues(this.chartData, ['xAxis', 'data'])
      this.$set(this.chartData.xAxis, 'data', this.networkData[this.defaultData.configForm.Xdata])
    },
    barColorChange(k) {
      this.$detectingNullValues(this.chartData, ['series', k, 'itemStyle', 'normal', 'color'])
      if (this.defaultData.configForm['datas'][k]['barColor'][0] === 'system') {
        this.$set(this.chartData.series[k].itemStyle.normal, 'color', this.globalList.find(e => e.globalCfgId === this.defaultData.configForm['datas'][k].barColor?.[1])?.globalCfgDate || '')
      }
      if (this.defaultData.configForm['datas'][k]['barColor'][0] === 'styleData') {
        this.$set(this.chartData.series[k].itemStyle.normal, 'color', this.styleData.colors[this.defaultData.configForm['datas'][k]['barColor'][1]])
      }
      console.log(this.chartData)
    },
    nameChange(k) {
      this.$detectingNullValues(this.chartData, ['series', k, 'name'])
      this.$set(this.chartData.series[k], 'name', this.defaultData.configForm['datas'][k].name)
      console.log(this.chartData)
    },
  },
}
</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>
