<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"
      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"
        @click="handleClick(data.key)"
        >
        <span class="title">
          <img :src="require(`@/assets/images/${data.img}`)" />
          {{data.title}}
        </span>
        <span :style="+data.num !== 0 ? 'color:gold' : ''">{{data.num}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Discovery',
  data() {
    return {
      key: null,
    }
  },
  methods: {
    handleClick(key) {
      if (this.key == key) {
        this.key = null
      } else {
        this.key = key
      }
      this.$store.commit('SET_CURSCENE', this.key)
    }
  },
}
</script>

<style lang="stylus" scoped>
.discovery
  display flex
  width 100%
  height 100%
  flex-wrap wrap
  .d-card
    width 50%
  .d-list
    display flex
    flex-wrap wrap
    .d-l-card
      width 49%
      background-color rgba(6,27,50,0.9)
      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
        &.title
          display flex
          align-items center
          width 80%
          color #fff
          font-size 1rem
          font-weight normal
          >img
            width 1.25rem
            height 1.25rem
            margin-right 0.5rem
</style>
