<template>
  <div class="container">
    <div class="flex">
      <div class="box mr-10">
        <Title1 title="排队信息" />
        <div class="count-box flex justify-between">
          <count-item label="今日出票" :count="35600" suffix="张" />
          <count-item label="今日接待人数" :count="35600" suffix="人" />
          <count-item label="排队人数" :count="35600" suffix="人" />
          <count-item label="排队持续时间" :count="35600" suffix="S" />
        </div>
        <div class="border">
          <div class="pt-10">
            <Title3 title="景区排队人数" />
          </div>
          <Line :width="520" :height="300" />
        </div>
      </div>
      <div class="box mr-10">
        <Title1 title="景区承载" />
        <div class="flex">
          <progress1 :width="200" :height="70" />
          <div class="flex flex-1 justify-between">
            <count-item label="景区当前人数" :count="35600" suffix="张" />
            <count-item label="景区最大承载" :count="35600" suffix="人" />
          </div>
        </div>
        <div class="border">
          <div class="pt-10">
            <Title3 title="景区排队人数" />
          </div>
          <Line :width="520" :height="300" />
        </div>
      </div>
      <div class="box-1 mr-10">
        <Title1 title="停车信息" />
        <div class="flex">
          <div class="flex">
            <progress1 :width="140" :height="70" />
            <progress1 :width="140" :height="70" />
            <progress1 :width="140" :height="70" />
          </div>
          <div class="ml-20 flex flex-1 justify-between">
            <count-item label="总停车场数" :count="561" suffix="个" />
            <count-item label="总停车位数" :count="150000" suffix="个" />
          </div>
        </div>
        <div class="flex">
          <div class="border flex-1">
            <div class="pt-10">
              <Title3 title="今日景区承载量" />
            </div>
            <Line :width="350" :height="300" />
          </div>
          <div class="border flex-1">
            <div class="pt-10">
              <Title3 title="车辆归属地占比" />
            </div>
            <PieRow :width="340" :height="300" />
          </div>
        </div>
      </div>
      <div class="box-2">
        <Title1 title="安全信息 " />
        <div class="count-box flex">
          <count-item label="当前告警总数" :count="561" suffix="次" />
          <count-item label="安全告警总数" :count="561" suffix="次" />
          <count-item label="已解除告警数" :count="561" />
        </div>
        <div class="border flex-1">
          <div class="pt-10">
            <Title3 title="今日景区承载量" />
          </div>
          <PieRow :width="350" :height="300" />
        </div>
      </div>
    </div>
    <div class="flex mt-10">
      <div class="box-3 mr-10">
        <Title1 title="交通信息" />
        <div class="count-box flex">
          <count-item label="总通景路段" :count="35600" suffix="张" />
          <count-item label="通景路段拥堵数" :count="35600" suffix="人" />
          <count-item label="拥堵开始时间" :count="35600" suffix="人" />
          <count-item label="拥堵持续时间" :count="35600" suffix="S" />
        </div>
        <div class="flex">
          <div class="border">
            <Title3 title="今日交通负载" />
            <traffic-flow />
          </div>
          <div class="border">
            <Title3 title="今日交通负载" />
            <PieCol :width="230" :height="300" />
          </div>
          <div class="border">
            <Title3 title="今日交通负载" />
            <PieCol :width="230" :height="300" />
          </div>
        </div>
      </div>

      <div class="box-4 mr-10">
        <Title1 title="用户画像" />
        <div class="flex">
          <div class="flex-1">
            <Title3 title="年龄/性别占比" />
            <age-ratio />
            <div class="count">总人数：<countup endVal="124563" /></div>
            <div class="cell pt-20">
              <img class="icon" src="@/assets/images/man.png" />
              <div class="bg">
                <span class="text">男性</span>
                <div class="progress">
                  <el-progress
                    :percentage="50"
                    :show-text="false"
                    color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
                  />
                </div>
                <span class="man">50%</span>
              </div>
            </div>
            <div class="cell pt-20">
              <img class="icon" src="@/assets/images/woman.png" />
              <div class="bg">
                <span class="text">女性</span>
                <div class="progress">
                  <el-progress
                    :percentage="50"
                    :show-text="false"
                    color="linear-gradient( to right, #0A4482 0%, #FF7021 100%)"
                  />
                </div>
                <span class="woman">50%</span>
              </div>
            </div>
          </div>
          <div class="border flex-1">
            <Title3 title="客源地分析TOP5" />
            <top />
          </div>
          <div class="border flex-1">
            <Title3 title="购票来源" />
            <div class="count">总人数：<countup endVal="124563" /></div>
            <ticket />
          </div>
        </div>
      </div>

      <div class="box-5">
        <Title1 title="车船信息" />
        <div class="flex mb-6">
          <div class="border pt-10 pb-10">
            <Title2 title="车车车车车车" />
            <div class="car-box mt-10">
              <div class="pr-20">
                <div class="label">车总数</div>
                <div class="value">130辆</div>
              </div>
              <div>
                <div class="label">今日累计运营(班次)</div>
                <div class="value">130次</div>
              </div>
            </div>
            <div class="progress-box">
              <span class="text">运营130辆</span>
              <div class="progress">
                <el-progress
                  :percentage="50"
                  :show-text="false"
                  color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
                />
              </div>
              <span class="value">空余100辆</span>
            </div>
          </div>
          <div class="border pt-10 pb-10">
            <Title2 title="船船船船船船" />
            <div class="car-box mt-10">
              <div class="pr-20">
                <div class="label">车总数</div>
                <div class="value">130辆</div>
              </div>
              <div>
                <div class="label">今日累计运营(班次)</div>
                <div class="value">130次</div>
              </div>
            </div>
            <div class="progress-box">
              <span class="text">运营130辆</span>
              <div class="progress">
                <el-progress
                  :percentage="50"
                  :show-text="false"
                  color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
                />
              </div>
              <span class="value">空余100辆</span>
            </div>
          </div>
        </div>
        <div class="border">
          <div id="car-ship" class="car-ship" />
          <img class="full" src="@/assets/images/full.png" @click="show = true" />
        </div>
      </div>
    </div>
  </div>
  <BigCarShipMap v-model="show" />
