<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-switch active-text="是" inactive-text="否" v-model="settingItem.showBackground"
                   @change="changeIsShowBackground($event,settingItem)"/>

      </div>
      <div v-if="settingItem.showBackground!==false">
        <div class="setting-item">
          <span>柱条描边宽度: </span>
          <el-input-number v-model="settingItem.backgroundStyle.borderWidth" :min="0"
                           @change="changeBorderWidth($event,settingItem)"/>
        </div>

<!--        <div class="setting-item"  v-if="settingItem.backgroundStyle.borderWidth!==0">-->
<!--          <span>柱条描边颜色: </span>-->
<!--          <el-color-picker v-model="settingItem.backgroundStyle.borderColor"-->
<!--                           :color="settingItem.backgroundStyle.borderColor"-->
<!--                           @change="changeBorderColor($event,settingItem)"/>-->
<!--        </div>-->
        <div class="setting-item" v-if="settingItem.backgroundStyle.borderWidth!==0">
          <span>柱条描边类型: </span>
          <el-select v-model="settingItem.backgroundStyle.borderType" @change="switchBorderType($event,settingItem)">
            <el-option
                v-for="symbolItem in borderTypeList"
                :key="symbolItem.value"
                :label="symbolItem.label"
                :value="symbolItem.value"
            />
          </el-select>
        </div>
      </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: []
  },
})
let option = reactive(props.chartOption)
//图形标记列表
const borderTypeList = ref([
  {value: 'solid', label: '实线'},
  {value: 'dashed', label: '虚线'},
  {value: 'dotted', label: '点线'}
])
/**
 * 封装基本设置修改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 'showBackground':
      return seriesItem.showBackground = val
    case 'color':
      return seriesItem.backgroundStyle.color = val
    case 'borderWidth':
      return seriesItem.backgroundStyle.borderWidth = val
    case 'borderColor':
      return seriesItem.backgroundStyle.borderColor = val
    case 'borderType':
      return seriesItem.backgroundStyle.borderType = val
  }
}

/**
 * 基础设置:修改是否显示柱条背景
 * @param val 是否显示
 * @param item 修改的chart项
 */
const changeIsShowBackground = (val, item) => {
  changeSingleParams(item, 'showBackground', val)
  props.initCharts()
}

/**
 * 基础设置:修改柱条描边宽度
 * @param val 宽度
 * @param item 修改的chart项
 */
const changeBorderWidth = (val, item) => {
  changeSingleParams(item, 'borderWidth', val)
  props.initCharts()
}
/**
 * 基础设置:修改柱条的描边颜色
 * @param val 颜色
 * @param item 修改的chart项
 */
const changeBorderColor = (val, item) => {
  changeSingleParams(item, 'borderColor', val)
  props.initCharts()
}
/**
 * 基础设置:修改柱条的描边类型
 * @param val 类型
 * @param item 修改的chart项
 */
const switchBorderType = (val, item) => {
  changeSingleParams(item, 'borderType', val)
  props.initCharts()
}
</script>
