<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, reactive, Ref, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { useShopInfo } from '/@/stores/shopInfo'
import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'
import { createCrudOptions } from '/@/views/adManage/sp/targets/crud'
import { useFs } from '@fast-crud/fast-crud'
import { getCardTotalData, getChartTotalData } from '/@/views/adManage/ad-overview/total/api'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'

const loading = ref(true)
const cardLoading = ref(true)
const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
const tabActiveName = ref('Campaigns')
const queryParams = ref({
  profileId: profile.value.profile_id,
  dateRange,
})
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })

// 广告类型下拉框
const selectedPortfolios = ref('SP')
const portfolios = [
  {
    value: 'SP/SB/SD',
    label: 'SP/SB/SD',
  },
  {
    value: 'SP',
    label: 'SP',
  },
  {
    value: 'SB',
    label: 'SB',
  },
  {
    value: 'SD',
    label: 'SD',
  },
  {
    value: 'DSP',
    label: 'DSP',
    disabled: true,
  },
]

// 发送请求获取数据
async function setTotalData() {
  try {
    cardLoading.value = true
    const resp = await getCardTotalData({
      startDate: dateRange.value[0],
      endDate: dateRange.value[1],
      profileId: queryParams.value.profileId,
    })
    state.homeOne[0].num1 = resp.data.Spend
    state.homeOne[0].compareNum = resp.data.prevSpend
    state.homeOne[0].num2 = resp.data.gapSpend
    state.homeOne[1].num1 = resp.data.TotalSales
    state.homeOne[1].compareNum = resp.data.prevTotalSales
    state.homeOne[1].num2 = resp.data.gapTotalSales
    state.homeOne[2].num1 = resp.data.TotalPurchases
    state.homeOne[2].compareNum = resp.data.prevTotalPurchases
    state.homeOne[2].num2 = resp.data.gapTotalPurchases
    state.homeOne[3].num1 = resp.data.ACOS
    state.homeOne[3].compareNum = resp.data.prevACOS
    state.homeOne[3].num2 = resp.data.gapACOS
  } catch (error) {
    console.log('获取数据失败:', error)
  } finally {
    cardLoading.value = false
  }
}

