<template>
  <div class="real-time">
    <div class="real-time-tit">实时数据</div>
    <div style="height: 250px">
      <div class="p-2.5 flex flex-wrap justify-around">
        <div class="group group1" v-if="stationInfo">
          <div class="item">
            <div class="label">入口车流辆</div>
            <div class="mt-2 label2">
              {{ formatThousand(stationInfo.enflowCount) || '-' }}
              <span class="label3">辆</span>
            </div>
          </div>
          <div class="item">
            <div class="label">出口车流量</div>
            <div class="mt-2 label2">
              {{ formatThousand(stationInfo.exflowCount) }}
              <span class="label3">辆</span>
            </div>
          </div>
          <div class="item">
            <div class="label">出口交易金额</div>
            <div class="mt-2 label2">
              {{ formatThousandMoney(stationInfo.feeSum) }}
              <span class="label3">万元</span>
            </div>
          </div>
        </div>
        <div class="group group2" v-if="GantryOptInfo">
          <div class="item">
            <div class="label">门架计费金额</div>
            <div class="mt-2 label2">
              {{
                formatThousandMoney(GantryOptInfo.feeSum
                )
              }}
              <span class="label3">万元</span>
            </div>
          </div>
          <div class="item">
            <div class="label">门架车流量</div>
            <div class="mt-2 label2">
              {{ formatThousand(GantryOptInfo.flowCount) }}
              <span class="label3">辆</span>
            </div>
          </div>
        </div>
        <div class="group group3" v-if="DiseaseInfo">
          <div class="item">
            <div class="label">病害数量</div>
            <div class="mt-2 label2">
              {{ formatThousand(DiseaseInfo.diseaseCount) }}
              <span class="label3">个</span>
            </div>
          </div>
          <div class="item">
            <div class="label">已维修病害数量</div>
            <div class="mt-2 label2">
              {{ formatThousand(DiseaseInfo.disFinishedCount) }}
              <span class="label3">个</span>
            </div>
          </div>
          <div class="item">
            <div class="label">待维修病害数量</div>
            <div class="mt-2 label2">
              {{ formatThousand(DiseaseInfo.disUnfinishedCount) }}
              <span class="label3">个</span>
            </div>
          </div>
        </div>
        <div class="group group4" v-if="ElecFaultInfo">
          <div class="item">
            <div class="label">机电故障上报数量</div>
            <div class="mt-2 label2">
              {{ formatThousand(ElecFaultInfo.faultCount) }}
              <span class="label3">个</span>
            </div>
          </div>
          <div class="item">
            <div class="label">机电故障已维修数量</div>
            <div class="mt-2 label2">
              {{ formatThousand(ElecFaultInfo.finishFaultCount) }}
              <span class="label3">个</span>
            </div>
          </div>
          <div class="item">
            <div class="label">机电故障待维修数量</div>
            <div class="mt-2 label2">
              {{ formatThousand(ElecFaultInfo.unfinishFaultCount) }}
              <span class="label3">个</span>
            </div>
          </div>
        </div>
        <div class="group group5">
          <div class="item">
            <div class="label">服务区营收</div>
            <div class="mt-2 label2">
              {{ formatThousand(0) }}
              <span class="label3">万元</span>
            </div>
          </div>
          <div class="item">
            <div class="label">服务区人流量</div>
            <div class="mt-2 label2">
              {{ formatThousand(0) }}
              <span class="label3">个</span>
            </div>
          </div>
          <div class="item">
            <div class="label">服务区危化品车辆</div>
            <div class="mt-2 label2">
              {{ formatThousand(0) }}
              <span class="label3">辆</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import moment from 'moment';
import mapModule from '@/components/map-module/index.vue';
import { ref, onMounted, computed, reactive, watch } from 'vue';
import { formatThousand,formatThousandMoney } from '@/utils/util';
// import { getChargeBoard } from "@/api/operation";
import { getStationOptDayMonitor,getGantryOptSummary,getDisease,getElecFault } from '@/api/optOverview';
import { useStore } from 'vuex';
import { key } from '@/store';
import { useRequest } from 'vue-request';

