<!--
 * @Description:车位占用情况：占用数、总车位、占用率
 * @Author: 王晓颖
 * @Date: 2020-10-13 14:32:10
 -->
<template>
  <div style="height: 100%;width:100%">
    <chart-layout title="车位占用情况" @click="getData">
      <div style="width: 100%;height:100%;padding:0.1rem">
        <EarthViews :data="data" height="100%" />
      </div>
      <Corner1 slot="corner"/>
    </chart-layout>
  </div>
</template>

<script>
import SimplePieChart from '@/components/pieChart/simplePieChart'
import Corner1 from '@/components/corner/Corner1'
import ChartLayout from '@/components/layout/chartLayout'
import EarthViews from '@/components/EarthViews/EarthViews'
import {fetchParkOccupation, fetchAverageParkTime} from '@/api/cityManage'
export default {
  name: 'parkEarth',
  components: {EarthViews, ChartLayout, Corner1, SimplePieChart},
  data () {
    return {
      data: [
        { name: '总车位数', num: '' },
        { name: '已占用车位数', num: '' },
        { name: '占用率', num: '%' },
        // { name: '平均停车时长', num: '0h' }
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.getOccupation()
      // this.getOccupationByPark()
    },
    getOccupation () {
      fetchParkOccupation().then(response => {
        if (response.code === 200) {
          const data = []
          data[0] = {name: '总车位数', num: response.data.total}
          data[1] = {name: '已占用车位数', num: response.data.already}
          let radio = Math.round(response.data.already / response.data.total * 100)
          data[2] = {name: '占用率', num: radio + '%'}
          this.data.splice(0, data.length, ...data)
        }
      })
    },
    getOccupationByPark () {
      fetchAverageParkTime().then(response => {
        if (response.code === 200) {
          const average = response.data.average
          const data = {name: '平均停车时长', num: average + 'h'}
          this.data.splice(3, 1, data)
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>