<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;">
              您可以查看用户在任意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" :type="type" :form="form" />
      <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="'使用时长数据'" />
    </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: '00:01:17'
})

// 多系列数据对比
const usageTimeData = ref([
  {
    name: '1秒-3秒',
    values: []
  },
  {
    name: '4秒-10秒',
    values: []
  },
  {
    name: '11秒-30秒',
    values: []
  },
  {
    name: '31秒-1分',
    values: []
  },
  {
    name: '1分-3分',
    values: []
  },
  {
    name: '3分-10分',
    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}%`
    }
  })
})
</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>