import { CSelectType } from '@/types/HomeTypes'
import type {
  BaseOption,
  DateOption,
  CSelectInfo,
  CSelectRadio,
  CSelectDate,
  CSelectLegend,
  CSelectMutipleTag,
} from '@/types/HomeTypes'
import { reactive } from 'vue'

export function useAnalysisSelect() {
  //  总览数据的选择框的信息格式
  interface AnalysisSelectInfo extends CSelectInfo {
    mediaSelect: CSelectRadio
    dateSelect: CSelectDate
    customIndicatorSelect: CSelectRadio
  }

  // 图例信息格式
  interface LegendSelectInfo extends CSelectInfo {
    leftLegned: CSelectLegend
    rightLegned: CSelectLegend
  }
  // 左侧工具栏选择信息格式
  interface LeftToolsSelectInfo extends CSelectInfo {
    dataSource: CSelectRadio
  }

  // 右侧工具栏选择信息格式
  interface RightToolsSelectInfo extends CSelectInfo {
    dataCategory: CSelectRadio
  }

  // 媒体选择选项
  const mediaSelectOptions = reactive<Array<BaseOption>>([
    {
      label: '全部媒体',
      value: 'all',
    },
    {
      label: '全部媒体',
      value: 'all',
    },
  ])

  // 日期选择
  const dateSelectOptions = reactive<Array<DateOption>>([
    {
      label: '今天',
      value: new Date(),
    },
    {
      label: '昨天',
      value: new Date(),
    },
  ])

  // 项目选择
  const projSelectOptions = reactive<Array<BaseOption>>([
    {
      label: '测试1',
      value: 'ce1',
    },
    {
      label: '测试2',
      value: 'ce2',
    },
    {
      label: '测试3',
      value: 'ce3',
    },
    {
      label: '测试4',
      value: 'ce4',
    },
    {
      label: '测试5',
      value: 'ce5',
    },
    {
      label: '测试6',
      value: 'ce6',
    },
  ])

  // 广告数据选择栏数据
  const analysisSelectInfo = reactive<AnalysisSelectInfo>({
    mediaSelect: {
      type: CSelectType.Radio,
      name: 'media',
      value: mediaSelectOptions[0].value,
      options: mediaSelectOptions,
    },
    dateSelect: {
      type: CSelectType.Radio,
      name: 'date',
      value: dateSelectOptions[0].value,
      options: dateSelectOptions,
    },
    customIndicatorSelect: {
      tagText: '全部项目',
      type: CSelectType.Radio,
      name: 'project',
      value: projSelectOptions[0].value,
      options: projSelectOptions,
    },
  })

  //   左边图例的选项
  const leftLegnedOptions = reactive<Array<BaseOption>>([
    {
      label: '消耗',
      value: 'cost',
    },
    {
      label: '展示数',
      value: 'show_count',
    },
  ])

  // 右边图例选项
  const rightLegnedOptions = reactive<Array<BaseOption>>([
    {
      label: '支付数',
      value: 'pay_count',
    },
    {
      label: '转化率',
      value: 'convert_rate',
    },
  ])

  // 图例的选择框信息
  const legendSelectInfo = reactive<LegendSelectInfo>({
    leftLegned: {
      type: CSelectType.RadioLegend,
      name: 'leftLegned',
      value: leftLegnedOptions[0].value,
      options: leftLegnedOptions,
      color: '#bfdaff',
    },
    rightLegned: {
      type: CSelectType.RadioLegend,
      name: 'rightLegned',
      value: rightLegnedOptions[1].value,
      options: rightLegnedOptions,
      color: '#f9b65d',
    },
  })

  // 数据来源选项
  const dataSourceOptions = reactive<Array<BaseOption>>([
    {
      label: '消耗',
      value: 'consume',
    },
  ])

  // 左侧工具栏选择框信息
  const leftToolsSelectInfo = reactive<LeftToolsSelectInfo>({
    dataSource: {
      type: CSelectType.Radio,
      name: 'dataSource',
      value: dataSourceOptions[0].value,
      options: dataSourceOptions,
    },
  })

  //  数据分类选项
  const categoryOptions = reactive<Array<BaseOption>>([
    {
      label: '汇总',
      value: 'all',
    },
    {
      label: 'Top5产品',
      value: 'top5',
    },
  ])

  //   右侧工具栏选择框信息
  const rightToolsSelectInfo = reactive<RightToolsSelectInfo>({
    dataCategory: {
      type: CSelectType.Radio,
      name: 'dataCategory',
      value: categoryOptions[0].value,
      options: categoryOptions,
    },
  })

  return {
    analysisSelectInfo,
    legendSelectInfo,
    leftToolsSelectInfo,
    rightToolsSelectInfo,
  }
}