<template>
  <div class="full">
    <!-- 数据面板 事件总数   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 10%;top: 10%;left: 10px">
      <div  class="center full" style="flex-direction: column">
        <div  style="width: 90%;height: 30%;color: white;line-height: 40px">车位总数</div>
        <div class="center" style="width: 70%;height: 60%;color: #47fcd2;font-size: 30px;font-style: italic;">500</div>
      </div>
    </dv-border-box-8>

    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 30%;top: 22%;left: 10px">
      <div class="full" style="flex-direction: column;padding-top: 7%">
        <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left;padding: 3%" class="center"></div>
        <div style="width: 100%;height: 57%;" class="center">
          <div style="width: 50%;height: 100%;flex-direction: column;" class="center">
            <div class="center" style="font-size: 30px;">{{95/100 * 100}} %</div>
            <div style="margin-top: 20px;font-size: 30px;"  class="center">车位占用</div>
          </div>
          <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">已占用车位
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic;">
                <CountIn :startVal='0' :endVal='115' :speed='1' :decimals="0" :isReverse=false></CountIn></div>
            </div>
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">空闲车位
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic">5</div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-8>

    <div class="center" style="position:absolute;top: 60%;width: 25%;height: 30%;left: 10px;flex-direction: column">
      <dv-border-box-4 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">
        <div class="full center" style="flex-direction: column">
          <div style="width: 90%;height: 20%;justify-content: left;" class="title center">机动车通行情况</div>
          <div style="width: 100%;height: 80%" id="business"></div>
        </div>
      </dv-border-box-4>
    </div>

    <div style="position:absolute;width: 25%;height: 5%;top: 7%;right: 1%;background: linear-gradient(to right, rgba(0,0,0,0.7),rgba(0,0,0,0.2));">
      <div class=" full center" style="justify-content: left;font-size: 22px;color: #00f9cf;text-indent: 20px;font-style: italic">
        车辆抓拍
      </div>
    </div>

    <dv-border-box-1 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 25%;height: 55%;top: 12%;right: 1%;">
      <div class="center full">
        <div  style="width: 91%;height: 92%;">
          <div @click="videoShow" v-for="(item,index) of carImg" :key="item" class="click" style="width: 50%;height: 33.3%;float: left;"
            :style="{
            background: 'url(/car/'+index+'.jpg) no-repeat center/cover'
            }"
          >
            <div style="width: 100%;height: 80%;"></div>
            <div style="width: 100%;height: 20%;background: rgba(0,0,0,0.5);color: #b5b5b5;font-style: italic" class="center">
              {{item}}
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-1>

    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 25%;height: 25%;top: 70%;right: 1%">
      <div class="full" style="flex-direction: column;padding-top: 2%">
        <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left;padding: 3%" class="center"> 车辆占比(进出)</div>
        <div style="width: 100%;height: 57%;" class="center">
          <div style="width: 50%;height: 100%;" class="center">
            <dv-active-ring-chart :config="eventOption" style="width:100%;height:90%" />
          </div>
          <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">总车辆
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic">
                <CountIn :startVal='0' :endVal='120' :speed='1' :decimals="0" :isReverse=false></CountIn></div>
            </div>
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">外来车辆
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic;">
                <CountIn :startVal='0' :endVal='115' :speed='1' :decimals="0" :isReverse=false></CountIn></div>
            </div>
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">内部车辆
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic">5</div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script>
import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
import CountIn from "../count-in/count-in";
export default {
  components: {CountIn},
  mounted() {
    this.initCharts();
    this.onload();
    },

  data(){
    return{
      business: {},
      eventOption: {
        digitalFlopStyle: {
          fontSize: 20,
          fill: '#fff'
        },
        data: [
          {
            name: '外来',
            value: 10
          },
          {
            name: '内部',
            value: 1
          }
        ]
      },
      sourceList: [
        {label: '应急物资',value: '2400'},
        {label: '应急队伍',value: '230'},
        {label: '城市部件',value: '8605'},
        {label: '现场还原',value: '5260'},
      ],
      carImg: [
        "粤K1234",
        "宁A096L0",
        "宁A096L0",
        "宁A096L0",
        "宁A096L0",
        "宁A096L0",
      ]
    }
  },
  methods: {
    initCharts(){
      this.newCharts("business","business");
    },
    newCharts(id,propertyName){
      const container = document.getElementById(id)
      let myChart = new Charts(container);
      this[propertyName] = myChart;
    },
    videoShow(){
      this.$emit("videoShow",{});
    },
    setOption() {
      this.business.setOption({
        legend: {
          data: ['内部车辆进出','外部车辆进出'],
          textStyle: {
            fontWeight: 'bold',
            textColor:'#ffffff'
          }
        },
        title: {
          text: '外来车辆与内部车辆通行情况',
          style: {
            fill: '#5fe9c8',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        yAxis: {
          data: 'value',
          nameTextStyle: {
            fill: '#5fe9c8',
            fontSize: 10
          },
          axisLabel:{
            style:  {
              fill: '#5fe9c8',
              fontSize: 12
            }}
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          nameTextStyle: {
            fill: '#5fe9c8',
            fontSize: 10
          },
          axisLabel:{
            style:  {
              fill: '#5fe9c8',
              fontSize: 12
            }}
        },
        series:[
          {
            name: '内部车辆进出',
            data: [310, 323, 390, 410, 350, 420, 398],
            type: 'bar',
            animationCurve: 'easeOutBack'
          },
          {
            name: '外部车辆进出',
            data: [200, 223, 190, 210, 250, 200, 298],
            type: 'bar',
            animationCurve: 'easeOutBack'
          }
        ]
      });
    },
    onload(){
      changeDefaultConfig('color',['rgb(208,200,21)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
      this.setOption();
    },
  }
}
</script>

<style scoped>
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .full{
    width: 100%;
    height: 100%;
  }
  .closeButton{
    background:rgba(84,36,17,0.5) ;
  }
  .closeButton:hover{
    background:rgba(84,36,17,0.8) ;
  }
  .click{
    cursor: pointer;
  }
  .click:hover{
    transform: translate(2px,2px);
  }

</style>
