<template>
  <div class="discovery">
    <m-brief
      class="d-card"
      v-for="data in $store.state.discoveryList"
      :key="data.title"
      :icon="require(`@/assets/images/${data.img}`)"
      :label="data.title"
      :count="+data.num"
      :unit="data.unit"
      @icon="handleIconClick(data.key)"
      @count="handleCountClick(data.key)"
      countColor="gold"
      size="1.4rem"
    />
    <div class="d-list">
      <div
        :class="`d-l-card ${data.key == key ? 'on' : ''}`"
        v-for="data in $store.state.foundList"
        :key="data.key"
        >
        <span class="title" @click="handleSensorClick(data)">
          <img :src="require(`@/assets/images/${data.img}`)" />
          {{data.title}}
        </span>
        <span @click="handleSceneClick(data)" :style="+data.num !== 0 ? 'color:gold' : ''">{{data.num}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Discovery',
  computed: {
    key() {
      return this.$store.state.curScene
    }
  },
  methods: {
    handleIconClick(key) {
      if (key == 'total') {
        this.$emit('summary', key)
        return
      }
      this.$emit('summary', key)
    },
    handleCountClick(key) {
      if (key == 'total') return
      this.$store.commit('SET_CURSCENE', 'all')
    },
    handleSensorClick({key}) {
      this.$store.commit('SET_CURSCENE', null)
      this.$store.dispatch('setSensorList', {type: key})
    },
    handleSceneClick({key}) {
      this.$store.commit('SET_CURSCENE', key)
      // if (this.key == key) {
      //   this.$store.commit('SET_CURSCENE', null)
      // } else {
      //   this.$store.commit('SET_CURSCENE', key)
      // }
    },
  },
}
</script>

<style lang="stylus" scoped>
.discovery
  display flex
  width 100%
  height 100%
  flex-wrap wrap
  .d-card
    width 50%
    cursor pointer
  .d-list
    display flex
    flex-wrap wrap
    .d-l-card
      width 49%
      // background-color rgba(6,27,50,0.5)
      background-color $color-map(.1)
      margin 0.1rem
      padding 0 .7rem
      display flex
      justify-content space-between
      align-items center
      // cursor pointer
      &:hover
        background-color rgba(0,0,0,0.7)
      &.on
        background-color rgba(0,0,0,0.7)
        outline .1rem solid $color-blue
      span
        color #fff
        font-weight 700
        font-size 1.2rem
        cursor pointer
        &.title
          display flex
          align-items center
          width 80%
          color #fff
          font-size 1rem
          font-weight normal
          &:hover
            color $color-blue
          >img
            width 1.25rem
            height 1.25rem
            margin-right 0.5rem
</style>
