<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机型
              <el-tooltip effect="light" content="" placement="right-start">
                <svg 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 fill-rule="evenodd" clip-rule="evenodd"
                    d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z"
                    fill="white" />
                  <path
                    d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z"
                    fill="white" />
                  <path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white" />
                  <path
                    d="M6.41645 10.8892V6.22255C5.98689 6.22255 5.63867 5.87432 5.63867 5.44477C5.63867 5.01522 5.98689 4.66699 6.41645 4.66699H7.19423L7.27398 4.67079C7.66608 4.71071 7.97201 5.04213 7.97201 5.44477V10.8892C7.97201 11.3188 7.70354 11.3452 7.27398 11.3452C6.84443 11.3452 6.41645 11.3188 6.41645 10.8892Z"
                    fill="white" />
                  <path
                    d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z"
                    fill="white" />
                </svg>
                <template #content>
                  <div style="width: 300px;">
                    您可以查看在指定时段（1天、7天、30天）内用户{{ wayType[form.tab - 1] }}的分布情况，并可以进行版本、渠道和分群的交叉筛选。<br />筛选只展示昨日及之前的数据，启动次数指标只支持昨日之前的查询。
                  </div>
                </template>
              </el-tooltip>
            </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-card>
      </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="device-container">
            <div class="title">数据明细</div>
            <div class="export-button">
              <ExportToCSV :hideToggle="true" :hideTable="true" :data="formatData" :columns="columns" :fileName="title + '- 设备终端'" />
            </div>
          </div>
          <div class="chart-container">
            <ExportToCSV :size="10" :tableStyle="{width: '100%', maxWidth: '1476px', margin: '0 auto'}" :hideToggle="true" :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 } 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 },
  { label: '操作系统', value: 3 }
])

const wayType = ref(['机型', '分辨率', '操作系统'])

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: 'iPhone 14 Pro', value: 22 },
  { name: 'iPhone 14', value: 18 },
  { name: 'iPhone 13 Pro', value: 28 },
  { name: 'iPhone 13', value: 32 },
  { name: 'iPhone 12 Pro', value: 38 },
  { name: 'iPhone 12', value: 42 },
  { name: 'iPhone 11 Pro', value: 34 },
])

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: 'device', 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 {
      device: 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;
    }
  }
}

}
</style>