<template>
  <el-drawer v-model="drawerVisible" direction="rtl">
    <template #header>
      <h4>高级设置</h4>
    </template>
    <template #default>
      <el-form :model="settingsForm" class="advanced-setting">
        <el-form-item label="是否点击图例改变图显示状态">
          <el-switch active-text="是" inactive-text="否" v-model="settingsForm.isClickLegendToShow"
                     @change="changeIsClickLegend"/>
        </el-form-item>
        <el-form-item label="是否显示提示框组件">
          <el-switch active-text="是" inactive-text="否" v-model="settingsForm.isShowTooltip"
                     @change="changeIsShowTooltip"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="cancelSettings">取消</el-button>
      <el-button type="primary" @click="confirmSettings">确认</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
const props = defineProps({
  //初始化加载echarts函数
  initCharts: {
    type: Function,
    default: null
  },
  //echarts的配置属性
  chartOption: {
    type: Array,
    default: []
  },
})
let option = reactive(props.chartOption)
//高级设置抽屉是否展开
const drawerVisible = ref(false)
//高级设置属性
const settingsForm = reactive({
  isClickLegendToShow: option.legend.selectedMode,//打开点击图例改变图显示状态
  isShowTooltip: option.tooltip.show//是否显示提示框组件
})
/**
 * 打开高级设置弹窗
 */
const showDrawer = () => {
  drawerVisible.value = true
}

/**
 * 高级设置: 取消按钮
 */
const cancelSettings = () => {
  drawerVisible.value = false
}
/**
 * 高级设置: 确认按钮
 */
const confirmSettings = () => {
  drawerVisible.value = false
  props.initCharts()
}

/**
 * 高级设置:打开点击图例改变图显示状态
 * @param val
 */
const changeIsClickLegend = (val) => {
  option.legend.selectedMode = val
}

/**
 * 高级设置:是否显示提示框组件
 * @param val
 */
const changeIsShowTooltip = (val) => {
  option.tooltip.show = val
}

defineExpose({
  showDrawer
})
</script>