<template>
  <div class="module-container">
    <module-header title="基本概览"></module-header>
    <div class="module-body basic-overview">
      <section-title title="巡查基础概况"></section-title>
      <div class="overview-item">
        <div
          class="overview-item-total overview-item-01"
          @click="handleToPage('infoMgmtPatrolsManage')"
        >
          <div class="num">36<span>个</span></div>
          <div class="title">巡查驻点</div>
        </div>
        <div
          class="overview-item-type"
          @click="handleToPage('patrolAndRescuePersonnelMgmt')"
        >
          <div class="info-type">
            <img src="~@/assets/img/bigScreen/basic/xjry.png" alt="" />
            <div class="info-total">
              <div class="num">123</div>
              <div class="text">巡查人员</div>
            </div>
          </div>
          <div class="gap-line"></div>
          <div class="info-current">当前巡查人员<span>36</span> 人</div>
        </div>
        <div
          class="overview-item-type"
          @click="handleToPage('patrolAndRescueVehicleMgmt')"
        >
          <div class="info-type">
            <img src="~@/assets/img/bigScreen/basic/xjcl.png" alt="" />
            <div class="info-total">
              <div class="num">62</div>
              <div class="text">巡查车辆</div>
            </div>
          </div>
          <div class="gap-line"></div>
          <div class="info-current">当前巡查车辆<span>100</span> 辆</div>
        </div>
      </div>
      <section-title title="救援基础概况"></section-title>
      <div class="overview-item">
        <div
          class="overview-item-total overview-item-02"
          @click="handleToPage('rescueSiteMgmt')"
        >
          <div class="num">36<span>个</span></div>
          <div class="title">救援驻点</div>
        </div>
        <div
          class="overview-item-type overview-item-02"
          @click="handleToPage('rescuePersonnelMgmt')"
        >
          <div class="info-type">
            <img src="~@/assets/img/bigScreen/basic/jyry.png" alt="" />
            <div class="info-total">
              <div class="num">123</div>
              <div class="text">救援人员</div>
            </div>
          </div>
          <div class="gap-line"></div>
          <div class="info-current">当前救援人员<span>36</span> 人</div>
        </div>
        <div
          class="overview-item-type overview-item-02"
          @click="handleToPage('patrolAndRescueVehicleMgmt')"
        >
          <div class="info-type">
            <img src="~@/assets/img/bigScreen/basic/jycl.png" alt="" />
            <div class="info-total">
              <div class="num">62</div>
              <div class="text">救援车辆</div>
            </div>
          </div>
          <div class="gap-line"></div>
          <div class="info-current">当前救援车辆<span>100</span> 辆</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ModuleHeader from '../components/moduleHeader.vue'
import SectionTitle from '../components/sectionTitle.vue'
export default {
  name: 'basic',
  components: {ModuleHeader, SectionTitle},
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  methods: {
    handleToPage(pageName) {
      window.open(this.$router.resolve({name: pageName}).href, '_blank')
    },
  },
}
</script>
<style scoped lang="scss">
.module-container {
  width: 100%;
  height: 100%;
  background: linear-gradient( 270deg, rgba(12,22,51,0.3) 0%, rgba(10,17,26,0.5) 100%);
  padding: 0 10px 10px 0;
  box-sizing: border-box;
  .module-body{
    height: calc(100% - 34px);
    width: 100%;
    margin-top: 10px;
  }
  .basic-overview{
    display: flex;
    flex-direction: column;
    .overview-item{
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        
    }
    .overview-item-total{
        width: 134px;
        height: 134px;
        background: url('~@/assets/img/bigScreen/basic/pic01.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        .num{
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 30px;
            line-height: 30px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            color: #00AAFF;
            text-align: right;
            font-weight: bold;
            margin-top: 20px;
            span{
                margin-left: 5px;
            }
        }
        .title{
            text-align: right;
            font-size: 14px;
            color: #CCE6FF;
            line-height: 18px;
            margin-top: -4px;
        }
    }
    .overview-item-total.overview-item-02{
        background: url('~@/assets/img/bigScreen/basic/pic02.png') no-repeat;
        background-size: 100% 100%;
        .num{
            color: #00EB89;
        }
    }
    .overview-item-type{
        cursor: pointer;
        .info-type{
            display: flex;
            align-items: center;
            img{
                width: 40px;
                height: 40px;
                margin-right: 6px;
            }
            .info-total{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .num{
                    font-size: 24px;
                    font-weight: bold;
                    color: #00AAFF;
                 }
                .text{
                    font-size: 12px;
                    color: #CCE6FF;
                 }
             }  
        }
        .gap-line{
            width: 100%;
            height: 1px;
            background: rgba(51,153,255,0.2);
            margin: 10px 0;
        }
        .info-current{
            font-size: 12px;
            color: #CCE6FF;
            line-height: 18px;
            margin-top: 10px;
            span{
                font-size: 14px;
                font-weight: bold;
                color: #00AAFF;
                padding: 0 5px;
            }
        }
    }
    .overview-item-type.overview-item-02{
        .info-total{
            .num{
                color: #00EB89;
             }
        }  
         .info-current{
            span{
                color: #00EB89;
            }
        }
    }
  }
}
</style>