<template>
  <div class="ma-content-block">
    <a-layout-content class="flex flex-col lg:h-full relative w-full">
      <a-card :bordered="false">
        <a-row>
          <a-col :flex="1">
            <a-form :model="searchForm" ref="searchFormRef" :auto-label-width="true">
              <a-row :gutter="10">
                <a-col :sm="8" :xs="24">
                  <a-form-item label="游戏" field="game_id">
                    <game-select v-model="searchForm.game_id" multiple />
                  </a-form-item>
                </a-col>
                <a-col :sm="8" :xs="24">
                  <a-form-item label="对比方式" field="compare_type">
                    <a-select
                      v-model="searchForm.compare_type"
                      :options="compareTypeOptions"
                      placeholder="请选择对比方式">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'day'">
                  <a-form-item label="对比日期1" field="compare_date1">
                    <a-range-picker v-model="searchForm.compare_date1" type="date" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'day'">
                  <a-form-item label="对比日期2" field="compare_date2">
                    <a-range-picker v-model="searchForm.compare_date2" type="date" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'hour'">
                  <a-form-item label="对比日期1" field="compare_date1_date">
                    <a-date-picker v-model="searchForm.compare_date1_date" type="date" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'hour'">
                  <a-form-item label="对比日期2" field="compare_date2_date">
                    <a-date-picker v-model="searchForm.compare_date2_date" type="date" allow-clear />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
          <a-divider style="height: 84px" direction="vertical" />
          <a-col flex="80px" :style="{ textAlign: 'right' }">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                {{ '搜索' }}
              </a-button>
              <a-button @click="resetSearch">
                <template #icon>
                  <icon-refresh />
                </template>
                {{ '重置' }}
              </a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-divider style="margin-top: 0; margin-bottom: 15px" />
      </a-card>
    </a-layout-content>

    <!-- 充值对比 -->
    <div class="p-10">
      <sa-chart height="300px" :option="payChartOptions" />
    </div>
    <!-- 消耗对比 -->
    <div class="p-10">
      <sa-chart height="300px" :option="costChartOptions" />
    </div>
    <!-- 注册对比 -->
    <div class="p-10">
      <sa-chart height="300px" :option="registerChartOptions" />
    </div>
    <!-- 登录对比 -->
    <div class="p-10">
      <sa-chart height="300px" :option="loginChartOptions" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import GameSelect from '@/components/game-select/index.vue'
import api from '@/views/v1/api/gameLog/analyse'
import dayjs from 'dayjs'
const payChartOptions = ref({})
const costChartOptions = ref({})
const registerChartOptions = ref({})
const loginChartOptions = ref({})
// 引用定义
const compareTypeOptions = ref([
  {
    label: '按天',
    value: 'day',
  },
  {
    label: '按小时',
    value: 'hour',
  },
])

// 搜索表单
const searchForm = ref({
  game_id: '',
  compare_type: 'day',
  compare_date1: [],
  compare_date2: [],
  compare_date1_date: '',
  compare_date2_date: '',
})

// 页面数据初始化
const initPage = async () => {
  searchForm.value.compare_date1[0] = dayjs().subtract(14, 'day').format('YYYY-MM-DD')
  searchForm.value.compare_date1[1] = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
  searchForm.value.compare_date2[0] = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
  searchForm.value.compare_date2[1] = dayjs().subtract(0, 'day').format('YYYY-MM-DD')
  searchForm.value.compare_date1_date = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
  searchForm.value.compare_date2_date = dayjs().format('YYYY-MM-DD')
  await search()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
})

// 搜索
const search = async () => {
  const { data } = await api.getChartData(searchForm.value)
  console.log(data)
  const colors = ['#5470C6', '#EE6666']
  payChartOptions.value = {
    color: colors,
    title: {
      text: '充值对比',
    },
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[1],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        data: data.days2,
      },
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[0],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        data: data.days1,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: data.data1.series,
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data1.pay,
      },
      {
        name: data.data2.series,
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data2.pay,
      },
    ],
  }
  costChartOptions.value = {
    color: colors,
    title: {
      text: '消耗对比',
    },
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[1],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        // prettier-ignore
        data: data.days2,
      },
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[0],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        // prettier-ignore
        data: data.days1,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: data.data1.series,
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data1.cost,
      },
      {
        name: data.data2.series,
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data2.cost,
      },
    ],
  }
  registerChartOptions.value = {
    color: colors,
    title: {
      text: '注册对比',
    },
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[1],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        // prettier-ignore
        data: data.days2,
      },
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[0],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        // prettier-ignore
        data: data.days1,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: data.data1.series,
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data1.reg,
      },
      {
        name: data.data2.series,
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data2.reg,
      },
    ],
  }
  loginChartOptions.value = {
    color: colors,
    title: {
      text: '登录对比',
    },
    tooltip: {
      trigger: 'none',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[1],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        // prettier-ignore
        data: data.days2,
      },
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: colors[0],
          },
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            },
          },
        },
        // prettier-ignore
        data: data.days1,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: data.data1.series,
        type: 'line',
        xAxisIndex: 1,
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data1.login,
      },
      {
        name: data.data2.series,
        type: 'line',
        smooth: true,
        emphasis: {
          focus: 'series',
        },
        data: data.data2.login,
      },
    ],
  }
}

// 重置
const resetSearch = async () => {
  initPage()
}
</script>

<script>
export default { name: 'v1/analyse/chart' }
</script>
