<!--
 * @Description: 交通设施统计
 * @Author: 王晓颖
 * @Date:2020-11-30 17:07:53
 -->
<template>
  <chart-layout title="交通设施" @click="getData">
    <div style="width: 100%;height:100%;padding:0.1rem">
      <div class="progressBox">
        <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
        <div v-for="(value,index) in data" :key="index">
          <ProgressBar2 :data="value" :labelWidth=".4" />
        </div>
      </div>
    </div>
  </chart-layout>
</template>

<script>
import Legend from '@/components/legend/Legend'
import ProgressBar2 from '@/components/progressBar/ProgressBar2'
import ChartLayout from '@/components/layout/chartLayout'
import {fetchTrafficCount} from '@/api/cityManage'
import Corner2 from '@/components/corner/Corner2'
export default {
  name: 'trafficCountBar',
  components: {Corner2, ChartLayout, ProgressBar2, Legend},
  data () {
    return {
      data: [
        {title: '交通路口', num1: 0, num2: 0, percentage: 0},
        {title: '高速公路', num1: 0, num2: 0, percentage: 0},
        {title: '公交站台', num1: 0, num2: 0, percentage: 0},
        {title: '停车场', num1: 0, num2: 0, percentage: 0},
        {title: '停车位', num1: 0, num2: 0, percentage: 0}
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      fetchTrafficCount().then(response => {
        if (response.code === 200) {
          const dataFilter = []
          const data = response.data
          for (const item of data) {
            dataFilter.push({
              title: item.name,
              num1: item.complete,
              num2: item.plan,
              percentage: 100 * item.complete / item.plan
            })
          }
          this.data = dataFilter
        }
      })
    }
  }
}
</script>

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

</style>