<template>
  <div>
    <el-row :gutter="6">
      <el-col :span="6">
        <el-select v-model="echartsValue" filterable placeholder="请选择图形状" style="width: 100%" size="large"
                   @change="handleChangeEcharts">
          <el-option v-for="chartItem in chartType"
                     :key="chartItem.value"
                     :label="chartItem.label"
                     :value="chartItem.value"/>
        </el-select>
        <!--左侧选项区域-->
        <charts-options @editValueFlag="editValueFlag" @editStartDataType="editStartDataType"
                        :drag-options="ChartsItem" :chart-option="option" :init-charts="initChart"
                        :x-axis-list="xValueAxis" :y-axis-list="yValueAxis"
                        :current-chart="echartsValue" :radar-indicator="radarIndicator"/>
      </el-col>
      <!--X轴区域-->
      <el-col :span="9" v-if="echartsValue==='bar'||echartsValue==='line'">
        <axis-box :box-name="'X轴'" :drag-list="xValueAxis" :drag-options="ChartsItem" :x-axis-list="xValueAxis"
                  :y-axis-list="yValueAxis" :flag="valueFlag"
                  :start-data-type="startDataType" :chart-option="option" :init-charts="initChart"
                  @getLineChartBasicSettingList="getLineChartBasicSettingList"
                  @getBarChartBasicSettingList="getBarChartBasicSettingList" :current-chart="echartsValue"/>
      </el-col>
      <!--Y轴区域-->
      <el-col :span="9" v-if="echartsValue==='bar'||echartsValue==='line'">
        <axis-box :box-name="'Y轴'" :drag-list="yValueAxis" :drag-options="ChartsItem" :x-axis-list="xValueAxis"
                  :y-axis-list="yValueAxis" :flag="valueFlag"
                  :start-data-type="startDataType" :chart-option="option" :init-charts="initChart"
                  @getLineChartBasicSettingList="getLineChartBasicSettingList"
                  @getBarChartBasicSettingList="getBarChartBasicSettingList" :current-chart="echartsValue"/>
      </el-col>
      <el-col :span="9" v-if="echartsValue==='pie'">
        <pie-box :drag-list="xValueAxis" :init-charts="initChart" :chart-option="option"/>
      </el-col>
      <el-col :span="9" v-if="echartsValue==='radar'">
        <radar-box :drag-list="xValueAxis" :init-charts="initChart" :chart-option="option"/>
      </el-col>
    </el-row>
    <el-button @click.stop="saveData">保存</el-button>
    <el-button v-if="echartsValue==='line'" @click.stop="openAdvancedSettings">高级设置</el-button>
    <el-row :gutter="6">
      <el-col :span="16">
        <div id="container" ref="chart" @click.stop></div>
      </el-col>
      <!--基础设置-->
      <el-col :span="8">
        <!-- 折线图基础设置-->
        <line-chart-basic-setting v-if="echartsValue==='line'" :basic-list="lineChartBasicSettingList"
                                  :init-charts="initChart"
                                  :chart-option="option"/>
        <!-- 柱状图基础设置-->
        <bar-chart-basic-setting v-if="echartsValue==='bar'" :basic-list="barChartBasicSettingList"
                                 :init-charts="initChart"
                                 :chart-option="option"/>
        <!-- 饼图基础设置-->
<!--        <pie-chart-basic-setting v-if="echartsValue==='pie'"/>-->
      </el-col>
    </el-row>
    <!--高级设置-->
    <!-- 折线图高级设置-->
    <line-chart-advanced-settings v-if="echartsValue==='line'" ref="advancedSettings" :init-charts="initChart"
                                  :chart-option="option"/>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import draggable from 'vuedraggable'
import ChartsOptions from "./ChartsOptions.vue";
import AxisBox from "./AxisBox.vue";
import LineChartBasicSetting from "./lineChart/BasicSetting.vue";
import LineChartAdvancedSettings from "./lineChart/AdvancedSettings.vue";
import BarChartBasicSetting from "./barChart/BasicSetting.vue";
// import PieChartBasicSetting from "./pieChart/BasicSetting.vue";
import PieBox from "./pieChart/PieBox.vue";
import RadarBox from "./radarChart/RadarBox.vue";
// import BarChartAdvancedSettings from "./barChart/AdvancedSettings.vue";

