<template>
  <div class="home h-full w-full">
    <div class="top-bg primary-bg h-[210px] w-full"></div>
    <div class="main flex w-full flex-col gap-5">
      <div class="top-data-box flex h-[100px] w-full items-center gap-5">
        <div class="top-data-total h-full w-[30%] rounded-md">
          <div class="h-full w-full">
            <Carousel :ImageArray="imageData"></Carousel>
          </div>
          <div class="data-total flex h-full w-full flex-col gap-3">
            <div>
              <span class="mr-5"> 累计汇聚数据 </span>
              <span class="text-[14px] text-[#888888]">
                数仓最近汇聚时间：2024-06-26 23:59:59
              </span>
            </div>
            <div class="flex" @click="totalData += 100">
              <el-statistic
                group-separator=","
                :value="totalData"
                suffix="条"
                :value-style="{
                  color: '#1890ff',
                  fontSize: '22px',
                  fontWeight: 'bold',
                }"
              ></el-statistic>
            </div>
          </div>
        </div>
        <div
          class="top-data-text flex h-full flex-1 items-center rounded-md p-[20px]"
        >
          <el-carousel
            height="26px"
            direction="vertical"
            indicator-position="none"
          >
            <el-carousel-item>
              <div class="top-text primary">您好，欢迎使用数据仓库工作台。</div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="top-text primary">
                累计接入站点：64个（含区/县、镇/街道）
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="top-text primary">您好，欢迎使用数据仓库工作台。</div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="top-text primary">
                累计接入站点：64个（含区/县、镇/街道）
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="bottom-data-show-box flex w-full flex-1 gap-5">
        <div class="data-echarts-box w-[30%] rounded-md bg-white">
          <div class="b-border flex h-[50px] w-full items-center pl-[20px]">
            主题数据分析
          </div>
          <div class="flex w-full flex-col gap-5 p-[20px]">
            <div class="echarts-box">
              <LineEchart
                ref="DataTotalEchart"
                title="近30日数据总量趋势"
                :dataset="dataset"
              ></LineEchart>
            </div>
            <div class="echarts-box">
              <LineEchart
                ref="DataQueueUpEchart"
                title="近30日排队数据总量趋势"
                color="#36CE9E"
                :dataset="dataset"
              ></LineEchart>
            </div>
            <div class="echarts-box">
              <LineEchart
                ref="DataEvaluateEchart"
                title="近30日评价数据总量趋势"
                color="#8B5CFF"
                :dataset="dataset"
              ></LineEchart>
            </div>
          </div>
        </div>
        <div class="data-area-box flex-1 rounded-md bg-white">
          <div class="b-border flex h-[50px] w-full items-center pl-[20px]">
            对接站点矩阵
          </div>
          <div class="grid w-full grid-cols-4 gap-5 p-[20px]">
            <div class="h-[130px] w-full" v-for="(v, i) in areaList" :key="i">
              <Card :info="v"></Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineEchart from "./components/LineEchart.vue";
import Carousel from "./components/Carousel.vue";
import Card from "./components/Card.vue";
import image_1 from "@/assets/img/u54.svg";
import image_2 from "@/assets/img/u55.svg";
import image_3 from "@/assets/img/u56.svg";
export default {
  components: {
    LineEchart,
    Carousel,
    Card,
  },
  data() {
    return {
      dataset: {
        dimensions: ["name", "value"],
        source: [
          {
            name: "06-1",
            value: 900000,
          },
          {
            name: "06-2",
            value: 800000,
          },
          {
            name: "06-3",
            value: 700000,
          },
          {
            name: "06-4",
            value: 900000,
          },
        ],
      },
      imageData: [image_1, image_2, image_3],
      totalData: 895671230,
      areaList: [
        {
          name: "高新区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "高县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "屏山县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "翠屏区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "叙洲区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "珙县",
          systemList: [],
          date: "2024-06-26",
        },
        {
          name: "南溪区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "江安县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "长宁县",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "筠连县",
          systemList: [],
          date: "2024-06-26",
        },
        {
          name: "兴文县",
          systemList: ["排队系统"],
          date: "2024-06-26",
        },
        {
          name: "两海示范区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
        {
          name: "三江新区",
          systemList: ["排队系统", "评价系统"],
          date: "2024-06-26",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  .b-border {
    border-bottom: 1px solid #ccc;
  }
}
.main {
  height: calc(100% - 50px);
  padding: 0px 50px;
  position: absolute;
  top: 50px;
  left: 0px;
  .echarts-box {
    width: 100%;
    height: 180px;
    background: #f6fafa;
    border-radius: 4px;
  }
}

.top-data-total {
  position: relative;
  .data-total {
    padding: 20px 20px 0px 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
  }
}

.top-data-text {
  background: url("@/assets/img/card_bg_2.png") no-repeat center / 100% 100%;
}
.top-text {
  font-size: 24px;
  font-weight: 600;
}

:deep(.el-carousel--vertical) {
  width: 100%;
}
:deep(.el-statistic) {
  .con {
    justify-content: flex-start;
  }
  .suffix {
    color: #1890ff;
  }
}
</style>
