<template>
  <div id="index" ref="appRef">
    <div class="bg-img">
      <div v-if="dateYear">
        <!-- header -->
        <div class="header">
          <div class="title">重庆两江消防车辆智能指挥调度系统</div>
          <div class="pc-img" @click="toManage"></div>
          <div class="tq-info">
            <div class="tx-img"></div>
            <div style="display: flex">
              <div class="react-right">
                <span class="react-after"></span>
                <span class="text"
                  >{{ dateYear }} {{ dateWeek }}
                  <div class="day">{{ dateDay }}</div>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="selt">
          <a-select style="width: 160px" placeholder="请选择" v-model="selt">
            <a-select-option v-for="(d, index) in typeList" :key="index" :value="d.value">{{
              d.lable
            }}</a-select-option>
          </a-select>
        </div>
        <div class="yh-info">
          <RefuelingStatistics :itemsTime="itemsTime" :selt="selt" />
        </div>
        <div class="main">
          <div class="right-box">
            <FuelRanking :itemsTime="itemsTime" :selt="selt" />
            <div>
              <FuelRegistration :itemsTime="itemsTime" :selt="selt" />
            </div>
          </div>
          <div class="main-box">
            <div class="left-car">
              <div style="display: flex; justify-content: space-around; margin-top: 8px">
                <span style="color: #70fffd; font-size: 20px">油卡分配</span>
                <img class="imgs" src="../../assets/vehicle/Vector (7).png" alt="" />
              </div>
              <!-- 油卡分配 -->
              <cardDistribution :yCardList="yCardList" />
            </div>
            <div class="main-tab">
              <img class="tab-left" src="../../assets/vehicle/left.png" alt="" @click="changeTab('油卡分配')" />
              <span class="tab-text">{{ text }}</span>
              <img class="tab-right" src="../../assets/vehicle/right.png" alt="" @click="changeTab('消防车辆分配')" />
            </div>
            <unit3D v-if="text == '油卡分配'" :fierList="fierList" />
            <unit3Ds v-else-if="text == '消防车辆分配'" :carsList2="carsList2" />
            <div class="right-car">
              <div style="display: flex; justify-content: space-around; margin-top: 8px">
                <span style="color: #70fffd; font-size: 20px">消防车辆分配</span>
                <img class="imgs" src="../../assets/vehicle/Vector (8).png" alt="" />
              </div>
              <!-- 车辆分配 -->
              <VehicleCarAllocation :allocationList="allocationList" />
            </div>
          </div>
          <div class="left-box">
            <VehicleDistribution :dataList="dataList" />
            <div>
              <CarType :carTypeLists="carTypeLists" />
            </div>
          </div>
        </div>
        <div class="can-set">
          <div @click="changeTime('CURRENT_WEEK')" :class="addChangeTime('CURRENT_WEEK')">本周</div>
          <div @click="changeTime('CURRENT_MONTH')" :class="addChangeTime('CURRENT_MONTH')">本月</div>
          <div @click="changeTime('CURRENT_YEAR')" :class="addChangeTime('CURRENT_YEAR')">本年</div>
          <div @click="changeTime('ALL')" :class="addChangeTime('ALL')">全部</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from '../../mixin/drawMixin.js'
