<template>
  <div class="box-4">
    <Title1 title="交通信息" />
    <div class="flex justify-evenly pt-10 pb-20">
      <div v-for="item in list" class="cell">
        <img class="icon" :src="item.icon" alt="" width="64" height="64" />
        <div>
          <countup :end-val="item.value" />
          <div class="label">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="box">
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
          <div class="">
            <Line
              :width="250"
              :height="150"
              :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="box">
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
          <Line
            :width="250"
            :height="150"
            :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">
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
          <jam :width="250" :height="200" />
        </div>
      </div>
    </div>
    <Title1 title="停车信息" />
    <div class="stop-box">
      <div>
        <img class="icon" src="@/assets/images/icon-5.png" alt="" />
        <div>
          <div class="label">车库总数</div>
          <countup class="value" :end-val="500" />
        </div>
        <div>
          <div class="label">车库总数</div>
          <countup class="value" :end-val="500" />
        </div>
        <div>
          <div class="label">已使用车位数</div>
          <countup class="value" :end-val="500" />
        </div>
      </div>
      <div>
        <div>
          <div class="label">三峡之巅</div>
          <div class="value error">已满</div>
        </div>
        <div>
          <div class="label">白帝城</div>
          <div class="value error">已满</div>
        </div>
        <div>
          <div class="label">天坑地缝</div>
          <div class="value success">空余</div>
        </div>
        <div>
          <div class="label">永安宫</div>
          <div class="value success">空余</div>
        </div>
      </div>
    </div>
    <div class="flex pt-10">
      <div class="box-1">
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
          <div class="pt-20">
            <Line
              :width="250"
              :height="120"
              :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="box-1">
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
          <traffic-flow />
        </div>
      </div>
      <div class="box-1">
        <div class="pt-10">
          <Title3 title="景区停车场空位" />
          <vacancy />
        </div>
      </div>
    </div>
    <div class="flex">
      <div class="flex-1">
        <Title1 title="车船信息" class="title1" />
      </div>
      <div class="flex-1">
        <Title1 title="酒店信息" class="title1" />
      </div>
    </div>
    <div class="flex">
      <div class="car-ship">
        <div class="mb-6">
          <div class="car">
            <div class="label">车总数</div>
            <div class="flex align-center">
              <countup class="value" :end-val="130" /> <span class="unit">辆</span>
            </div>
          </div>
          <div class="table">
            <div class="header">
              <div>景区</div>
              <div>调度</div>
              <div>空余</div>
            </div>
            <div class="cell">
              <div>白帝城</div>
              <div>5<span class="unit-1">辆</span></div>
              <div>1<span class="unit-1">辆</span></div>
            </div>
            <div class="cell">
              <div>白帝城</div>
              <div>5<span class="unit-1">辆</span></div>
              <div>1<span class="unit-1">辆</span></div>
            </div>
            <div class="cell">
              <div>白帝城</div>
              <div>5<span class="unit-1">辆</span></div>
              <div>1<span class="unit-1">辆</span></div>
            </div>
          </div>
        </div>
        <div>
          <div class="ship">
            <div class="label">车总数</div>
            <div class="flex align-center">
              <countup class="value" :end-val="130" /> <span class="unit">辆</span>
            </div>
            <div class="table">
              <div class="header">
                <div>景区</div>
                <div>调度</div>
                <div>空余</div>
              </div>
              <div class="cell">
                <div>白帝城</div>
                <div>5<span class="unit-1">辆</span></div>
                <div>1<span class="unit-1">辆</span></div>
              </div>
              <div class="cell">
                <div>白帝城</div>
                <div>5<span class="unit-1">辆</span></div>
                <div>1<span class="unit-1">辆</span></div>
              </div>
              <div class="cell">
                <div>白帝城</div>
                <div>5<span class="unit-1">辆</span></div>
                <div>1<span class="unit-1">辆</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hotel">
        <div>
          <div class="item">
            <div class="label">车库总数</div>
            <countup class="value" :end-val="500" />
          </div>
          <div class="item">
            <div class="label">房间总数</div>
            <countup class="value" :end-val="500" />
          </div>
          <div class="item">
            <div class="label">总入住</div>
            <countup class="value" :end-val="500" />
          </div>
          <div class="item">
            <div class="label">总入住率</div>
            <countup class="value" :end-val="500" />
          </div>
        </div>
        <div>
          <div class="lodging">
            <Title3 title="酒店入住人数及入住率" />
          </div>
          <lodging-ratio />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import jam from './jam.vue'
  import vacancy from './vacancy.vue'
  import LodgingRatio from './lodging-ratio.vue'
  import TrafficFlow from './traffic-flow.vue'
  import countup from 'vue-countup-v3'
  import icon1 from '@/assets/images/icon-1.png'
  import icon2 from '@/assets/images/icon-2.png'
  import icon3 from '@/assets/images/icon-3.png'
  import icon4 from '@/assets/images/icon-4.png'

  let list = ref([
    {
      label: '路段总数',
      value: '1234',
      icon: icon1
    },
    {
      label: '当前拥堵路段',
      value: '1234',
      icon: icon2
    },
    {
      label: '总拥堵次数',
      value: '1234',
      icon: icon3
    },
    {
      label: '最大拥堵时长',
      value: '1234',
      icon: icon4
    }
  ])
