<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="main">
          <div class="right-box">
            <FuelRanking />
            <div>
              <FuelRegistration />
            </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 />
            </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 :fierList="fierList" />
            <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 />
            </div>
          </div>
          <div class="left-box">
            <VehicleDistribution />
            <div>
              <CarType />
            </div>
          </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'
export default {
  mixins: [drawMixin],
  components: {
    FuelRanking,
    FuelRegistration,
    VehicleDistribution,
    CarType,
    unit3D,
    cardDistribution,
    VehicleCarAllocation,
  },
  data() {
    return {
      dateYear: null,
      dateWeek: null,
      dateDay: null,
      weekday: ['周日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      loading: true,
      fierList: [
        {
          glxs: '其他管理形式',
          sl: 91,
          qy: '全市',
        },
        {
          glxs: '居民自主管理',
          sl: 885,
          qy: '全市',
        },
        {
          glxs: '无管理主体',
          sl: 160,
          qy: '全市',
        },
        {
          glxs: '有管理单位（物业）',
          sl: 38569,
          qy: '全市',
        },
        {
          glxs: '有管理单位（非物业）',
          sl: 1848,
          qy: '全市',
        },
        {
          glxs: '街道社区代管',
          sl: 3145,
          qy: '全市',
        },
      ],
      text:'油卡分配'
    }
  },
  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){
        this.text=val
    },
    cancelLoading() {
      setTimeout(() => {}, 500)
    },
    toManage() {
      this.$router.push({ path: '/cardiot' })
    },
  },
}
</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;
    }
  }
}
</style>
