<template>
  <div>
    <el-form :model="queryParams"
      inline
      size="small">
      <el-form-item label="店铺">
        <el-select v-model="queryParams.brandList"
          @change="queryChangeFn"
          multiple
          clearable
          collapse-tags
          collapse-tags-tooltip>
          <el-option v-for="str in brandList"
            :label="str"
            :value="str">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="数据查看">
        <el-select v-model="queryParams.typeList"
          @change="queryChangeFn"
          multiple
          clearable
          collapse-tags>
          <el-option v-for="str in typeList"
            :label="str"
            :value="str">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期选择">
        <el-date-picker v-model="queryParams.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="queryChangeFn('date')">
        </el-date-picker>
      </el-form-item> -->
    </el-form>
    <div class="chart_wrap">
      <gradient-area :chartData="chartData"></gradient-area>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, nextTick } from 'vue'
import GradientArea from './GradientArea.vue';
import { getSycmListAPI } from '@/api'
import { generatorDayList, parseTime, getBrandColor } from '@/utils'

const queryParams = reactive({ // 查询表单
  brandList: [],
  date: [new Date().setDate(new Date().getDate() - 30), new Date().setDate(new Date().getDate() - 1)],
  // typeList: []
})
const brandList = ref([]) // 直播间列表
const typeList = ref(['支付买家数', '交易增速', '独立访客范围', '流量增速'])
const allChartData = reactive({ // 图表所有数据
  series: [],
  xAxis: [],
  legend: []
})
const chartData = reactive({ // 图表内要用的数据
  series: [],
  xAxis: [],
  legend: []
})

// 获取数据
const getList = async () => {
  allChartData.series = []
  allChartData.legend = []
  const { data } = await getSycmListAPI({
    startDate: parseTime(queryParams.date[0], '{y}-{m}-{d}'),
    endDate: parseTime(queryParams.date[1], '{y}-{m}-{d}'),
  })
  // 保存到数据源
  data.forEach(list => {
    // list: 每个店铺数据集合
    // 公共的配置
    let commonObj = {
      type: 'line',
      // stack: 'Total',
      smooth: true,
      // stackStrategy: 'all',
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
    }
    let jyzsObj = {
      ...commonObj,
      itemStyle: {
        color: getBrandColor(list[0]?.platformStore, 0)
      },
      areaStyle: {
        opacity: 0.8,
        color: getBrandColor(list[0]?.platformStore, 0)
      },
      name: list[0]?.platformStore + '-交易增速',
      data: []
    }
    let llzsObj = {
      ...commonObj,
      itemStyle: {
        color: getBrandColor(list[0]?.platformStore, 1)
      },
      areaStyle: {
        opacity: 0.8,
        color: getBrandColor(list[0]?.platformStore, 1)
      },
      name: list[0]?.platformStore + '-流量增速',
      data: [],
    }
    let uvObj = {
      ...commonObj,
      itemStyle: {
        color: getBrandColor(list[0]?.platformStore, 2)
      },
      areaStyle: {
        opacity: 0.8,
        color: getBrandColor(list[0]?.platformStore, 2)
      },
      name: list[0]?.platformStore + '-独立访客范围',
      data: []
    }
    let zfmjObj = {
      ...commonObj,
      itemStyle: {
        color: getBrandColor(list[0]?.platformStore, 3)
      },
      areaStyle: {
        opacity: 0.8,
        color: getBrandColor(list[0]?.platformStore, 3)
      },
      name: list[0]?.platformStore + '-支付买家数',
      data: []
    }
    // list: 循环每一天的数据
    // 按照日期添加数据
    allChartData.xAxis.forEach(date => {
      const findObj = list.find(o => o.date.includes(date))
      if (findObj) {
        jyzsObj.data.push((findObj.jyzsPeakTotal + findObj.jyzsUnderTotal) / 2)
        llzsObj.data.push((findObj.llzsPeakTotal + findObj.llzsUnderTotal) / 2)
        uvObj.data.push((findObj.uvPeakTotal + findObj.uvUnderTotal) / 2)
        zfmjObj.data.push((findObj.zfmjPeakTotal + findObj.zfmjUnderTotal) / 2)
      } else {
        jyzsObj.data.push(0)
        llzsObj.data.push(0)
        uvObj.data.push(0)
        zfmjObj.data.push(0)
      }
    })
    allChartData.legend.push(zfmjObj.name, uvObj.name, llzsObj.name, jyzsObj.name)
    allChartData.series.push(zfmjObj, uvObj, llzsObj, jyzsObj)
  })
  return data
}

// 筛选数据
const filterData = () => {
  let series = allChartData.series
  let legend = allChartData.legend
  if (queryParams.brandList.length > 0) {
    // 选择了店铺，筛选
    series = series.filter(item => {
      return queryParams.brandList.find(o => o === item.name.split('-')[0])
    })
    legend = legend.filter(name => {
      return queryParams.brandList.find(o => o === name.split('-')[0])
    })
  }
  if (queryParams.typeList.length > 0) {
    // 选择了数据类型，筛选
    series = series.filter(item => {
      return queryParams.typeList.find(o => o === item.name.split('-')[1])
    })
    legend = legend.filter(name => {
      return queryParams.typeList.find(o => o === name.split('-')[1])
    })
  }
  // 展示所有
  chartData.legend = legend
  chartData.series = series
  chartData.xAxis = allChartData.xAxis
}

// 默认打开页面请求一次所有数据，并保存在数据源
(function init() {
  nextTick(async () => {
    // // 初始化时间
    // allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
    const data = await getList()
    console.log(data)
    // 直播间列表
    brandList.value = data.map(list => list[0].platformStore)
    // 初始化筛选条件（默认请求第一个店铺的第一类型数据）
    queryParams.brandList = [data[0][0].platformStore]
    queryParams.typeList = [typeList.value[0]]
    // 筛选图表数据
    filterData()
  })
})();

// 查询条件改变
const queryChangeFn = async (arg) => {
  if (arg === 'date' && !queryParams.date) return
  if (arg === 'date' && queryParams.date) {
    // 时间变化，并且有值，需要重新请求
    allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
    await getList()
  }
  // 数据筛选
  filterData()
}

</script>

<style scoped></style>