<template>
  <div class="smart-discover">
    <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 class="detail">
      <img src="@/assets/images/smart.png" />
      <div
        class="item"
        @click="handleClick(item.types, item.visible)"
        v-for="item in list" :key="item.types"
        :class="{on: item.types === curSmartType, visible: item.visible}"
      >
        <m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
        <p>{{item.name}}</p>
      </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 keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor']
      const result = []
      for (let i = 0; i < keys.length; i++) {
        const item = discoverInfo.find(e => e && e.types === keys[i])
        if (!item) return
        result.push({
          name: this.$com.transType(item.types),
          value: +item.numbers || 0,
          types: item.types,
          visible: this.calcVisible(item.types),
        })
      }
      return result
      // 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
  height 100%
  .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
    width 100%
    height 35%
    position relative
    >img
      width 36%
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      margin auto
    .item
      position absolute
      width 32%
      height 45%
      background rgba(49,94,139, .4)
      border .04rem solid rgba(0,0,0,.25)
      text-align center
      $flex-center()
      flex-direction column
      font-size .08rem
      opacity .3
      &.visible
        cursor pointer
        opacity 1
        &.on
        &:hover
          $selected()
      &:nth-of-type(1)
        top 0
        left 0
      &:nth-of-type(2)
        top 0
        right 0
      &:nth-of-type(3)
        bottom 0
        left 0
      &:nth-of-type(4)
        bottom 0
        right 0
    .count
      font-size .12rem
      &.yellow
          color $color-yellow
  // .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%
    height 50%
    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>
