<template>
  <div
    class="home flex min-h-full w-full flex-col items-center"
    v-loading="loading"
    element-loading-background="#0000"
  >
    <div class="top-data-total flex h-[360px] w-full justify-center pt-[66px]">
      <div class="flex h-full flex-col">
        <div class="mb-[53px] flex flex-col items-center">
          <div class="title mb-[28px]">您好，欢迎使用数据仓库工作台</div>
          <div class="area-total">
            累计接入站点: {{ homeData.totalAccessSite ?? 0 }}个 (含区/县、镇/街道)
          </div>
        </div>
        <div class="data-total flex justify-center">
          <div class="name">累计汇聚数据:（条）</div>
          <div class="flex flex-col justify-center gap-4">
            <el-statistic group-separator="," :value="homeData.totalCount"></el-statistic>
            <div class="text-[14px] text-[#424E65]">
              数仓汇聚时间范围：2023-01-01 00:00:00至{{ homeData.lastStatUpdateTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main w-[90%]">
      <!-- 主题数据分析 -->
      <div class="theme-data-analyse mb-[36px] flex w-full flex-col items-center">
        <div class="main-title">主题数据分析</div>
        <div class="grid h-[270px] w-full grid-cols-3 gap-4 rounded-[8px] bg-white p-[20px]">
          <div class="flex h-full w-full flex-col">
            <div class="mb-[18px] text-[18px] text-[#232323]">近30日数据总量趋势</div>
            <div class="echarts-box">
              <line-echart :dataset="totalDataset"></line-echart>
            </div>
          </div>
          <div class="flex h-full w-full flex-col">
            <div class="mb-[18px] text-[18px] text-[#232323]">近30日排队数据总量趋势</div>
            <div class="echarts-box">
              <line-echart :dataset="phDataset" color="#1DCFB4"></line-echart>
            </div>
          </div>
          <div class="flex h-full w-full flex-col">
            <div class="mb-[18px] text-[18px] text-[#232323]">近30日评价数据总量趋势</div>
            <div class="echarts-box">
              <line-echart :dataset="pjDataset" color="#F57520"></line-echart>
            </div>
          </div>
        </div>
      </div>
      <!-- 对接站点矩阵 -->
      <div class="flex w-full flex-col items-center">
        <div class="main-title">对接站点矩阵</div>
        <div class="area-list grid w-full grid-cols-7 gap-5">
          <area-card v-for="v in homeData.accessList" :key="v.id" :data="v"></area-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineEchart from './components/LineEchart.vue';
import AreaCard from './components/AreaCard.vue';
import { getHomeData } from '@/api/home';
export default {
  components: {
    LineEchart,
    AreaCard
  },
  data() {
    return {
      loading: false,
      totalDataset: {
        dimensions: ['name', 'value'],
        source: []
      },
      phDataset: {
        dimensions: ['name', 'value'],
        source: []
      },
      pjDataset: {
        dimensions: ['name', 'value'],
        source: []
      },
      homeData: {}
    };
  },
  created() {
    this.getHomeData();
  },
  mounted() {},
  methods: {
    async getHomeData() {
      this.loading = true;
      let res = await getHomeData();
      this.loading = false;
      if (res.data.code == 1) {
        let { data } = res.data;
        let { thirtyPhStatList, thirtyPjStatList, thirtyStatList } = data;
        this.homeData = data;

        const formatData = (list, valueKey) => {
          return list
            .map((item) => {
              let formattedDate = `${item.year}-${String(item.month).padStart(2, '0')}-${String(
                item.day
              ).padStart(2, '0')}`;
              return {
                name: formattedDate,
                value: item[valueKey]
              };
            })
            .reverse();
        };

        this.totalDataset.source = formatData(thirtyStatList, 'count');
        this.phDataset.source = formatData(thirtyPhStatList, 'phCount');
        this.pjDataset.source = formatData(thirtyPjStatList, 'pjCount');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 100px;
  background: url('@/assets/img/bg-2.png') no-repeat center bottom;
}
.top-data-total {
  background: url('@/assets/img/banner.png') no-repeat center / 100% 100%;
  // font-family: Source Han Sans CN;
  .title {
    // font-family: FZZhengHeiS-EB-GB;
    font-size: 28px;
    color: #1541e3;
    font-weight: bold;
  }
  .area-total {
    font-weight: 500;
    font-size: 34px;
    color: #162b96;
    font-weight: bold;
  }
  .data-total {
    width: 870px;
    height: 100px;
    background: url('@/assets/img/total-bg.png') no-repeat center / 100% 100%;
    position: relative;
    .name {
      position: absolute;
      top: 16px;
      left: 20px;
      color: var(--primary);
    }
  }
}
:deep(.el-statistic) {
  .number {
    // font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 34px;
    color: var(--primary);
  }
}
.main {
  // font-family: Source Han Sans CN;
  .main-title {
    margin-bottom: 27px;
    font-weight: bold;
    font-size: 26px;
    color: #232323;
  }
  .echarts-box {
    width: 100%;
    flex: 1;
    background: #f7f7f7;
    border-radius: 8px;
  }
}
@media screen and (max-width: 1700px) {
  .area-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media screen and (max-width: 1480px) and (min-width: 1200px) {
  .area-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media screen and (max-width: 1200px) {
  .area-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
</style>
