<template>
   <div class="layout-padding">
    <div class="behavior">
      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <LayoutHeader title="卸载洞察" :style="{ marginBottom: '0' }">
            <template #tooltip-content>
              卸载洞察展示您每周卸载设备的活跃特征，如从安装到卸载的生命周期时长分布、卸载前活跃情况、末次活跃至卸载行为的时间差分布、卸载设备终端特征。
            </template>
            <template #content>
              <div class="content">
              </div>
            </template>
          </LayoutHeader>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card shadow="none">
            <div class="active-situation">
              <div class="card-title">卸载设备活跃情况</div>
              <div class="content">

                <el-row :gutter="12" style="padding: 0; row-gap: 12px;">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
                    <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
                      <div class="description" style="margin-bottom: 25px;">
                        <p>安装至卸载存量时长分布</p>
                        <p>存量时长=最近卸载日期-最近卸载前的安装日期</p>
                        <p>用户卸载集中在安装App后：<span>{{ maxValue.name }}</span></p>
                      </div>
                      <div class="content-item">
                        <PieChart :data="newData" :total="acount" />
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
                    <div class="el-card" style="flex: 1; overflow: visible; padding: 24px 40px; height: 475px;">
                      <div class="description">
                        <p>历史卸载次数分布</p>
                        <p>当前周的卸载设备，按当前是第几次卸载App进行分布</p>
                        <p>历史上<span>{{ historyUninstallPercentage }}%</span>卸载设备会反复卸载。</p>
                      </div>
                      <div class="content-item">
                        <BarChart title="历史卸载次数" :data="historyUninstallData" />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="padding: 0 12px 12px;">
        <div class="tabs">
          <div class="tab" :class="{ active: activeTab === 'before' }" @click="activeTab = 'before'">卸载前状态</div>
          <div class="tab" :class="{ active: activeTab === 'after' }" @click="activeTab = 'after'">卸载后流向</div>
          <div class="tab" :class="{ active: activeTab === 'system' }" @click="activeTab = 'system'">设备系统分布</div>
        </div>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card shadow="none">
            <BeforeUninstallStatus v-if="activeTab === 'before'" />
            <AfterUninstallStatus v-if="activeTab === 'after'" />
            <SystemDistribution v-if="activeTab === 'system'" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" name="churnBehavior" setup>
import BarChart from '/@/views/count/components/BarChart.vue'
import BeforeUninstallStatus from './components/BeforeUninstallStatus.vue'
import AfterUninstallStatus from './components/AfterUninstallStatus.vue'
import SystemDistribution from './components/SystemDistribution.vue'
import PieChart from './components/PieChart.vue'
import LayoutHeader from '/@/views/count/components/LayoutHeader.vue'
import { uninstallActive } from '/@/api/count/churn'

interface LegendItem {
  name: string
  value: number
  percentage: string
}

interface BarItem {
  name: string
  value: number
  percentage: string
}

const activeTab = ref('before');
const acount = ref(0);
const newData = ref<LegendItem[]>([]);
const maxValue = ref<LegendItem>({ name: '', value: 0, percentage: '' });
const historyUninstallData = ref<BarItem[]>([]);
const historyUninstallPercentage = ref(0);

onMounted(() => {
  uninstallActive({
    cycle: 'week',
    type: '4',
  }).then((res) => {
    console.log(res);
    historyUninstallData.value = [];
    newData.value = [];
    maxValue.value = { name: '', value: 0, percentage: '' };
    acount.value = 0;
    historyUninstallPercentage.value = 0;

    res?.data?.lifecycleDistribution.forEach((item: any) => {
      acount.value += item.uninstallCount;
      if (item.uninstallCount > maxValue.value.value) {
        maxValue.value = {
          name: item.time,
          value: item.uninstallCount,
          percentage: `${item.uninstallRate}%`
        };
      }
      newData.value.push({
        name: item.time,
        value: item.uninstallCount,
        percentage: `${item.uninstallRate}%`
      })
    })

    res?.data?.uninstallDistribution.forEach((item: any) => {
      historyUninstallPercentage.value += item.rate;
      historyUninstallData.value.push({
        name: item.count,
        value: item.num,
        percentage: `${item.rate}%`
      })
    })
    historyUninstallData.value.reverse();
  })
})
</script>
<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

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

.behavior {
  font-family: Source Han Sans SC;

  .top-info {
    color: rgba(18, 18, 18, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: -2.5px 0;

    .title {
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      padding: 4px 0;
    }

    .data-source-status {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: rgba(18, 18, 18, 1);
      padding: 4px 0;
    }
  }

  .active-situation {
    padding: 10px 14px;

    .content {}
  }

  .tabs {
    display: flex;
    padding: 0 6px;

    .tab {
      cursor: pointer;
      height: 42px;
      line-height: 42px;
      color: rgba(100, 100, 100, 1);
      font-weight: 500;
      font-style: Medium;
      font-size: 14px;
      padding: 0 25px;
      border-left: 1px solid rgba(221, 228, 237, 1);
      border-top: 1px solid rgba(221, 228, 237, 1);
      background-color: #ffffff;

      &:last-child {
        border-right: 1px solid rgba(221, 228, 237, 1);
      }
    }

    .active {
      color: rgba(22, 122, 240, 1);
      background-color: rgba(232, 242, 254, 1);
    }
  }

}
</style>
