<template>
  <div class="before-situation">
    <div class="card-title">卸载前使用粘性</div>
    <div class="content">
      <el-row :gutter="12" style="padding: 0; row-gap: 12px; margin-bottom: 12px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
            <div class="description" style="margin-bottom: 30px;">
              <p>卸载前最后使用App至卸载时间差</p>
              <p>最后使用App至卸载时间差=最终卸载App日期-末次启动App日期</p>
              <p>卸载前已经连续失活7天以上的用户占比：<span>{{ inactive7DaysPercentage }}%</span></p>
            </div>
            <div class="content-item">
              <HorizontalBarChart :data="chartData" :title="['时长分布', '占比']" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
            <div class="description">
              <p>卸载设备前7天使用次数分布</p>
              <p>卸载App前7天（含当日）启动App的次数</p>
              <p>设备卸载前仍具备高粘性占比：<span>{{ highFrequencyPercentage }}%</span></p>
            </div>
            <div class="content-item">
              <BarChart :title="'历史卸载次数'" :data="usageCountData" />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="padding: 0; row-gap: 12px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
            <div class="description" style="margin-bottom: 24px;">
              <p>卸载前体验干扰</p>
            </div>
            <div class="card-tabs">
              <div class="card-tab" :class="{ active: last7DaysTab === Last7DaysTab.CRASH }" @click="handleLast7DaysTabClick(Last7DaysTab.CRASH)">前7天崩溃次数</div>
              <div class="card-tab" :class="{ active: last7DaysTab === Last7DaysTab.PUSH }" @click="handleLast7DaysTabClick(Last7DaysTab.PUSH)">前7天推送接收</div>
            </div>
            <div class="content-item">
              <BarChart :title="'卸载设备数'" :data="experienceData" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
            <div class="description" style="margin-bottom: 24px;">
              <p>卸载前行为还原</p>
            </div>
            <div class="card-tabs">
              <div class="card-tab" :class="{ active: viewPagesTab === ViewPagesTab.HIGH_FREQUENCY_PAGES }" @click="handleViewPagesTabClick(ViewPagesTab.HIGH_FREQUENCY_PAGES)">高频浏览页面TOP10</div>
              <div class="card-tab" :class="{ active: viewPagesTab === ViewPagesTab.FINAL_VIEW_PAGES }" @click="handleViewPagesTabClick(ViewPagesTab.FINAL_VIEW_PAGES)">最终浏览页面TOP10</div>
            </div>
            <div class="content-item">
              <HorizontalBarChart :data="ViewPagesData" :title="['页面名称', '触发次数']" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BarChart from '/@/views/count/components/BarChart.vue'
import HorizontalBarChart from './HorizontalBarChart.vue'
import { uninstallAction, uninstallInterfere, uninstallBefore } from '/@/api/count/churn'

interface ChartData {
  name: string;
  value: number;
  percentage: string;
}

const chartData = ref<ChartData[]>([])
// 卸载前已经连续失活7天以上的用户占比
const inactive7DaysPercentage = ref(0);
const usageCountData = ref<ChartData[]>([]);
// 设备卸载前仍具备高粘性占比
const highFrequencyPercentage = ref(0);

const experienceData = ref([] as any[])
const ViewPagesData = ref([] as any[])

enum Last7DaysTab {
  CRASH = '1',
  PUSH = '2'
}

enum ViewPagesTab {
  HIGH_FREQUENCY_PAGES = '1',
  FINAL_VIEW_PAGES = '2'
}

const last7DaysTab = ref(Last7DaysTab.CRASH);
const viewPagesTab = ref(ViewPagesTab.HIGH_FREQUENCY_PAGES);

const getUninstallInterfere = () => {
  uninstallInterfere({
    cycle: 'week',
    type: last7DaysTab.value,
  }).then((res) => {
    if(res.code === 0 && res.data?.value?.length > 0) {
      experienceData.value = []
      res.data.value.forEach((item: any) => {
        const [key, val] = Object.entries(item)[0];
        experienceData.value.push({
          name: key,
          value: val
        })
      })
      experienceData.value.reverse();
    }
  })
}

const getUninstallAction = () => {
  uninstallAction({
    cycle: 'week',
    type: viewPagesTab.value,
  }).then((res) => {
    if(res.code === 0 && res.data?.value?.length > 0) {
      ViewPagesData.value = []
      res.data.value.forEach((item: any) => {
        const [key, val] = Object.entries(item)[0];
        ViewPagesData.value.push({
          name: key,
          value: val
        })
      })
      ViewPagesData.value.sort((a: any, b: any) => b.value - a.value)
    }
  })
}

const getUninstallBefore = () => {
  inactive7DaysPercentage.value = 0;
  highFrequencyPercentage.value = 0;
  usageCountData.value = [];
  chartData.value = [];

  uninstallBefore({
    cycle: 'week',
    type: '1',
  }).then((res) => {
    if(res.code === 0 && res.data?.uninstallTimeDiffs?.length > 0) {
      res.data.uninstallTimeDiffs.forEach((item: any) => {
        chartData.value.push({
          name: item.time,
          value: item.count,
          percentage: item.rate + '%'
        })
        if(item.time != '0-7天') {
          inactive7DaysPercentage.value += item.rate;
        }
      })
    }

    if(res.code === 0 && res.data?.uninstallBeforeSevens?.length > 0) {

      res.data.uninstallBeforeSevens.forEach((item: any) => {
        usageCountData.value.push({
          name: item.time,
          value: item.count,
          percentage: item.rate + '%'
        })
      
        if (item.time === '6次以上' || item.time === '5次') {
          highFrequencyPercentage.value += item.rate;
        }
      })

      usageCountData.value.reverse();
    }
  })
}

const handleLast7DaysTabClick = (tab: Last7DaysTab) => {
  last7DaysTab.value = tab
  getUninstallInterfere()
}

const handleViewPagesTabClick = (tab: ViewPagesTab) => {
  viewPagesTab.value = tab
  getUninstallAction()
}

onMounted(() => {
  getUninstallInterfere();
  getUninstallAction();
  getUninstallBefore();
})

</script>

<style scoped lang="scss">
@import '../../../styles/common.scss';
</style> 