<!--
 * @Description: 交通指数
 * @Author: 王晓颖
 * @Date: 2020-09-01 17:24:43
 -->
<template>
  <div class="index-container">
    <!--左边图标-->
    <div v-if="options.icon" class="index-left">
      <slot></slot>
      <!--<svg-icon :icon-class="options.icon" class-name="index-icon" />-->
    </div>
    <!--右边内容-->
    <div class="index-right">
      <!--标题-->
      <div class="index-name">{{data.name}}</div>

      <div class="index-data">
        <div class="index-value" :style="data.valueStatus|valueColor">{{data.value}}</div>
        <div class="data-right">
          <div v-if="data.percentStatus=='up'" class="index-status"><img :src="up"></div>
          <div v-if="data.percentStatus=='down'" class="index-status"><img :src="down"></div>
          <div v-if="data.percentStatus=='fair'" class="index-status"><img :src="fair"></div>
          <div class="index-percent" :style="data.percentStatus|percentColor">{{data.percent}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'trafficIndex',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          bgColor: '', // 背景颜色,
          color: '', // 数值颜色
          icon: 'gupiao' // icon
        }
      }
    },
    data: {
      type: Object,
      default: () => {
        return {
          name: '拥堵指数', // 标题
          value: '341', // 数值
          valueStatus: '', // 数值状态，正常
          percent: '', // 同比or环比
          percentStatus: '' // 同比或环比状态： up,down,fair
        }
      }
    }
  },
  filters: {
    valueColor: (status) => {
      if (status === 'normal') {
        return {color: '#38ffc1'}
      } else if (status === 'danger') {
        return {color: '#ff226d'}
      } else if (status === 'warning') {
        return {color: '#ffd43f'}
      } else {
        return {color: 'white'}
      }
    },
    percentColor: (status) => {
      if (status === 'up') {
        return {color: '#38ffc1'}
      } else if (status === 'down') {
        return {color: '#ff226d'}
      } else if (status === 'fair') {
        return {color: '#ffd43f'}
      } else {
        return {color: 'white'}
      }
    }
  },
  data () {
    return {
      up: require('@/assets/images/index/up.png'),
      fair: require('@/assets/images/index/fair.png'),
      down: require('@/assets/images/index/down.png')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.index-container{
  width:100%;
  height:100%;
  padding:0.1rem;
  display:flex;
  justify-content: space-between;
  align-items: center;
  .index-left{
    width:2rem;
    height:0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width:0.4rem;
      height:0.4rem;
    }
  }
  .index-right{
    flex:1;
    .index-name{
      color:white;
      font-size:0.1rem;
      font-weight: bold;
      margin-bottom: 0.03rem;
    }
    .index-data{
      display: flex;
      justify-content: start;
      align-items: flex-end;
      .data-right{
        display: flex;
        justify-content: start;
      }
      .index-value{
        font-size:0.25rem;
        font-weight: bolder;
      }
      .index-status{
        margin-left:0.1rem;
        height:0.1rem;
        width:0.12rem;
        img {
          width:100%;
          height:100%;
        }
      }
      .index-percent{
        font-size:0.1rem;
        margin-left:0.03rem;
        padding-bottom: 0.03rem;
      }
    }

  }
}
</style>