<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
         {{resInfo.typeName || ''}}
      </el-col>
    </el-row>
    <el-row class="carNumber">
      <el-col class="carLot">
        <el-col>
          <img src="../../../assets/image/car2.png" alt="" />
        </el-col>
        <el-col class="carNumbderLot">
          <span class="green">{{resList[0] && resList[0].totalNum || ''}}</span>
          <span>车位总数</span>
        </el-col>
      </el-col>
      <el-col class="carLot">
        <el-col>
          <img src="../../../assets/image/car1.png" alt="" />
        </el-col>
        <el-col class="carNumbderLot">
          <span class="yellow">{{resList[0] && resList[0].tiatlFreeNum || ''}}</span>
          <span>空闲车位总数</span>
        </el-col>
      </el-col>
    </el-row>
    <el-row class="carLine">
      <div ref="echartD" style="width:100%;height:100%;"></div>
    </el-row>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
import echartsGet from './echart'
export default {
  props:['resInfo'],
  data() {
    return {
      resList: [],
    };
  },
  watch: {
    "$store.state.windowWidth"() {
      echarts.init(this.$refs.echartD).resize();
    },
    resInfo(){
      this.getData()
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    async getData(){
       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
        applicationCode: this.resInfo.applicationCode
      }))
      if(res.success){
        this.resList = res.data
        echarts.init(this.$refs.echartD).setOption(echartsGet(this.resList))
      }
    },
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  }
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view2.png") no-repeat;
  background-size: 100% 100%;
  font-family: Impact Regular, Impact Regular-Regular;
  .carLine {
    flex: 1;
    width: 100%;
  }
  .carNumber {
    height: 90px;
    padding: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > .el-col {
      flex: 1;
      height: 100%;
    }
    .carLot {
      display: flex;
      justify-content: center;
      .el-col {
        width: auto;
      }
      .carNumbderLot {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 10px;
        span {
          display: block;
        }
        & span:first-child{
          font-size: 28px;
        }
        & span:last-child{
          font-size: 16px;
          color: #DEF1FF;
        }
      }
    }
  }
}
</style>