<template>
  <el-scrollbar height="450px">
    <div class="basic-setup" @click.stop>
      折线图基本设置
    </div>
    <div v-for="(settingItem) in basicList" class="setting" @click.stop>
      <div class="setting-title">{{ settingItem.label }}</div>
      <!--            <div class="setting-item">-->
      <!--              <span>图形: </span>-->
      <!--              <el-select v-model="settingItem.type" @change="switchChart($event,settingItem)">-->
      <!--                <el-option-->
      <!--                    v-for="chartItem in [{value: 'line',label: '折线图'},{value: 'bar',label: '柱状图'}]"-->
      <!--                    :key="chartItem.value"-->
      <!--                    :label="chartItem.label"-->
      <!--                    :value="chartItem.value"-->
      <!--                />-->
      <!--              </el-select>-->
      <!--            </div>-->
      <div class="setting-item">
        <span>显示标记: </span>
        <el-switch active-text="是" inactive-text="否" v-model="settingItem.showSymbol"
                   @change="changeIsShowSymbol($event,settingItem)"/>

      </div>
      <div class="setting-item" v-if="settingItem.showSymbol===true">
        <span>标记: </span>
        <el-select v-model="settingItem.symbol" @change="switchSymbol($event,settingItem)">
          <el-option
              v-for="symbolItem in symbolList"
              :key="symbolItem.value"
              :label="symbolItem.label"
              :value="symbolItem.value"
          />
        </el-select>
      </div>
      <div class="setting-item" v-if="settingItem.showSymbol===true">
        <span>标记大小: </span>
        <el-input-number v-model="settingItem.symbolSize" :min="1" @change="changeSymbolSize($event,settingItem)"/>
      </div>
      <div class="setting-item">
        <span>阴影模糊大小: </span>
        <el-input-number v-model="settingItem.lineStyle.shadowBlur" :min="0" @change="changeShadowBlur($event,settingItem)"/>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
const props = defineProps({
  //基础设置列表
  basicList: {
    type: Array,
    default: []
  },
  //初始化加载echarts函数
  initCharts: {
    type: Function,
    default: null
  },
  //echarts的配置属性
  chartOption: {
    type: Array,
    default: []
  },
})
//图形标记列表
const symbolList = ref([
  {value: 'none', label: '不显示标记'},
  {value: 'circle', label: '圆形'},
  {value: 'rect', label: '矩形'},
  {value: 'triangle', label: '三角形'},
  {value: 'diamond', label: '钻石形'},
  {value: 'roundRect', label: '圆角矩形'},
  {value: 'pin', label: '圆钉形'},
  {value: 'arrow', label: '箭头形'},
])
let option = reactive(props.chartOption)

/**
 * 封装基本设置修改echarts属性事件
 * @param item 修改的项
 * @param type option.series中的属性名
 * @param val 获取修改的值
 */
const changeSingleParams = (item, type, val) => {
  option.series.forEach((sItem, sIndex) => {
    if (sItem.name === item.label) {
      getSeriesParams(type, sIndex, val)
    }
  })
}
/**
 * 根据changeSingleParams方法传的动态type,封装数据修改事件
 * @param type option.series中的属性名
 * @param index 修改某项属性的下标
 * @param val 获取修改的值
 */
const getSeriesParams = (type, index, val) => {
  let seriesItem = option.series[index]
  switch (type) {
    case 'type':
      return seriesItem.type = val
    case 'showSymbol':
      return seriesItem.showSymbol = val
    case 'symbol':
      return seriesItem.symbol = val
    case 'symbolSize':
      return seriesItem.symbolSize = val
    case 'shadowBlur':
      return seriesItem.lineStyle.shadowBlur = val
  }
}
/**
 * 基础设置:是否显示标记
 * @param val 修改的标记大小
 * @param item 修改的chart项
 */
const changeIsShowSymbol = (val, item) => {
  changeSingleParams(item, 'showSymbol', val)
  props.initCharts()
}

/**
 * 基础设置:切换chart的形状
 * @param val 修改的标记大小
 * @param item 修改的chart项
 */
const switchChart = (val, item) => {
  changeSingleParams(item, 'type', val)
  props.initCharts()
}
/**
 * 基础设置:修改标记
 * @param val 修改的标记大小
 * @param item 修改的chart项
 */
const switchSymbol = (val, item) => {
  changeSingleParams(item, 'symbol', val)
  props.initCharts()
}
/**
 * 基础设置:修改标记大小
 * @param val 修改的标记大小
 * @param item 修改的chart项
 */
const changeSymbolSize = (val, item) => {
  changeSingleParams(item, 'symbolSize', val)
  props.initCharts()
}

/**
 * 基础设置:修改图形阴影的模糊大小
 * @param val 修改的阴影的模糊大小
 * @param item 修改的chart项
 */
const changeShadowBlur = (val, item) => {
  changeSingleParams(item, 'shadowBlur', val)
  props.initCharts()
}
</script>