const emit = defineEmits(["getFinalInfo"])
const props = defineProps({
  info: {
    type: Object,
    default: {}
  },
  lineData: {
    type: Array,
    default: []
  },
  barData: {
    type: Array,
    default: []
  },
  pieData: {
    type: Array,
    default: []
  },
  radarData: {
    type: Array,
    default: []
  },
  radarIndicator: {
    type: Array,
    default: []
  }
})
//图形: 1:折线图 2.柱状图 3.饼图
const chartType = reactive([
  {
    value: 'line',
    label: '折线图',
  },
  {
    value: 'bar',
    label: '柱状图',
  },
  {
    value: 'pie',
    label: '饼图',
  },
  {
    value: 'radar',
    label: '雷达图',
  }
])
//基础设置列表
const lineChartBasicSettingList = ref([])
const barChartBasicSettingList = ref([])
const advancedSettings = ref()
//获取父组件传来的初始数据
const initInfo = reactive(props.info)
//从左侧获取拖动的选项的数据类型
const startDataType = ref()
//标记从左侧拖动选项数据类型是否是value
const valueFlag = ref(false)
//简化代码
let xValueAxis = reactive(initInfo.xValueAxis)
let yValueAxis = reactive(initInfo.yValueAxis)
const line_data = reactive(props.lineData)
const bar_data = reactive(props.barData)
const pie_data = reactive(props.pieData)
const radar_data = reactive(props.radarData)
let option = reactive(initInfo.echartsOptions)

//页面左上角select选择框绑定数据
const echartsValue = ref('line')
//可供拖动的选项列表
const ChartsItem = ref([])
//获取到container容器实例
const chart = ref(null);
//定义echarts实例
let myEcharts = reactive({});
onMounted(() => {
  if (ChartsItem.value.length === 0) {
    ChartsItem.value = line_data
  }
  //初始化echarts(不显示图)
  let selectLegend = {}
  ChartsItem.value.forEach(item => {
    if (item.dataType !== 'key') {
      selectLegend[item.label] = false
    }
  })
  option.legend.selected = selectLegend
  if (echartsValue.value === 'pie'||echartsValue.value === 'radar') {
    isShowAxisLine(false)
  } else {
    isShowAxisLine(true)
  }
  //加载echarts
  initChart();
})

/**
 * 修改valueFlag
 * @param val 子组件传的动态值
 */
const editValueFlag = (val) => {
  valueFlag.value = val
}
/**
 * 修改startDataType
 * @param str 子组件传的动态值
 */
const editStartDataType = (str) => {
  startDataType.value = str
}
/**
 * 用于其他组件获取基础设置列表
 * @param str 子组件传的动态值
 */
const getLineChartBasicSettingList = (str) => {
  lineChartBasicSettingList.value = str
}
/**
 * 修改option
 * @param str 子组件传的动态值
 */
const getBarChartBasicSettingList = (str) => {
  barChartBasicSettingList.value = str
}


/**
 * 切换echarts图类型事件
 * @param e event事件
 */
const handleChangeEcharts = (e) => {
  if (xValueAxis.length !== 0 || yValueAxis.length !== 0) {

    xValueAxis.map((item) => {
      ChartsItem.value.unshift(item)
      option.legend.selected[item.label] = false
    })
    xValueAxis.splice(0, xValueAxis.length)
    yValueAxis.map((item) => {
      ChartsItem.value.unshift(item)
      option.legend.selected[item.label] = false
    })
    yValueAxis.splice(0, yValueAxis.length)
    option.legend.data.splice(0, option.legend.data.length)
    option.series.splice(0, option.series.length)
    option.xAxis.name = ''
    option.xAxis.data = []
    option.xAxis.type = 'category'
    option.yAxis.name = ''
    option.yAxis.data = []
    option.yAxis.type = 'value'
    initChart()
  }
  echartsValue.value = e
  if (e === 'line') {
    ChartsItem.value = line_data
    isShowAxisLine(true)
    option.radar={}
  } else if (e === 'bar') {
    ChartsItem.value = bar_data
    isShowAxisLine(true)
    option.radar={}
  } else if (e === 'pie') {
    ChartsItem.value = pie_data
    isShowAxisLine(false)
    option.radar={}
  }else if (e === 'radar') {
    ChartsItem.value = radar_data
    isShowAxisLine(false)
    option.radar.indicator = props.radarIndicator
  }
  let selectLegend = {}
  ChartsItem.value.forEach(item => {
    if (item.dataType !== 'key') {
      selectLegend[item.label] = false
    }
  })
  option.legend.selected = selectLegend
  initChart()
}
/**
 * 是否显示x/y轴线
 * @param type
 */
const isShowAxisLine = (type) => {
  option.xAxis.axisLine.show = type
  option.yAxis.axisLine.show = type
  if (type === false) {
    option.tooltip.trigger = 'item'
  } else {
    option.tooltip.trigger = 'axis'
  }
}
/**
 * 初始化echarts实例方法
 */
const initChart = () => {
  console.log('initChartoption', option)
  //3.初始化container容器
  myEcharts = echarts.init(chart.value);
  //5.传入数据
  myEcharts.setOption(option,true);
  //图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
  }
  //点击事件
  // myEcharts.on('click', function (params) {
  //   console.log('dddd点击事件', params);
  // });
  // myEcharts.restore();
  localStorage.removeItem('dragType')
}
/**
 * 保存数据
 */
const saveData = () => {
  console.log('最终initInfo', initInfo)
  emit("getFinalInfo", initInfo)
}
/**
 * 打开高级设置弹框
 */
const openAdvancedSettings = () => {
  advancedSettings.value.showDrawer()
}

</script>

