<template>
  <div class="layout-padding device">
    <el-row :gutter="12" style="padding:0 12px 0; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <SelectForm :tabList="tabList" :title="'网络及运营商'" :form="form" />
      </el-col>
    </el-row>

    <el-row :gutter="12" style="padding: 12px 12px 12px; row-gap: 12px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card shadow="none">
          <div class="device-container">
            <div class="title">TOP10联网方式</div>
            <div class="card-tabs">
              <div class="card-tab" :class="{ active: echartsTab === 'newUser' }" @click="handleTabClick('newUser')">
                新增用户
              </div>
              <div class="card-tab" :class="{ active: echartsTab === 'startCount' }"
                @click="handleTabClick('startCount')">启动次数
              </div>
            </div>
            <!-- 横条图 -->
            <div class="chart-container">
              <HorizontalBarChart :data="newUserData" :color="'#167af0'" height="270px" :smooth="false"
                :area-style="true" :title="title" :showLegend="true" />
            </div>
          </div>
          
          <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />

          <div class="chart-container">
            <ExportToCSV :size="10" :tableStyle="{ width: '100%', maxWidth: '1476px', margin: '0 auto' }"
              :hideTable="false" :data="formatData" :columns="columns" :fileName="title + '- 网络及运营商'" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" name="device" setup>
import { ref, computed } from 'vue'
import HorizontalBarChart from '/@/views/count/components/HorizontalBarChart.vue'
import { formatDate } from '/@/utils/formatTime'
import ExportToCSV from '/@/views/count/components/ExportToCSV.vue'
import SelectForm from '../components/selectForm.vue'

const tabList = ref([
  { label: '联网用户', value: 1 },
  { label: '运营商', value: 2 }
])

const form = ref({
  tab: 1,
  version: 'all',
  channel: 'all',
  dateArray: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()]
})

const echartsTab = ref('newUser');

const handleTabChange = (tab: number) => {
  form.value.tab = tab;
}

const handleTabClick = (tab: string) => {
  echartsTab.value = tab
}

// 新增用户数据
const newUserData = ref([
  { name: 'WIFI', value: 22 },
  { name: '4G', value: 18 },
  { name: '3G', value: 28 },
  { name: '2G', value: 32 },
  { name: '其他', value: 38 },
  { name: '未知', value: 42 },
])

const title = computed(() => {
  const startDate = formatDate(new Date(form.value.dateArray[0]), 'YYYY-mm-dd')
  const endDate = formatDate(new Date(form.value.dateArray[1]), 'YYYY-mm-dd')
  return echartsTab.value === 'newUser'
    ? startDate + ' - ' + endDate + ' 新增用户'
    : startDate + ' - ' + endDate + ' 启动次数'
})

// 定义表格列配置
const columns = [
  { prop: 'network', label: '联网方式' },
  { prop: 'newUser', label: '新增用户' },
  { prop: 'newUserPercentage', label: '新增用户占比' },
  { prop: 'startCount', label: '启动次数' },
  { prop: 'startCountPercentage', label: '启动次数占比' }
];

const formatData = computed(() => {
  console.log(`formatData: `);
  console.log(newUserData.value);
  return newUserData.value.map((item: any) => {
    return {
      network: item.name,
      newUser: item.value,
      newUserPercentage: `${item.value}%`,
      startCount: item.value,
      startCountPercentage: `${item.value}%`
    }
  })
})
</script>

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

.device {
  .card-tabs {
    margin-bottom: 0;
  }

  .device-container {
    padding: 10px 14px;
    position: relative;

    .title {
      line-height: 19px;
      font-weight: 500;
      font-size: 16px;
      padding-left: 12px;
      position: relative;
      margin-bottom: 40px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: rgba(22, 122, 240, 1);
      }
    }

    .export-button {
      width: 60px;
      position: absolute;
      right: 0;
      top: 0;
    }

    .card-tabs {
      width: 100%;
      max-width: 1476px;
      margin: 0 auto 0;

      .card-tab {
        svg {
          margin: 0;
        }
      }
    }

    .chart-container {
      // margin: 20px 85px 0;
      width: 100%;
      max-width: 1476px;
      margin: 20px auto 0;
      text-align: center;
    }

    .echarts-name {
      display: inline-block;
      margin: 28px auto 0;
      padding-left: 16px;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: rgba(18, 18, 18, 1);
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: rgba(22, 122, 240, 1);
        border-radius: 50%;
      }
    }

    .table-container {
      // padding: 0 85px;
      width: 100%;
      max-width: 1476px;
      margin: 0 auto;

      .btn-toggle-table {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: rgba(22, 122, 240, 1);
        margin-bottom: 20px;
        cursor: pointer;

        svg {
          transition: transform 0.3s ease-in-out;
        }

        &.hide-table svg {
          transform: rotate(-180deg);
        }
      }

      .table-container {
        margin-top: 20px;
      }
    }
  }

  // 省市详情弹窗样式
  .province-detail {
    .detail-card {
      text-align: center;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      margin-bottom: 20px;

      .detail-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }

      .detail-value {
        font-size: 24px;
        font-weight: bold;
        color: #167af0;
        margin-bottom: 5px;
      }

      .detail-percentage {
        font-size: 12px;
        color: #999;
      }
    }

    .detail-chart {
      margin-top: 30px;

      .chart-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 15px;
        color: #333;
      }

      .chart-placeholder {
        height: 200px;
        background: #f8f9fa;
        border: 1px dashed #ddd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        .placeholder-text {
          color: #999;
          font-size: 14px;
        }
      }
    }
  }

  .dialog-footer {
    .el-button {
      margin-left: 10px;
    }
  }

}
</style>