<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 @click="handleClick(item.types, item.visible)" :class="{on: item.types === curSmartType, visible: item.visible}" v-for="item in list" :key="item.types">
          <p><img :src="require(`@/assets/images/${item.img}`)" />{{item.name}}</p>
          <m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
        </div>
      </div>
    </div>
    <div v-if="showChart" class="chart">
      <m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" />
      <div v-else class="no-data">
        <img src="@/assets/images/building.png" />
        <p>— 暂无数据 —</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartDiscover',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#FFCE34', '#826AFA'],
        legend: {
          align: 'right',
        },
        shape: [
          {key: 'created', name: '当日新增', type: 'line'},
          {key: 'done', name: '已处理数', type: 'line'},
        ],
        xAxis: {
          key: 'date',
        },
      },
      options: {
        xAxis: {
          splitLine: {show: false},
        }
      }
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 1000)
  },
  computed: {
    discoverTrend() {
      return this.$store.state.discoverTrend
    },
    curSmartType() {
      return this.$store.state.curSmartType
    },
    sum() {
      const {total, today} = this.$store.state.discoverSum
      return [
        {name: '当日新增', value: today || 0, img: 'today.png', color: '#ffd400'},
        {name: '历史累计', value: total || 0, img: 'history.png', color: '#01BFFD'},
      ]
    },
    list() {
      const {discoverInfo} = this.$store.state
      const result = discoverInfo.map((item, i) => ({
        name: this.$com.transType(item.types),
        value: +item.numbers || 0,
        img: `smart${i + 1}.png`,
        types: item.types,
        visible: this.calcVisible(item.types),
      }))
      return result.sort((a, b) => b.visible - a.visible)
    }
  },
  methods: {
    handleClick(type, visible) {
      if (visible) {
        this.$store.commit('SET_CUR_SMART_TYPE', type === this.curSmartType ? null : type)
      }
    },
    calcVisible(type) {
      const {name} = this.$store.state.currentStreetInfo
      const keys = [
        '平凉路街道',
        '控江路街道',
        '长白新村街道',
        '延吉新村街道',
        '殷行街道',
        '大桥街道',
        '新江湾城街道',
      ]
      if (keys.indexOf(name) < 0) {
        if (type === 'parkFireExit' || type === 'nonVehicleCharg') return false
      }
      if (name !== '控江路街道' && type === 'streetMonitor') return false
      if (name !== '延吉新村街道' && type === 'heap') return false
      return true
    },
  },
}
</script>

<style lang="stylus" scoped>
.smart-discover
  .no-data
    $flex-center()
    flex-direction column
    width 100%
    height 100%
    color #999
    img
      width .35rem
      height @width
  .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
      border .01rem solid transparent
      opacity .3
      &.visible
        cursor pointer
        opacity 1
        &.on
        &:hover
          $selected()
      p
        display flex
        align-items center
      img
        width .12rem
        height @width
        margin-right .05rem
      .count
        font-size .12rem
        &.yellow
          color $color-yellow
  .chart
    width 100%
    height 39%
    margin-top .05rem
    background-image url('../../assets/images/chart-bg.png')
    background-size 100% 100%
    background-repeat no-repeat
    padding .1rem .03rem .07rem .05rem
</style>
