<!--
 * @Description: 交通安全指数
 * @Author: 王晓颖
 * @Date: 2020-09-02 15:38:35
 -->
<template>
    <chart-layout title="交通安全指数" @click="getData">
      <div style="width:100%; height:100%;display: flex; justify-content: space-between;">
        <div style="width:60%;height:100%;box-sizing:border-box;padding:0.01rem">
          <div class="container" style="height:50%;">
            <div class="index-box">
              <traffic-index :data="gem">
                <img :src="gemImg">
              </traffic-index>
            </div>
            <div class="index-box">
              <traffic-index :data="trouble">
                <img :src="troubleImg">
              </traffic-index>
            </div>
            <div class="index-box">
              <traffic-index :data="flow">
                <img :src="flowImg">
              </traffic-index>
            </div>
          </div>
          <div class="container" style="height:50%;">
            <div class="index-box">
              <road-traffic-index :header="gemConfig.header" :data="gemConfig.data"/>
            </div>
            <div class="index-box">
              <road-traffic-index :header="troubleConfig.header" :data="troubleConfig.data"/>
            </div>
            <div class="index-box">
              <road-traffic-index :header="flowConfig.header" :data="flowConfig.data"/>
            </div>
          </div>
        </div>
        <div style="width:40%;height: 100%;">
          <traffic-index-line/>
        </div>
      </div>
      <corner1 slot="corner"/>
    </chart-layout>
</template>

<script>
import TrafficIndex from './components/trafficIndex'
import RoadTrafficIndex from './components/roadTrafficIndex'
import {fetchGemIndexNow, fetchCaseIndexNow, fetchFlowIndexNow, fetchRoadGemIndexNow, fetchRoadCaseIndexNow, fetchRoadFlowIndexNow} from '@/api/smartTraffic'
import TrafficIntroduce from './trafficIntroduce'
import TrafficIndexLine from "./components/trafficIndexLine";
export default {
  name: 'trafficSafety',
  components: {TrafficIndexLine, TrafficIntroduce, RoadTrafficIndex, TrafficIndex},
  data () {
    return {
      gem: {
        name: '拥堵指数',
        value: '341',
        valueStatus: 'warning',
        percent: '+12%',
        percentageStatus: 'up'
      },
      trouble: {
        name: '违章事故指数',
        value: '112',
        valueStatus: 'danger',
        percent: '0.0%',
        percentageStatus: 'fair'
      },
      flow: {
        name: '交通流量指数',
        value: '131',
        valueStatus: 'normal',
        percent: '-12.1%',
        percentageStatus: 'down'
      },
      gemImg: require('@/assets/images/traffic/gem.png'),
      troubleImg: require('@/assets/images/traffic/trouble.png'),
      flowImg: require('@/assets/images/traffic/flow.png'),
      gemConfig: {
        header: ['道路名称', '拥堵指数', '同比'],
        data: [['紫藤花路', '3', '23%'],
          ['潇雨路', '5', '23%'],
          ['赣南大道', '7', '23%'],
          ['城市公园', '18', '23%'],
          ['创业路', '4', '23%'],
          ['文轩路', '3', '23%'],
          ['景明路', '3', '23%'],
          ['碧玉南路', '3', '23%'],
          ['润城河路', '3', '23%'],
          ['名胜古迹', '2', '23%']]
      },
      troubleConfig: {
        header: ['道路名称', '违章事故指数', '同比'],
        data: [['紫藤花路', '3', '23%'],
          ['潇雨路', '5', '23%'],
          ['赣南大道', '7', '23%'],
          ['城市公园', '18', '23%'],
          ['创业路', '4', '23%'],
          ['文轩路', '3', '23%'],
          ['景明路', '3', '23%'],
          ['碧玉南路', '3', '23%'],
          ['润城河路', '3', '23%'],
          ['名胜古迹', '2', '23%']]
      },
      flowConfig: {
        header: ['道路名称', '交通流量指数', '同比'],
        data: [['紫藤花路', '3', '23%'],
          ['潇雨路', '5', '23%'],
          ['赣南大道', '7', '23%'],
          ['城市公园', '18', '23%'],
          ['创业路', '4', '23%'],
          ['文轩路', '3', '23%'],
          ['景明路', '3', '23%'],
          ['碧玉南路', '3', '23%'],
          ['润城河路', '3', '23%'],
          ['名胜古迹', '2', '23%']]
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.getGemIndex()
      this.getCaseIndex()
      this.getFlowIndex()
      this.getRoadGemIndex()
      this.getRoadCaseIndex()
      this.getRoadFlowIndex()
    },
    getGemIndex () {
      fetchGemIndexNow().then(response => {
        if (response.code === 200) {
          this.gem = Object.assign(this.gem, response.data)
        }
      })
    },
    getCaseIndex () {
      fetchCaseIndexNow().then(response => {
        if (response.code === 200) {
          this.trouble = Object.assign(this.trouble, response.data)
        }
      })
    },
    getFlowIndex () {
      fetchFlowIndexNow().then(response => {
        if (response.code === 200) {
          this.flow = Object.assign(this.flow, response.data)
        }
      })
    },
    getRoadGemIndex () {
      fetchRoadGemIndexNow().then(response => {
        if (response.code === 200) {
          const data = response.data
          const body = data.map((item) => { return [item.name, item.value, item.percent] })
          this.gemConfig.data = body
        }
      })
    },
    getRoadCaseIndex () {
      fetchRoadCaseIndexNow().then(response => {
        if (response.code === 200) {
          const data = response.data
          const body = data.map((item) => { return [item.name, item.value, item.percent] })
          this.troubleConfig.data = body
        }
      })
    },
    getRoadFlowIndex () {
      fetchRoadFlowIndexNow().then(response => {
        if (response.code === 200) {
          const data = response.data
          const body = data.map((item) => { return [item.name, item.value, item.percent] })
          this.flowConfig.data = body
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    display: flex;
    justify-content: space-between;
  }
.index-box{
  height:100%;
  width:33%;
  display: flex;
  justify-content: center;
}
</style>