</script>

<style lang="scss" scoped>
  .box-4 {
    margin-top: vh(120);
    width: vw(750);
    height: vh(950);
    padding: vw(8);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-5.png');
    background-size: 100% 100%;
    .cell {
      display: flex;
      align-items: center;
      .icon {
        width: vw(64);
        height: auto;
      }
      .countup-wrap {
        color: #02f9fa;
        font-size: vw(24);
        font-weight: bold;
      }
      .label {
        font-weight: 400;
        font-size: vw(14);
        margin-top: vh(10);
        color: rgba(255, 255, 255, 0.9);
      }
    }
    .box {
      width: vw(250);
      height: vh(200);
      margin-right: vw(8);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
    }
    .box-1 {
      width: vw(250);
      height: vh(200);
      margin-right: vw(8);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
    }
    .stop-box {
      display: flex;
      gap: vw(20);
      .icon {
        width: vw(45);
        height: auto;
      }
      & > div {
        flex: 1;
        height: vh(70);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
        .label {
          font-weight: 400;
          font-size: vw(14);
          color: rgba(255, 255, 255, 0.9);
        }
        .value {
          margin-top: vh(10);
          font-weight: bold;
          font-size: vw(24);
          color: #ffffff;
        }
        .error {
          color: #e21b1b;
        }
        .success {
          color: #02f9fa;
        }
      }
    }
    .car-ship {
      flex: 1;
      & > div {
        position: relative;
        flex: 1;
        height: vh(110);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
        .icon {
          padding-left: vw(90);
          width: vw(352);
          height: vh(70);
          display: flex;
          flex-direction: column;
          justify-content: center;
          box-sizing: border-box;
        }
        .car {
          @extend .icon;
          background-image: url('@/assets/images/icon-6.png');
          background-size: 100% 100%;
        }
        .ship {
          @extend .icon;
          background-image: url('@/assets/images/icon-7.png');
          background-size: 100% 100%;
        }
        .label {
          font-weight: 400;
          font-size: vw(14);
          color: rgba(255, 255, 255, 0.9);
          margin-bottom: vh(6);
        }
        .value {
          font-weight: bold;
          font-size: vw(24);
          color: #02f9fa;
        }
        .unit {
          font-weight: bold;
          font-size: vw(14);
          color: #02f9fa;
          margin-top: vh(6);
        }
        .table {
          position: absolute;
          left: vw(160);
          width: vw(200);
          height: vh(100);
          z-index: 2;
          .header {
            display: flex;
            height: vh(18);
            line-height: vh(18);
            text-align: center;
            background: rgba(0, 150, 255, 0.4);
            & > div {
              flex: 1;
              font-weight: 400;
              font-size: vw(12);
              color: #52b8ff;
            }
          }
          .cell {
            display: flex;
            height: vh(27);
            line-height: vh(27);
            text-align: center;
            background: #074686;
            &:nth-child(2n + 1) {
              background: rgba(0, 150, 255, 0.1);
            }
            & > div {
              flex: 1;
            }
            & > div:nth-child(1) {
              font-weight: 400;
              font-size: vw(14);
              color: rgba(255, 255, 255, 0.9);
            }
            & > div:nth-child(2) {
              font-weight: bold;
              font-size: vw(18);
              color: #ffffff;
            }
            & > div:nth-child(3) {
              font-weight: bold;
              font-size: vw(18);
              color: #02f9fa;
            }
            .unit-1 {
              font-size: vw(12);
            }
          }
        }
      }
    }
    .hotel {
      flex: 1;
      margin-left: vw(6);
      & > div:nth-child(1) {
        display: flex;
        width: vw(360);
        height: vh(70);
        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;
          .label {
            font-weight: 400;
            font-size: vw(14);
            color: rgba(255, 255, 255, 0.9);
          }
          .value {
            margin-top: vh(10);
            font-weight: bold;
            font-size: vw(24);
            color: #ffffff;
          }
        }
      }
      & > div:nth-child(2) {
        padding-top: vh(10);
        margin-top: vh(8);
        width: vw(360);
        height: vh(140);
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
      }
    }
  }
  .lodging {
    :deep(.title-3) {
      margin-top: vh(10);
    }
  }
  .title1 {
    :deep(.title) {
      width: vw(300) !important;
    }
  }
</style>