import { formatTime } from '../../mixin/index'
import FuelRanking from './components/FuelRanking'
import FuelRegistration from './components/FuelRegistration'
import VehicleDistribution from './components/VehicleDistribution'
import CarType from './components/CarType'
import unit3D from './components/unit3D'
import cardDistribution from './components/cardDistribution'
import VehicleCarAllocation from './components/VehicleCarAllocation'
import unit3Ds from './unit3Ds'
import RefuelingStatistics from './components/RefuelingStatistics.vue'
import {
  getAllocationForCar,
  getTypeProportionForCar,
  getDistributionForFuelCard,
  getDistributionForCar,
} from '@/api/vehicle.js'
export default {
  mixins: [drawMixin],
  components: {
    FuelRanking,
    FuelRegistration,
    VehicleDistribution,
    CarType,
    unit3D,
    cardDistribution,
    VehicleCarAllocation,
    unit3Ds,
    RefuelingStatistics,
  },
  data() {
    return {
      dateYear: null,
      dateWeek: null,
      dateDay: null,
      weekday: ['周日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      loading: true,
      fierList: [],
      carsList2: [],
      text: '消防车辆分配',
      allocationList: [],
      carTypeLists: [],
      yCardList: [],
      dataList: [],
      typeList: [
        {
          lable: '全部',
          value: 3,
        },
        {
          lable: '消防车',
          value: 1,
        },
        {
          lable: '公务车',
          value: 2,
        },
      ],
      selt:3,
      itemsTime:'CURRENT_WEEK'
    }
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    changeTab(val) {
      if (val == '油卡分配') {
        this.fierList = this.yCardList
      } else if (val == '消防车辆分配') {
        this.carsList2 = this.allocationList
      }
      this.text = val
    },
    cancelLoading() {
      setTimeout(() => {}, 500)
    },
    toManage() {
      this.$router.push({ path: '/cardiot' })
    },
    funAllocationForCar() {
      getAllocationForCar().then((res) => {
        // console.log('--------油卡分配',res);
        this.allocationList = res.data

        this.carsList2 = this.allocationList
      })
    },
    funTypeProportionForCar() {
      getTypeProportionForCar().then((res) => {
        this.carTypeLists = res.data
      })
    },
    funDistributionForFuelCard() {
      getDistributionForFuelCard().then((res) => {
        this.yCardList = res.data
        this.fierList = this.yCardList
      })
    },
    funDistributionForCar() {
      getDistributionForCar().then((res) => {
        this.dataList = res.data
      })
    },
    changeTime(val){
      this.itemsTime=val
    },
    addChangeTime(ev){
      return this.itemsTime==ev?'active':''
    },
  },
  created() {
    this.funAllocationForCar()
    this.funTypeProportionForCar()
    this.funDistributionForFuelCard()
    this.funDistributionForCar()
  },
}
</script>

<style lang="less" scoped>
#index {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
.bg-img {
  width: 100%;
  height: 100%;
  background: url('../../assets/vehicle/9ba2875d9c2997253ac20aa84fee565.png') no-repeat;
  background-size: cover;
  background-position: center center;
  .header {
    width: 100%;
    height: 92px;
    line-height: 92px;
    background: url('../../assets/vehicle/header.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    // margin-bottom: 15px;
    .title {
      font-size: 32px;
      font-family: YouSheBiaoTiHei;
      font-weight: bold;
      color: #daffff;
      margin-left: 100px;
    }
    .tq-info {
      //   width: 500px;
      display: flex;
      align-items: center;
      margin-right: 22px;
      .tx-img {
        width: 44px;
        height: 44px;
        background: url('../../assets/vehicle/Frame 10771.png') no-repeat;
        background-size: 100% 100%;
      }
      .react-right {
        font-size: 20px;
        color: #fff;
        height: 44px;
        // background: #a5d2ec;
        line-height: 32px;
        margin-left: 15px;
      }
      .text {
        color: #00aaff;
      }
      .day {
        display: inline-block;
        color: #fff;
        font-size: 36px;
        font-size: PingFang SC;
        // padding-top: 5px;
      }
    }
    .pc-img {
      width: 140px;
      height: 42px;
      background: url('../../assets/vehicle/pc.png') no-repeat;
      margin-top: 25px;
      margin-left: 717px;
      cursor: pointer;
    }
  }
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px 0 15px;
    .right-box {
      width: 443px;
      height: 980px;
      // background: red;
    }
    .main-box {
      flex: 1;
      position: relative;
      .left-car {
        // height: 350px;
        position: absolute;
        top: 23%;
        left: 30px;
        z-index: 1000;
        border: 1px solid #00a3ff;
      }
      .right-car {
        position: absolute;
        top: 23%;
        right: 30px;
        z-index: 1000;
        border: 1px solid #00a3ff;
      }
      .imgs {
        display: inline-block;
        width: 20px;
        height: 18px;
        margin-top: 10px;
      }
      .main-tab {
        width: 280px;
        position: absolute;
        top: 22%;
        left: 37%;
        z-index: 99999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tab-left {
          display: inline-block;
          width: 34px;
          height: 34px;
          cursor: pointer;
        }
        .tab-right {
          display: inline-block;
          width: 34px;
          height: 34px;
          cursor: pointer;
        }
        .tab-text {
          font-size: 26px;
          color: #70fffd;
        }
      }
    }
    .left-box {
      display: inline-block;
      width: 443px;
      height: 980px;
    }
  }
  .selt {
    position: absolute;
    left: 65%;
    top: 11%;
    z-index: 999999;
    /deep/.ant-select-selection--single {
      width: 180px;
      stroke-width: 1px;
      background: rgba(0, 163, 255, 0.3);
      height: 45px;
      color: #70fffd;
      font-size: 20px;
      text-align: center;
    }
    /deep/.ant-select-arrow .ant-select-arrow-icon {
      font-size: 18px;
      color: #70fffd;
    }
    /deep/.ant-select-selection__rendered {
      left: 55px;
      line-height: 39px;
    }
  }
  .yh-info {
    position: absolute;
    top: 16%;
    left: 26%;
  }
  .can-set {
    position: absolute;
    bottom: 10%;
    left: 70%;
    text-align: center;
    text-shadow: 0px 2px 6px #001751;
    font-family: '仿宋';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px; /* 172.727% */
    letter-spacing: 0.88px;
    color: #cae2ff;
    cursor: pointer;
  }
}
.active{
  width: 107px;
  height: 51px;
  background: url('../../assets/vehicle/xz-btn.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: rgba(252, 255, 126, 0.95);
  line-height: 51px;
}
</style>
