<template>
  <div class="after-situation">
    <div class="card-title">
      卸载用户竞品流向
      <el-tooltip class="box-item" effect="light"
        content="「卸载用户同行业流向」基于全网数据和算法能力共同预测得出，与应用自身是否使用的服务无关。设置不允许他人关注后，您也将无法使用此功能。" placement="right-start">
        <svg style="margin-left: 8px;" width="14" height="14" viewBox="0 0 14 14" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
            fill="#1B4D88" fill-opacity="0.4" />
          <path
            d="M4 4.702C4 4.40333 4.02333 4.09533 4.07 3.778C4.126 3.46067 4.21933 3.17133 4.35 2.91C4.49 2.64867 4.67667 2.434 4.91 2.266C5.14333 2.08867 5.45133 2 5.834 2H7.794C8.102 2 8.37267 2.06533 8.606 2.196C8.84867 2.31733 9.04467 2.476 9.194 2.672C9.35267 2.868 9.474 3.092 9.558 3.344C9.65133 3.596 9.70733 3.848 9.726 4.1C9.754 4.352 9.74467 4.59467 9.698 4.828C9.66067 5.06133 9.59533 5.26667 9.502 5.444L7.934 8.314V9.574H6.324V8.146L7.808 5.556C7.892 5.416 7.948 5.234 7.976 5.01C8.01333 4.786 8.01333 4.57133 7.976 4.366C7.948 4.15133 7.878 3.96933 7.766 3.82C7.66333 3.67067 7.514 3.596 7.318 3.596H6.408C6.24933 3.596 6.11867 3.624 6.016 3.68C5.91333 3.72667 5.82933 3.80133 5.764 3.904C5.708 3.99733 5.67067 4.114 5.652 4.254C5.63333 4.38467 5.624 4.534 5.624 4.702H4ZM7.976 12.15H6.324V10.512H7.976V12.15Z"
            fill="white" />
        </svg>
      </el-tooltip>
    </div>
    <div class="content">
      <div class="connection-container">
        <!-- SVG曲线连接 -->
        <svg class="connection-lines" width="100%" height="100%" style="position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1;">
          <path 
            v-for="(item, index) in subItems" 
            :key="index"
            :d="generateConnectionPath(index)"
            stroke="#167AF0" 
            stroke-width="2" 
            fill="none" 
            opacity="0.6"
          />
        </svg>
        
        <el-row :gutter="12" style="padding: 0; row-gap: 12px; margin-bottom: 12px; position: relative; z-index: 2;">
          <div class="main">
            <div class="p1">流向关注应用</div>
            <div class="p2">流入人数：{{ count.total }}</div>
            <div class="p3">占比：{{ count.proportion }}%</div>
            <div class="ring-chart">
              <ProgressRing 
                :progress="count.proportion / 100"
                :size="96"
                background-color="rgba(239, 239, 239, 1)"
                progress-color="rgba(22, 122, 240, 1)"
                :stroke-width="10"
              />
              <div class="ring-text">{{ count.proportion }}%</div>
            </div>
          </div>
          <div class="sub">
            <div 
              v-for="(item, index) in subItems" 
              :key="index"
              class="sub-item"
            >
              <div class="inner" :style="{
                width: `${item.percentage}`,
              }"></div>
              <div class="sub-item-name">{{ item.name }}</div>
              <div class="sub-item-value">{{ item.value }}</div>
              <div class="sub-item-percentage">{{ item.percentage }}</div>
            </div>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import ProgressRing from '/@/views/count/components/ProgressRing.vue'
import { uninstallAfter } from '/@/api/count/churn'

// 定义sub-item的数据结构
interface SubItem {
  name: string
  value: string | number
  percentage: string
}

// 定义sub-items数据
const subItems = ref<SubItem[]>([])
const count = ref<{
  total: number,
  appName: string,
  proportion: number
}>({
  total: 0,
  appName: '',
  proportion: 0
})

// 生成连接路径的函数
const generateConnectionPath = (index: number) => {
  const mainX = 275
  const mainY = 90  // main卡片中心位置 (25 + 130/2)
  const subStartX = 495  // sub-item的左边位置
  const subItemHeight = 50
  const subItemMargin = 24
  const subY = 25 + index * (subItemHeight + subItemMargin) // sub-item中心位置
  
  // 计算中间点（一半距离）
  const midX = (mainX + subStartX) / 2  // 390
  
  const control1X = 320
  const control1Y = mainY - 100
  
  // 控制点2：平滑过渡到目标位置，确保曲线平滑地连接到sub-item左边
  const control2X = 360
  const control2Y = subY
  
  return `M ${mainX} ${mainY} C ${control1X} ${control1Y} ${control2X} ${control2Y} ${subStartX} ${subY}`
}

const getUninstallAfter = () => {
  uninstallAfter({
    cycle: 'week',
    type: '2',
  }).then((res) => {
    if(res.code === 0 && res.data?.length > 0) {
      res.data.forEach((item: any) => {
        count.value.total += item.count;
        count.value.proportion += parseFloat(item.proportion);
        subItems.value.push({
          name: item.appName,
          value: item.count,
          percentage: item.proportion + '%'
        })
      })
    }
  })
}

onMounted(() => {
  getUninstallAfter()
})
</script>

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

.after-situation {
  .card-title {
    vertical-align: middle;
  }

  .content {
    overflow-x: auto;
    padding: 10px;
  }
  
  .connection-container {
    position: relative;
    width: 895px;
    margin: 0 auto;
  }
  
  .main {
    width: 285px;
    height: 130px;
    border-radius: 15px;
    border: 1px solid rgba(22, 122, 240, 1);
    margin-right: 208px;
    background: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 25px;
    position: relative;
    
    .p1 {
      color: rgba(0, 0, 0, 1);
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 16px;
      line-height: 19px;
    }
    
    .p2, .p3 {
        color: rgba(100, 100, 100, 1);
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 17px;
    }

    .p3 {
      margin-bottom: 0;
    }
    
    .ring-chart {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .ring-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(0, 0, 0, 1);
        font-size: 14px;
      }
    }
  }

  .sub {
    .sub-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 400px;
      height: 50px;
      border-radius: 15px;
      border: 1px solid rgba(22, 122, 240, 1);
      background: #fff;
      margin-bottom: 24px;
      padding: 0 20px;
      color: rgba(0, 0, 0, 1);
      font-size: 14px;
      overflow: hidden;
      position: relative;

      .inner {
        width: 100%;
        background: rgba(22, 122, 240, 0.1);
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .sub-item-name {
        flex: 1;
      }
      
      .sub-item-value {
        // margin-right: 16px;
        text-align: right;
      }
      
      .sub-item-percentage {
        text-align: right;
        width: 66px;
      }
    }
  }
}
</style> 