<template>
  <el-card shadow="none" style="padding: 10px 14px;">
    <div class="trend-container">
      <div class="card-title">
        使用间隔分布<el-tooltip class="box-item" effect="light" placement="right-start">
          <template #content>
            <div style="width: 300px;">
              您可以查看任意30天内用户相邻两次启动间隔的分布情况，并可以进行版本、渠道的筛选。<br />
              <span style="color: rgba(22, 122, 240, 1);">使用间隔：</span>同一用户相邻两次启动间隔的时间长度。在固定的查询时段内，若用户A仅在第2天、第3天、第7天启动过应用，则“1天”和“4天”的计数分别加1；若用户B仅在第4天启动过三次应用，则“0-24h”的计数加2；若用户C仅第10天启动过一次应用，则“首次”的计数加1<br />
              <span style="color: rgba(22, 122, 240, 1);">首次：</span>在固定的查询时段内只启动过一次的用户记为首次
            </div>
          </template>
          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
            <Svg name="export"></Svg>
          </span>
        </el-tooltip>
      </div>
      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" />
      <div class="chart-container">
        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
          style="height: 300px;" />
      </div>
      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
      <ExportToCSV :data="formatData" :columns="columns" :fileName="'使用间隔'" :hideTable="false" />
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import BarChart from '/@/views/count/components/BarChart.vue';
import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
import FormEcharts from '../components/FormEcharts.vue';
import Svg from '/@/components/Svg.vue';

const props = defineProps({
  type: {
    type: String,
    default: 'date'
  },
  form: {
    type: Object,
    default: () => ({})
  }
})

const averageValue = ref({
  time: '',
  value: ''
})

// 多系列数据对比
const usageTimeData = ref([
  {
    name: '首次',
    values: []
  },
  {
    name: '0-24h',
    values: []
  },
  {
    name: '1-2天',
    values: []
  },
  {
    name: '2-3天',
    values: []
  },
  {
    name: '3-4天',
    values: []
  },
  {
    name: '4-5天',
    values: []
  },
  {
    name: '5-6天',
    values: []
  },
])

const seriesNames = ref<string[]>([]);

const handleDateChange = (val: string[]) => {
  // 强制触发响应式更新
  seriesNames.value = [...val];

  // 创建新的数据对象以确保响应式更新
  const newData = usageTimeData.value.map((item: any) => ({
    ...item,
    values: val.map((date: string) => {
      const value = Math.floor(Math.random() * 100);
      return {
        value: value,
        percentage: `${value}%`
      }
    })
  }));

  console.log(newData);

  usageTimeData.value = newData;
}


// 定义表格列配置
const columns = [
  { prop: 'time', label: '使用间隔' },
  { prop: 'count', label: '启动次数' },
  { prop: 'percentage', label: '启动次数占比' }
];

const formatData = computed(() => {
  console.log(`formatData: `);
  console.log(usageTimeData.value);
  return usageTimeData.value.map((item: any) => {
    return {
      time: item.name,
      count: item.values[0]?.value || 0,
      percentage: `${item.values[0]?.value || 0}%`
    }
  })
})

defineExpose({
  handleDateChange
})
</script>
<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

svg {
  vertical-align: middle;
  margin: 0 0 0 12px;
}

.chart-container {
  margin: 0 auto;
  max-width: 1360px;
}
</style>