<template>
  <div class="home flex min-h-full w-full flex-col items-center">
    <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]">
              数仓最近汇聚时间：{{ newTime }}
            </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">
              <LineEchart :dataset="totalDataset"></LineEchart>
            </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">
              <LineEchart :dataset="phDataset" color="#1DCFB4"></LineEchart>
            </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">
              <LineEchart :dataset="pjDataset" color="#F57520"></LineEchart>
            </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">
          <AreaCard
            v-for="v in homeData.accessList"
            :key="v.id"
            :data="v"
          ></AreaCard>
        </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 {
      totalDataset: {
        dimensions: ["name", "value"],
        source: [],
      },
      phDataset: {
        dimensions: ["name", "value"],
        source: [],
      },
      pjDataset: {
        dimensions: ["name", "value"],
        source: [],
      },
      areaList: [
        {
          name: "高新区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/gaoxinqu.png"),
        },
        {
          name: "高县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/gaoxian.png"),
        },
        {
          name: "屏山县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/pingshanxian.png"),
        },
        {
          name: "翠屏区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/cuipingqu.png"),
        },
        {
          name: "叙洲区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/xuzhouqu.png"),
        },
        {
          name: "珙县",
          systemList: [],
          date: "2024-06-26",
          img: require("@/assets/img/gongxian.png"),
        },
        {
          name: "南溪区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/nanxiqu.png"),
        },
        {
          name: "江安县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/jianganxian.png"),
        },
        {
          name: "长宁县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/changningxian.png"),
        },
        {
          name: "筠连县",
          systemList: [],
          date: "2024-06-26",
          img: require("@/assets/img/junlianxina.png"),
        },
        {
          name: "兴文县",
          systemList: ["排队系统"],
          date: "2024-06-26",
          img: require("@/assets/img/xingwenxian.png"),
        },
        {
          name: "两海示范区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/lianghaishifanqu.png"),
        },
        {
          name: "三江新区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
          img: require("@/assets/img/sanjiangxinqu.png"),
        },
      ],
      homeData: {},
      newTime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
    };
  },
  created() {
    this.getHomeData();
  },
  mounted() {},
  methods: {
    async getHomeData() {
      let res = await getHomeData();
      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: 34px;
    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>
