<template>
  <div class="smart-discover">
    <div class="stat">
      <div class="sum">
        <div v-for="item in sum" :key="item.name">
          <img :src="require(`@/assets/images/${item.img}`)"/>
          <div>
            <p>{{item.name}}</p>
            <p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span>个</span></p>
          </div>
        </div>
      </div>
      <div class="detail">
        <div v-for="item in list" :key="item.name">
          <p><img :src="require(`@/assets/images/${item.img}`)" />{{item.name}}</p>
          <m-count class="count" :value="item.value" :decimal="0" />
        </div>
      </div>
    </div>
    <div class="chart"><m-chart :config="config" :data="data" :options="options" /></div>
  </div>
</template>

<script>
export default {
  name: 'SmartDiscover',
  data() {
    return {
      sum: [
        {name: '当日新增', value: 3, img: 'today.png', color: '#ffd400'},
        {name: '历史累计', value: 1049, img: 'history.png', color: '#01BFFD'},
      ],
      list: [
        {name: '门岗脱岗', value: 0, img: 'smart1.png'},
        {name: '占用消防通道', value: 0, img: 'smart2.png'},
        {name: '集中充电异常', value: 0, img: 'smart3.png'},
        {name: '楼道充电', value: 0, img: 'smart4.png'},
        {name: '损坏承重结构', value: 0, img: 'smart5.png'},
        {name: '非定时倒垃圾', value: 0, img: 'smart6.png'},
        {name: '窨井盖异常', value: 0, img: 'smart7.png'},
        {name: '水箱异常开启', value: 0, img: 'smart8.png'},
        {name: '屋顶积水', value: 0, img: 'smart9.png'},
        {name: '屋顶违章建筑', value: 0, img: 'smart10.png'},
        {name: '维修资金异常', value: 0, img: 'smart11.png'},
      ],
      config: {
        colors: ['#FFCE34', '#826AFA'],
        legend: {
          align: 'right',
        },
        shape: [
          {key: 'today', name: '当日新增', type: 'line'},
          {key: 'done', name: '已处理数', type: 'line'},
        ],
        xAxis: {
          key: 'date',
        },
        yAxis: {
          min: 10,
          max: 90,
          interval: 10,
        }
      },
      data: [
        {date: '10.13', today: 40, done: 25},
        {date: '10.14', today: 43, done: 35},
        {date: '10.15', today: 35, done: 45},
        {date: '10.16', today: 45, done: 50},
        {date: '10.17', today: 38, done: 39},
        {date: '10.18', today: 40, done: 26},
        {date: '10.19', today: 45, done: 40},
      ],
      options: {
        xAxis: {
          splitLine: {show: false},
        }
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
.smart-discover
  .sum
    display flex
    margin-bottom .05rem
    >div
      display flex
      flex 1
      align-items center
      padding-left .05rem
      img
        width .25rem
        height @width
        margin-right .05rem
      p
        color $fontColor
      span
        font-size .08rem
        color #aaa
      .count
        font-size .13rem
  .detail
    display flex
    flex-wrap wrap
    >div
      display flex
      align-items center
      justify-content space-between
      padding .03rem .08rem
      margin .01rem
      width calc((100% - 0.04rem) / 2)
      background #0A2F59
      p
        display flex
        align-items center
      img
        width .12rem
        height @width
        margin-right .05rem
      .count
        font-size .12rem
  .chart
    width 100%
    height 45%
    background url('../../assets/images/chart-bg.png') 100% / 100% no-repeat
    padding .1rem .03rem .05rem .05rem
</style>
