<template>
  <div class="box-2">
    <Title1 title="景区信息">
      <template #right>
        <img class="more" src="@/assets/images/more.png" />
      </template>
    </Title1>
    <div class="flex pt-20">
      <div
        class="item"
        :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }"
        v-for="(item, index) in homeData?.scenicSpot"
        :key="index"
      >
        <span class="label">{{ item.name }}</span>
        <div class="flex align-end">
          <countup :end-val="item.value" /><span class="unit">个</span>
        </div>
      </div>
    </div>
    <div class="flex pt-20">
      <div class="box">
        <Title2 title="景区排队人数" />
        <div class="statistic">
          <div class="statistic-item">
            <span class="statistic-title">三峡之巅</span>
            <span class="statistic-value">
              <span class="prefix">排队</span>
              <span class="value">100</span>
              <span class="suffix">人</span>
            </span>
          </div>
          <div class="statistic-item">
            <span class="statistic-title">白帝城</span>
            <span class="statistic-value">通畅</span>
          </div>
          <div class="statistic-item">
            <span class="statistic-title">天坑地缝</span>
            <span class="statistic-value">通畅</span>
          </div>
          <div class="statistic-item">
            <span class="statistic-title">永安宫</span>
            <span class="statistic-value">通畅</span>
          </div>
        </div>
        <div class="flex rela">
          <Title3 title="景区排队人数" />
          <div class="dropdown">
            <Dropdown
              label="选择排队景区"
              :options="[
                { label: '山峡之巅', value: 100 },
                { label: '白帝城', value: 100 },
                { label: '龙桥河', value: 100 }
              ]"
            />
          </div>
        </div>
        <div class="pt-20">
          <Line
            :width="370"
            :height="140"
            :config="{ legend: false }"
            :data="[
              {
                name: '企业数',
                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
              }
            ]"
            :xAxisData="[
              '12-16 10:00',
              '12-16 14:00',
              '12-16 16:00',
              '12-16 22:00',
              '12-17 02:00',
              '12-17 06:00',
              '12-17 10:00',
              '12-17 14:00',
              '12-17 16:00',
              '12-16 22:00',
              '12-18 02:00',
              '12-18 06:00',
              '12-8 10:00',
              '12-18 14:00',
              '12-18 16:00',
              '12-18 20:00'
            ]"
          />
        </div>
      </div>
      <div class="box">
        <Title2 title="景区承载量" />
        <div class="statistic">
          <div class="statistic-item">
            <gauge id="gauge1" />
            <span class="statistic-title">三峡之巅</span>
          </div>
          <div class="statistic-item">
            <gauge id="gauge2" />
            <span class="statistic-title">三峡之巅</span>
          </div>
          <div class="statistic-item">
            <gauge id="gauge3" />
            <span class="statistic-title">三峡之巅</span>
          </div>
          <div class="statistic-item">
            <gauge id="gauge4" />
            <span class="statistic-title">三峡之巅</span>
          </div>
        </div>
        <Title3 title="今日景区承载量" />
        <div class="pt-20">
          <Line
            :width="370"
            :height="140"
            :config="{ legend: false }"
            :data="[
              {
                name: '企业数',
                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
              }
            ]"
            :xAxisData="[
              '12-16 10:00',
              '12-16 14:00',
              '12-16 16:00',
              '12-16 22:00',
              '12-17 02:00',
              '12-17 06:00',
              '12-17 10:00',
              '12-17 14:00',
              '12-17 16:00',
              '12-16 22:00',
              '12-18 02:00',
              '12-18 06:00',
              '12-8 10:00',
              '12-18 14:00',
              '12-18 16:00',
              '12-18 20:00'
            ]"
          />
        </div>
      </div>
    </div>

    <div class="ticket-box">
      <Title2 title="景区购票数" />
      <div class="ticket-wrap">
        <img src="@/assets/images/ticket.png" />
        <div v-for="(item, index) in homeData?.admission" :key="index">
          <span class="label">{{ item.name }}：</span><countup :end-val="item.value" />
        </div>
      </div>
    </div>

    <Title1 title="游客画像" />
    <div class="flex">
      <div class="box-1">
        <Title3 title="年龄/性别占比" />
        <age />
        <div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
        <div
          class="cell pt-20"
          v-for="(item, index) in homeData?.userPortrait.genderRate"
          :key="index"
        >
          <img class="icon" src="@/assets/images/man.png" />
          <div class="bg">
            <span class="text">{{ item.name }}性</span>
            <div class="progress">
              <el-progress
                :percentage="Number(item.value)"
                :show-text="false"
                :color="`linear-gradient( to right, ${
                  item.name == '男' ? '#074D90' : '#0A4482'
                } 0%, ${item.name == '男' ? '#55E0FF' : '#FF7021'} 100%)`"
              />
            </div>
            <span class="man">{{ item.value }}%</span>
          </div>
        </div>
      </div>
      <div class="box-1">
        <Title3 title="客源地分析TOP5" />
        <top />
      </div>
      <div class="box-1">
        <Title3 title="购票来源" />
        <div class="count">总人数：<countup :end-val="channelTotal" /></div>
        <ticket />
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import top from './top.vue'
  import age from './age.vue'
  import gauge from './gauge.vue'
  import ticket from './ticket.vue'

  const homeData = inject('homeData')

  const ageRateTotal = computed(() => {
    return homeData.value?.userPortrait.genderRate.reduce(
      (total, current) => Number(current.count) + total,
      0
    )
  })
  const channelTotal = computed(() => {
    return homeData.value?.userPortrait.channel.reduce(
      (total, current) => Number(current.count) + total,
      0
    )
  })
</script>

<style lang="scss" scoped>
  .box-2 {
    margin-top: vh(120);
    width: vw(800);
    height: vh(950);
    padding: vw(8);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-2.png');
    background-size: 100% 100%;
    .more {
      position: absolute;
      top: vh(0);
      right: vw(20);
      cursor: pointer;
      width: vw(60);
      height: auto;
    }
    .dropdown {
      position: absolute;
      right: vw(8);
      bottom: -30%;
      z-index: 990;
    }
    .item {
      position: relative;
      flex: 1;
      padding-left: vw(70);
      height: vh(52);
      margin: 0 vh(10);
      display: flex;
      align-items: center;
      background-size: 100% 100%;
      .label {
        position: absolute;
        top: vh(-10);
        font-weight: 400;
        font-size: vw(14);
        color: rgba(255, 255, 255, 0.7);
      }
      .countup-wrap {
        color: #02f9fa;
        font-size: vw(28);
        font-weight: bold;
      }
    }
    .unit {
      color: #02f9fa;
      font-size: vw(14);
      margin-bottom: vh(4);
    }
    .core {
      background-image: url('@/assets/images/core.png');
    }
    .queue {
      background-image: url('@/assets/images/queue.png');
    }
    .congestion {
      background-image: url('@/assets/images/congestion.png');
    }
    .box {
      width: vw(384);
      height: vh(320);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(1) {
        margin-right: vw(10);
      }
      .statistic {
        display: flex;
        margin-top: vh(12);
        width: 100%;
        height: vh(88);
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
        &-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        &-title {
          font-size: vw(14);
          color: rgba(255, 255, 255, 0.9);
        }
        &-value {
          margin-top: vh(10);
          font-weight: bold;
          font-size: vw(24);
          color: #02f9fa;
        }
        .value {
          font-weight: bold;
          font-size: vw(28);
          color: #ff4400;
        }
        .prefix,
        .suffix {
          color: #ff4400;
          font-size: vw(12);
        }
      }
    }
    .box-1 {
      width: vw(253);
      height: vh(290);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(1) {
        margin-right: vw(10);
      }
      &:nth-child(2) {
        margin-right: vw(10);
      }
    }
    .count {
      margin: vw(20) vw(20) 0 vw(20);
      height: vh(24);
      font-weight: bold;
      font-size: vw(14);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-left: vw(4) solid #37d8fc;
      border-right: vw(4) solid #37d8fc;
      background: rgba(0, 150, 255, 0.19);
    }
    .cell {
      margin-left: vw(10);
      display: flex;
      align-items: center;
      .bg {
        display: flex;
        align-items: center;
        height: vh(20);
        padding-right: vw(10);
        background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
      }
      .icon {
        width: vw(26);
        height: auto;
        margin-right: vw(4);
      }
      .text {
        font-weight: 400;
        font-size: vw(14);
        color: rgba(255, 255, 255, 0.9);
      }
      .progress {
        width: vw(120);
        margin-left: vw(4);
      }
      .man {
        font-weight: bold;
        font-size: vw(14);
        color: #02f9fa;
        margin-left: vw(10);
      }
      .woman {
        font-weight: bold;
        font-size: vw(14);
        color: #f15a25;
        margin-left: vw(10);
      }
    }
    .ticket-box {
      margin-top: vh(20);
      width: 100%;
      height: vh(106);
      background: linear-gradient(to right, rgba(0, 77, 136, 0) 0%, rgba(0, 77, 136, 0.6) 100%);
      .title {
        width: vw(253);
        height: vh(28);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/title-5.png');
        background-size: 100% 100%;
        & > span {
          padding-left: vw(22);
          font-weight: bold;
          font-size: vw(15);
          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
          color: transparent; /* 兼容其他浏览器 */
        }
      }
    }
    .ticket-wrap {
      margin-top: vh(8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      & > img {
        width: vw(74);
        height: auto;
      }
      & > div {
        flex: 1;
        height: vh(58);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/ticket-item-bg.png');
        background-size: 100% 100%;
      }
      .label {
        padding-left: vw(10);
        font-weight: 400;
        font-size: vw(14);
        color: rgba(255, 255, 255, 0.9);
      }
      .countup-wrap {
        color: #02f9fa;
        font-size: vw(28);
        font-weight: bold;
      }
    }
  }
</style>
