<template>
  <ContainerBorder title="出动力量">
    <!-- 出动力量统计 -->
    <div class="power-total">
      <div class="total-item">
        <img class="info-icon1" src="@/assets/images/icon/people-icon.png" alt="" />
        <div class="info-data">
          <div><span class="number">{{dispatchData['警力出动']}}</span><span class="unit">人</span></div>
          <div class="label">警力出动</div>
        </div>
      </div>
      <div class="total-item">
        <img class="info-icon2" src="@/assets/images/icon/fire-car-icon.png"  alt="" />
        <div class="info-data">
          <div><span class="number">{{dispatchData['警车出动']}}</span><span class="unit">辆</span></div>
          <div class="label">警车出动</div>
        </div>
      </div>
    </div>
    <!-- 人员信息 -->
    <div class="people-info">
      <div class="people-item">
        <div class="name"> 王小强</div>
        <div class="tag"> 辖区支队领导</div>
        <div class="phone">15823887790</div>
      </div>
      <div class="people-item">
        <div class="name"> 唐伯虎</div>
        <div class="tag"> 带队干部</div>
        <div class="phone">15823887790</div>
      </div>
      <div class="people-item">
        <div class="name"> 朱小雄</div>
        <div class="tag"> 值班领导</div>
        <div class="phone">15823887790</div>
      </div>
    </div>
    <!-- 车辆资源信息 -->
    <div class="car-info">
      <div class="car-item">
        <div>
          <span class="number">{{dispatchData['泡沫车（PM）']}}</span>
          <span class="unit">辆</span>
        </div>
        <div class="label">泡沫车</div>
      </div>
      <div class="car-item">
        <div>
          <span class="number">{{dispatchData['水罐车（SG）']}}</span>
          <span class="unit">辆</span>
        </div>
        <div class="label"> 水罐车</div>
      </div>
      <div class="car-item">
        <div>
          <span class="number">{{dispatchData['抢险救援车（JY）']}}</span
          ><span class="unit">辆</span>
        </div>
        <div class="label"> 救援车</div>
      </div>
    </div>
  </ContainerBorder>
</template>

<script>
import { ContainerBorder } from '@/components'

export default {
  components: {
    ContainerBorder
  },
  data: () => ({
    dispatchData: {
      '警力出动': 36,
      '警车出动': 9,
      '泡沫车（PM）': 3,
      '水罐车（SG）': 6,
      '抢险救援车（JY）': 6,
    }
  })
}
</script>

<style lang="less" scoped>
@import url("@/assets/styles/common.less");
@font-color: #75faf6;
// 出动力量统计
.power-total {
  font-size: 17px;
  color: #fff;
  .flex(space-around);
  .total-item {
    .flex();
    .info-icon1 {
      margin-right: .5vw;
      width: 55px;
      height: 55px;
    }
    .info-icon2 {
      margin-right: .5vw; 
      width: 79px;
      height: 61px;
    }
    .info-data {
      .flex();
      flex-direction: column;
      .number {
        position: relative;
        font-size: 1.5vw;
        font-weight: 900;
        background-image: -webkit-linear-gradient(bottom,rgb(234, 163, 82),#ddc663); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          width: 40%;
          height: 80%;
          display: inline-block;
          background-image: -webkit-linear-gradient(bottom,rgba(234, 163, 82, .6),rgba(221, 198, 99, .6)); 
          top: 10%;
          filter: blur(1.1vh) brightness(100%) opacity(0.8);
          transform: scale(0.95) translate(-50%);
        }
      }
      .unit {
        margin-left: .5vw;
      }
      .label {

      }
    }
  }
}
// 人员信息
.people-info { 
  font-size: 17px;
  color: #fff;
  width: 100%;
  .flex(space-around);
  padding: .3vw 0vw;
  .people-item {
    .flex();
    flex-direction: column;
    .name {
      padding: .3vh 0vw;
      font-size: .74vw;
      color: @font-color;
    }

    .tag {
      width: 4.5vw;
      background: #06466a;
      border-radius: .1vw;
      text-align: center;
      padding: .2vh 0vw;
      margin: .3vh 0vw;
    }
    
    .phone {
      color: @font-color;
    }
  }
}
// 车辆资源信息
.car-info { 
  font-size: 17px;
  color: #fff;
  width: 100%;
  .flex(space-around);
  .car-item {
    .flex();
    width: 5.3vw;
    height: 6.7vh;
    flex-direction: column;
    background: url("@/assets/images/car-count-bg.png") no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    .number {
      font-size: 1.5vw;
      font-weight: 900;
      color: #e0be5f;
    }
    .unit {
      margin-left: .5vw;
    }

    .label {
      font-size: .8vw;
      font-weight: 400;
    }
  }
}
</style>