let optionSource
async function setChartTotalData() {
  try {
    loading.value = true
    const resp = await getChartTotalData({
      startDate: dateRange.value[0],
      endDate: dateRange.value[1],
      profileId: queryParams.value.profileId,
    })
    optionSource = resp.data
    await setChartOptions()
    return resp.data
  } catch (error) {
    console.log('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  // crudExpose.doRefresh()
  setTotalData()
  setChartTotalData()
})

watch(
  queryParams,
  async () => {
    try {
      loading.value = true
      await initLine()
      await setTotalData()
      await setChartTotalData()
      loading.value = false
    } catch (error) {
      console.log(error)
    }
  },
  { deep: true }
)

// 卡片相关功能
const state = reactive({
  homeOne: [
    {
      num1: '',
      compareNum: '',
      num2: '',
      cardTitle: '花费',
      num4: 'fa fa-meetup',
      // color1: '#FF6462',
      color2: '--next-color-primary-lighter',
      color3: '--el-color-primary',
    },
    {
      num1: '',
      compareNum: '',
      num2: '',
      cardTitle: '销售额',
      num4: 'iconfont icon-ditu',
      color2: '--next-color-success-lighter',
      color3: '--el-color-success',
    },
    {
      num1: '',
      compareNum: '',
      num2: '',
      cardTitle: '订单数',
      num4: 'iconfont icon-zaosheng',
      color2: '--next-color-warning-lighter',
      color3: '--el-color-warning',
    },
    {
      num1: '',
      compareNum: '',
      num2: '',
      cardTitle: 'ACOS',
      num4: 'fa fa-github-alt',
      color2: '--next-color-danger-lighter',
      color3: '--el-color-danger',
    },
  ],

  myCharts: [],
  charts: {
    theme: '',
    bgColor: '',
    color: '#303133',
  },
})

// 折线图相关功能
const chartRefOne = ref()
let chartObjOne
const option = {
  title: { text: '花费 & 销售额' },
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    selected: {}, // 控制显隐
    data: ['花费', '销售额'],
    show: true,
  },
  grid: {
    top: 50,
    right: 65,
    bottom: 30,
    left: 65,
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3a83f7', // 第一个 Y 轴的颜色
        },
      },
    },
    {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f19a37', // 第二个 Y 轴的颜色
        },
      },
    },
  ],
  series: [
    {
      name: '花费',
      yAxisIndex: 0,
      encode: {
        x: 'Name',
        y: 'Spend',
      },
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#3a83f7',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
            },
            {
              offset: 0.2,
              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    {
      name: '销售额',
      yAxisIndex: 1,
      encode: {
        x: 'Name',
        y: 'TotalSales',
      },
      type: 'line',
      smooth: true,
      lineStyle: {
        type: 'dashed',
      },
      itemStyle: {
        color: '#f19a37',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(241, 154, 55, 0.5)', // 顶部半透明
            },
            {
              offset: 0.2,
              color: 'rgba(241, 154, 55, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(241, 154, 55, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
}

const chartRefAcos = ref()
let chartObjAcos
const option2 = {
  title: { text: 'ACOS' },
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    selected: {}, // 控制显隐
    data: ['ACOS'],
    show: true,
  },
  grid: {
    top: 50,
    right: 65,
    bottom: 30,
    left: 65,
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3a83f7',
        },
      },
    },
  ],
  series: [
    {
      name: 'ACOS',
      yAxisIndex: 0,
      encode: {   // 根据dataset.source的名称映射到相应的维度
        x: 'Name',
        y: 'ACOS',
      },
      type: 'line',
      smooth: true,
      lineStyle: {
        type: 'dashed',
      },
      legendHoverLink: false,
      itemStyle: {
        color: '#3a83f7',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
            },
            {
              offset: 0.2,
              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
}

const chartRefCPCandCTR = ref()
let chartObjCPCandCTR
const option3 = {
  title: { text: '点击成本 & 点击率' },
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    selected: {}, // 控制显隐
    data: ['点击成本', '点击率'],
    show: true,
  },
  grid: {
    top: 50,
    right: 65,
    bottom: 30,
    left: 65,
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3a83f7', // 第一个 Y 轴的颜色
        },
      },
    },
    {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f19a37', // 第二个 Y 轴的颜色
        },
      },
    },
  ],
  series: [
    {
      name: '点击成本',
      yAxisIndex: 0,
      encode: {
        x: 'Name',
        y: 'CPC',
      },
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#3a83f7',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
            },
            {
              offset: 0.2,
              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    {
      name: '点击率',
      yAxisIndex: 1,
      encode: {
        x: 'Name',
        y: 'CTR',
      },
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#f19a37',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(241, 154, 55, 0.5)', // 顶部半透明
            },
            {
              offset: 0.2,
              color: 'rgba(241, 154, 55, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(241, 154, 55, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
}

const chartRefTotalPurchases = ref()
let chartObjTotalPurchases
const option4 = {
  title: { text: '订单数' },
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    selected: {}, // 控制显隐
    data: ['订单数'],
    show: true,
  },
  grid: {
    top: 50,
    right: 65,
    bottom: 30,
    left: 65,
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3a83f7',
        },
      },
    },
  ],
  series: [
    {
      name: '订单数',
      yAxisIndex: 0,
      encode: {
        x: 'Name',
        y: 'TotalPurchases',
      },
      type: 'line',
      smooth: true,
      lineStyle: {
        type: 'dashed',
      },
      legendHoverLink: false,
      itemStyle: {
        color: '#3a83f7',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
            },
            {
              offset: 0.2,
              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
}

const chartRefImpandCli = ref()
let chartObjImpandCli
const option5 = {
  title: { text: '曝光量 & 点击量' },
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    selected: {}, // 控制显隐
    data: ['曝光量', '点击量'],
    show: true,
  },
  grid: {
    top: 50,
    right: 65,
    bottom: 30,
    left: 65,
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
  },
  yAxis: [
    {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3a83f7', // 第一个 Y 轴的颜色
        },
      },
    },
    {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f19a37', // 第二个 Y 轴的颜色
        },
      },
    },
  ],
  series: [
    {
      name: '曝光量',
      yAxisIndex: 0,
      encode: {
        x: 'Name',
        y: 'Impression',
      },
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#3a83f7',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(58, 131, 247, 0.5)', // 顶部不透明
            },
            {
              offset: 0.2,
              color: 'rgba(58, 131, 247, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(58, 131, 247, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
    {
      name: '点击量',
      yAxisIndex: 1,
      encode: {
        x: 'Name',
        y: 'Click',
      },
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#f19a37',
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(241, 154, 55, 0.5)', // 顶部半透明
            },
            {
              offset: 0.2,
              color: 'rgba(241, 154, 55, 0.2)', // 中间更透明
            },
            {
              offset: 1,
              color: 'rgba(241, 154, 55, 0)', // 底部完全透明
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
}

function initLine() {
  if (chartRefOne.value) {
    chartObjOne = echarts.init(chartRefOne.value)
    chartObjAcos = echarts.init(chartRefAcos.value)
    chartObjCPCandCTR = echarts.init(chartRefCPCandCTR.value)
    chartObjTotalPurchases = echarts.init(chartRefTotalPurchases.value)
    chartObjImpandCli = echarts.init(chartRefImpandCli.value)
  }
}

function setChartOptions() {
  nextTick(() => {
    const chartOptions = [
      { chart: chartObjOne, option: option },
      { chart: chartObjAcos, option: option2 },
      { chart: chartObjCPCandCTR, option: option3 },
      { chart: chartObjTotalPurchases, option: option4 },
      { chart: chartObjImpandCli, option: option5 },
    ]
    // 通过循环设置图表选项
    chartOptions.forEach((chartOption) => {
      try {
        chartOption.option.dataset.source = optionSource  // optionSource 是一个数组，里面包含了所有的数据
        chartOption.chart.setOption(chartOption.option)
      } catch (error) {
        console.error('设置图表选项失败:', error)
      }
    })
  })
}

function resizeChart() {
  if (chartObjOne) {
    chartObjOne.resize()
    chartObjAcos.resize()
    chartObjCPCandCTR.resize()
    chartObjTotalPurchases.resize()
    chartObjImpandCli.resize()
  }
}

onMounted(async () => {
  initLine()
  window.addEventListener('resize', resizeChart) // 监听窗口大小变化，调整图表大小
  setTimeout(() => {
    resizeChart()
  }, 10)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
})
</script>

<template>
  <div>
    <div class="container-main">
      <div class="overview-tabs">
        <DateRangePicker v-model="dateRange"></DateRangePicker>
        <el-select
          v-model="selectedPortfolios"
          placeholder="SP"
          style="width: 200px"
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3">
          <el-option
            v-for="info of portfolios"
            :key="info.value"
            :label="info.label"
            :value="info.value"
            :disabled="info.disabled"></el-option>
        </el-select>
      </div>
      <!-- 卡片内容 不要删除这个类 -->
      <div class="home-container" style="margin-top: 0" v-loading="cardLoading">
        <el-row :gutter="15" class="home-card-one mb15">
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
            :lg="6"
            :xl="6"
            v-for="(v, k) in state.homeOne"
            :key="k"
            :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
            <div class="home-card-item flex">
              <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
                <div class="flex-auto" style="margin-top: -10px">
                  <div class="mt10">{{ v.cardTitle }}</div>
                  <div class="font30">{{ v.num1 }}</div>
                  <div style="display: inline-block; margin-right: 10px; margin-left: 3px">
                    {{ v.compareNum }}
                  </div>
                  <el-icon
                    :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }"
                    style="display: inline-block; padding-top: 2px">
                    <template v-if="String(v.num2).includes('-')">
                      <Bottom />
                      <!-- num2 是负数时显示向下箭头 -->
                    </template>
                    <template v-else>
                      <Top />
                      <!-- num2 不是负数时显示向上箭头 -->
                    </template>
                  </el-icon>
                  <span class="l-indent" :style="{ color: String(v.num2).includes('-') ? '#59b939' : '#e36f53' }"
                    >{{ v.num2 }}%</span
                  >
                </div>
                <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
                  <i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 折线图 -->
      <el-card v-loading="loading" style="margin-top: -5px">
        <div style="height: 350px" ref="chartRefOne"></div>
      </el-card>
      <el-row :gutter="5" style="margin-top: 10px">
        <el-col :span="12">
          <el-card v-loading="loading">
            <div style="height: 350px" ref="chartRefAcos"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card v-loading="loading">
            <div style="height: 350px" ref="chartRefCPCandCTR"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 10px">
        <el-col :span="12">
          <el-card v-loading="loading">
            <div style="height: 350px" ref="chartRefTotalPurchases"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card v-loading="loading">
            <div style="height: 350px" ref="chartRefImpandCli"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--<el-button @click="changeCardData">按钮</el-button>-->
  </div>
</template>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
  overflow: hidden;
  margin-top: 10px;

  .home-card-one,
  .home-card-two,
  .home-card-three {
    .home-card-item {
      width: 100%;
      height: 130px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: var(--el-box-shadow-light);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);

      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }

      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;

        i {
          color: var(--el-text-color-placeholder);
        }
      }

      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }

  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/10) + s;
      }
    }
  }

  .home-card-two,
  .home-card-three {
    .home-card-item {
      height: 400px;
      width: 100%;
      overflow: hidden;

      .home-monitor {
        height: 100%;

        .flex-warp-item {
          width: 25%;
          height: 111px;
          display: flex;

          .flex-warp-item-box {
            margin: auto;
            text-align: center;
            color: var(--el-text-color-primary);
            display: flex;
            border-radius: 5px;
            background: var(--next-bg-color);
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background: var(--el-color-primary-light-9);
              transition: all 0.3s ease;
            }
          }

          @for $i from 0 through $homeNavLengh {
            .home-animation#{$i} {
              opacity: 0;
              animation-name: error-num;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
              animation-delay: calc($i/10) + s;
            }
          }
        }
      }
    }
  }
}

.down {
  margin-top: 10px;
}

.l-indent {
  margin-left: 1px;
}
</style>
