<!--
 * @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 v-if="isShow"/>
          <traffic-index-bar v-if="!isShow"/>
        </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'
import TrafficIndexBar from './components/trafficIndexBar'
import mockData from '../../../../../static/city.json'
export default {
  name: 'trafficSafety',
  components: {TrafficIndexBar, TrafficIndexLine, TrafficIntroduce, RoadTrafficIndex, TrafficIndex},
  data () {
    return {
      compTimer: null,
      isShow: true,
      gem: {
        name: '拥堵指数',
        value: '',
        valueStatus: 'warning',
        // percent: '+2%',
        // percentageStatus: 'up'
        percent: '0.0%',
        percentageStatus: 'fair'
      },
      trouble: {
        name: '违法指数',
        value: '',
        valueStatus: 'danger',
        // percent: '-5.7%',
        // percentageStatus: 'down'
        percent: '0.0%',
        percentageStatus: 'fair'
      },
      flow: {
        name: '交通流量指数',
        value: '',
        valueStatus: 'normal',
        // percent: '+7.2%',
        // percentageStatus: 'up'
        percent: '0.0%',
        percentageStatus: 'fair'
      },
      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', '3%'],
          // ['潇雨路', '5', '6%'],
          // ['赣南大道', '7', '1%'],
          // ['城市公园', '18', '2%'],
          // ['创业路', '4', '8%']
        ]
      },
      troubleConfig: {
        header: ['道路名称', '违章事故指数', '同比'],
        data: [
          // ['紫藤花路', '3', '4%'],
          // ['潇雨路', '5', '1%'],
          // ['赣南大道', '7', '1%'],
          // ['城市公园', '18', '2%'],
          // ['创业路', '4', '6%'],
          // ['文轩路', '3', '2%']
        ]
      },
      flowConfig: {
        header: ['道路名称', '交通流量指数', '同比'],
        data: [
          // ['紫藤花路', '3', '5%'],
          // ['潇雨路', '5', '7%'],
          // ['赣南大道', '7', '2%'],
          // ['城市公园', '18', '4%'],
          // ['创业路', '4', '1%'],
          // ['文轩路', '3', '8%']
        ]
      }
    }
  },
  created () {
    this.compChange()
    this.getData()
  },
  methods: {
    compChange () {
      this.compTimer = setTimeout(() => {
        this.isShow = !this.isShow
        this.compChange()
      }, 10 * 1000)
    },
    getData () {
      // this.getGemIndex()
      // this.getCaseIndex()
      // this.getFlowIndex()
      this.gem = mockData.traffic.safe.gem
      this.trouble = mockData.traffic.safe.trouble
      this.flow = mockData.traffic.safe.flow
      this.gemConfig = mockData.traffic.safe.gemConfigTable
      this.troubleConfig = mockData.traffic.safe.troubleConfigTable
      this.flowConfig = mockData.traffic.safe.flowConfigTable
      // 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>