<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)" :class="{on: item.types === curSmartType}" 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 class="chart">
      <m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" />
      <div v-else class="no-data">— 暂无数据 —</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartDiscover',
  data() {
    return {
      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},
        }
      }
    }
  },
  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
      return discoverInfo.map((item, i) => ({
        name: this.$com.transType(item.types),
        value: +item.numbers || 0,
        img: `smart${i + 1}.png`,
        types: item.types,
      }))
    }
  },
  methods: {
    handleClick(type) {
      this.$store.commit('SET_CUR_SMART_TYPE', type === this.curSmartType ? null : type)
    }
  },
}
</script>

<style lang="stylus" scoped>
.smart-discover
  .no-data
    width 100%
    height 100%
    $flex-center()
  .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
      cursor pointer
      border .01rem solid transparent
      &.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 40%
    background-image url('../../assets/images/chart-bg.png')
    background-size 100% 100%
    background-repeat no-repeat
    padding .1rem .03rem .07rem .05rem
</style>