</template>

<script setup>
  import progress1 from './progress-1.vue'
  import { useMap } from '@/hooks/map'
  import carIcon from '@/assets/images/car.png'
  import shipIcon from '@/assets/images/ship.png'
  import BigCarShipMap from './big-car-ship-map.vue'
  import AgeRatio from './age-ratio.vue'
  import top from './top.vue'
  import ticket from './ticket.vue'
  import TrafficFlow from './traffic-flow.vue'

  const { initMap, addMarker } = useMap()
  let show = ref(false)
  onMounted(() => {
    initMap('car-ship', 109.491961, 31.024285, 13)
    addMarker(carIcon, [109.491045, 31.028725], [36, 50])
    addMarker(carIcon, [109.483266, 31.024718], [36, 50])
    addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
    addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
  })
</script>

<style scoped lang="scss">
  :deep(.BMap_cpyCtrl) {
    display: none;
  }
  :deep(.anchorBL) {
    display: none;
  }
  .dialog {
    :deep(.el-dialog) {
      width: vw(2540);
      height: vh(904);
    }
  }
  .progress-box {
    margin-top: vh(10);
    height: vh(20);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.17) 100%);
    .text {
      margin-right: vw(10);
      font-weight: 400;
      font-size: vw(14);
      color: #ffffff;
    }
    .progress {
      width: vw(100);
    }
    .value {
      margin-left: vw(10);
      font-weight: 400;
      font-size: vw(14);
      color: #f15a25;
    }
  }
  .container {
    flex: 1;
    margin: vh(120) vw(10) 0 vw(10);
    .count-box {
      padding: 0 vw(10);
      height: vh(70);
    }
    .bg {
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    }
    .border {
      position: relative;
      overflow: hidden;
      padding: 0 vw(10);
      margin: 0 vw(8);
      box-sizing: border-box;
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
    }
    .box {
      @extend .bg;
      width: vw(575);
      height: vh(475);
    }
    .box-1 {
      @extend .bg;
      width: vw(770);
      height: vh(475);
    }
    .box-2 {
      @extend .bg;
      width: vw(440);
      height: vh(475);
    }
    .box-3 {
      @extend .bg;
      width: vw(850);
      height: vh(465);
    }
    .box-4 {
      @extend .bg;
      width: vw(850);
      height: vh(465);
    }
    .box-5 {
      @extend .bg;
      width: vw(670);
      height: vh(465);
    }
    .car-box {
      width: vw(350);
      height: vh(74);
      padding-left: vw(75);
      display: flex;
      align-items: center;
      background-image: url('@/assets/images/icon-6.png');
      background-size: 100% 100%;
      .label {
        font-weight: 400;
        font-size: vw(14);
        color: #fff;
      }
      .value {
        font-weight: bold;
        font-size: vw(24);
        color: #02f9fa;
        margin-top: vh(10);
      }
    }
    .car-ship {
      width: vw(630);
      height: vh(230);
    }
    .full {
      cursor: pointer;
      position: absolute;
      right: vw(20);
      bottom: vh(20);
      width: vw(50);
      z-index: 999;
    }
    .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: vh(28);
        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-color: radial-gradient(to right, #0a4190 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 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      & > img {
        width: vw(74);
        height: vh(74);
      }
      & > 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>