const store = useStore(key);
const selectRoadId = computed(() => store.state.road?.selectRoadId[2]);
const date = computed(() => store.state.appDate);

// 收费站
const { data: stationData, refresh: stationDataRefresh } = useRequest(() =>
  getStationOptDayMonitor({
    level: 0,
    day: moment(date).format('yyyyMMDD'),
    sectionId: selectRoadId.value
  })
);
let stationInfo = computed(() => {
  return stationData?.value?.msgContent[0];
});

// 门架
const { data: GantryOptData, refresh: GantryOptDataRefresh } = useRequest(() =>
  getGantryOptSummary({
    level: 0,
    day: moment(date).format('yyyyMMDD'),
    sectionId: selectRoadId.value
  })
);
let GantryOptInfo = computed(() => {
  return GantryOptData?.value?.msgContent[0];
});


// 病害
const { data: DiseaseData, refresh: DiseaseRefresh } = useRequest(() =>
  getDisease({
    level: 0,
    day: moment(date).format('yyyyMMDD'),
    sectionId: selectRoadId.value
  })
);
let DiseaseInfo = computed(() => {
  return DiseaseData?.value?.msgContent[0];
});


// 机电
const { data: ElecFaultData, refresh: ElecFaultRefresh } = useRequest(() =>
  getElecFault({
    level: 0,
    day: moment(date).format('yyyyMMDD'),
    sectionId: selectRoadId.value
  })
);
let ElecFaultInfo = computed(() => {
  return ElecFaultData?.value?.msgContent[0];
});


// 根据路段变化请求接口
watch(selectRoadId, v => {
  stationDataRefresh()
  GantryOptDataRefresh()
  DiseaseRefresh()
  ElecFaultRefresh()
});
// 根据日期变化请求接口
watch(date, v => {
  stationDataRefresh()
  GantryOptDataRefresh()
  DiseaseRefresh()
  ElecFaultRefresh()
});
</script>
<style lang="postcss" scoped>
.real-time {
  width: calc(70% - 349px);
  height: 300px;
  background: rgba(5, 15, 45, 0.5);
  position: absolute;
  bottom: 40px;
  left: 25%;
  right: 0;
  background: url('@/assets/images/roadVisualization/ssbg.png');
  background-size: 100% 100%;
  padding-top: 25px;
}
.real-time-tit {
  font-size: 14px;
  width: 300px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(to right, transparent, #b37e2b, transparent);
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: -15px;
}
.label {
  @apply font-normal;
  font-size: 12px;
  color: #a8c2da;
}
.label2 {
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: bold;
  padding-left: 15px;
}
.label3 {
  font-size: 13px;
  color: #798a9a;
  display: inline-block;
  margin-left: 5px;
}
.item {
  margin: 10px 0 20px;
}
.group1 {
  & .label:before {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('@/assets/images/roadVisualization/group-icon1.png');
    background-size: 100% 100%;
    content: '';
    vertical-align: middle;
  }
  & .label2 {
    color: #0084fb;
  }
}
.group2 {
  & .label:before {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('@/assets/images/roadVisualization/group-icon2.png');
    background-size: 100% 100%;
    content: '';
    vertical-align: middle;
  }
  & .label2 {
    color: #ff9914;
  }
}
.group3 {
  & .label:before {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('@/assets/images/roadVisualization/group-icon3.png');
    background-size: 100% 100%;
    content: '';
    vertical-align: middle;
  }
  & .label2 {
    color: #ffed9c;
  }
}
.group4 {
  & .label:before {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('@/assets/images/roadVisualization/group-icon4.png');
    background-size: 100% 100%;
    content: '';
    vertical-align: middle;
  }
  & .label2 {
    color: #39ffd7;
  }
}
.group5 {
  & .label:before {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('@/assets/images/roadVisualization/group-icon5.png');
    background-size: 100% 100%;
    content: '';
    vertical-align: middle;
  }
  & .label2 {
    color: #ff9914;
  }
}
</style>
