<template>
  <div class="box-3">
    <div class="header">
      <div class="flex">
        <div class="left">
          <div class="item">
            <div class="label">今年总游客数</div>
            <countup v-for="item in count" :endVal="item" />
          </div>
          <div class="item">
            <div class="label">全县景区总游客人数</div>
            <countup v-for="item in count" :endVal="item" />
          </div>
          <div class="item">
            <div class="label">总在园人数</div>
            <countup v-for="item in count" :endVal="item" />
          </div>
        </div>
        <div class="right">
          <div class="item">
            <div class="label">安全度</div>
            <div class="value">安全</div>
          </div>
          <div class="item">
            <div class="label">舒适度</div>
            <div class="value">舒适</div>
          </div>
          <div class="item">
            <div class="label">接待情况</div>
            <div class="value">排队</div>
          </div>
          <div class="item">
            <div class="label">交通拥挤度</div>
            <div class="value">舒适</div>
          </div>
          <div class="item">
            <div class="label">停车场负荷度</div>
            <div class="value">超负荷</div>
          </div>
        </div>
      </div>
    </div>
    <Map />
    <div class="footer">
      <div class="left">
        <div>
          <div class="flex justify-center pt-10">
            <div class="item">
              <p class="label">今日工单总条数</p>
              <countup :endVal="1234" />
            </div>
            <div class="item">
              <p class="label">工单完成数</p>
              <countup :endVal="1234" />
            </div>
          </div>
          <div class="progress-box">
            <span class="text">工单完成数</span>
            <div class="progress">
              <el-progress
                :percentage="50"
                :show-text="false"
                color="linear-gradient( to right,
              #00C4F9 0%, #00C4F9 100%)"
              />
            </div>
            <span class="value">50%</span>
          </div>
        </div>
        <div>
          <div class="flex justify-center pt-10">
            <div class="item">
              <p class="label">紧急工单数</p>
              <countup :endVal="1234" />
            </div>
            <div class="item">
              <p class="label">紧急工单完成数</p>
              <countup :endVal="1234" />
            </div>
          </div>
          <div class="progress-box">
            <span class="text">工单完成数</span>
            <div class="progress">
              <el-progress
                :percentage="50"
                :show-text="false"
                color="linear-gradient( to right,
              #DA3637 0%, #DA3637 100%)"
              />
            </div>
            <span class="value">50%</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span class="tag tag--success">普通</span>
          <p class="content">
            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
          </p>
        </div>
        <div class="item">
          <span class="tag tag--error">普通</span>
          <p class="content">
            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
          </p>
        </div>
        <div class="item">
          <span class="tag tag--primary">普通</span>
          <p class="content">
            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import Map from '@/components/Map/index.vue'

  let count = ref('6945959')
</script>

<style lang="scss" scoped>
  .box-3 {
    width: vw(1614);
    height: vh(950);
    margin-top: vh(120);

    .header {
      width: vw(1614);
      height: vh(128);
      padding: 0 vw(90);
      box-sizing: border-box;
      background-image: url('@/assets/images/group.png');
      background-size: 100% 100%;
      .left {
        display: flex;
        width: vw(950);
        margin-top: vh(20);
      }
      .right {
        flex: 1;
        display: flex;
        margin-top: vh(20);
      }
      .item {
        flex: 1;
        .label {
          margin-bottom: vh(10);
          font-weight: 400;
          font-size: vw(16);
          color: rgba(255, 255, 255, 0.9);
        }
        .value {
          font-weight: bold;
          font-size: vw(28);
          color: #02f9fa;
          line-height: vh(33);
        }
      }
      .countup-wrap {
        display: inline-block;
        width: vw(40);
        height: vh(40);
        margin-right: vw(4);
        border-radius: vw(4);
        color: #ffffff;
        font-size: vw(28);
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
      }
    }
    .footer {
      display: flex;
      width: 100%;
      height: vh(120);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      .left {
        flex: 1;
        display: flex;
        margin-top: vh(4);
        & > div {
          flex: 1;
          height: vh(110);
          margin-right: vw(6);
          background-image: url('@/assets/images/bg-3.png');
          background-size: 100% 100%;
          .item {
            padding: vh(10) vw(24);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          .label {
            font-weight: 400;
            font-size: vw(14);
            margin-bottom: vh(10);
            color: rgba(255, 255, 255, 0.9);
          }
          .countup-wrap {
            color: #02f9fa;
            font-size: vw(28);
            font-weight: bold;
          }
          .progress-box {
            margin-top: vh(10);
            display: flex;
            align-items: center;
            justify-content: center;
            .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: #ffffff;
            }
          }
        }
      }
      .right {
        padding: vh(10) vw(24);
        .item {
          display: flex;
          margin-bottom: vh(12);
          &:nth-last-child(1) {
            margin-bottom: 0;
          }
          .tag {
            padding: 0 vw(16);
            font-weight: bold;
            font-size: vw(14);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: vw(2);
            &--success {
              color: #02f9fa;
              border: 1px solid #02f9fa;
              box-shadow: inset 0 0 vw(8) 0 #0be1ab;
            }
            &--error {
              color: #ee2c2c;
              border: 1px solid #ee2c2c;
              box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
            }
            &--primary {
              color: #00aaff;
              border: 1px solid #00aaff;
              box-shadow: inset 0 0 vw(8) 0 #00aaff;
            }
          }
          .content {
            margin-left: vw(4);
            padding: 0 vw(10);
            width: vw(900);
            height: vh(24);
            line-height: vh(24);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
            font-size: vw(14);
            color: #ffffff;
            border-radius: vw(2);
            background: rgba(0, 150, 255, 0.28);
          }
        }
      }
    }
  }
</style>

