<template>
<div class="area-list">
  <template v-if="list && list.length > 0">
    <div v-for="(item, index) in list" :key="item.name">
      <div :class="`area-card ${index === curIndex ? 'on' : ''}`" @click="handleSelect(index)">
        <i-circle v-if="mode == 1" :trail-color="switchColor(calcPercent(item)).trail" :stroke-color="switchColor(calcPercent(item)).stroke" :percent="calcPercent(item)" :size="size">
          <span style="font-size:0.8rem;">{{calcPercent(item) | pipe}}</span>
        </i-circle>
        <i-circle v-if="mode == 2" :trail-color="switchColor(calcPercent2(item).value).trail" :stroke-color="switchColor(calcPercent2(item).value).stroke" :percent="item.value" :size="size">
          <span :style="`font-size:0.8rem;color:${calcPercent2(item).isUp ? '#B4EC51' : 'red'}`">{{calcPercent2(item).value | pipe}}</span>
        </i-circle>
        <div>
          <p>{{item.name}}</p>
          <p v-if="mode == 1"><b><m-count :value="item.area" :decimal="0"/></b><i>公顷</i></p>
          <p v-if="mode == 1"><b><m-count :value="item.farm" :decimal="0"/></b>/<b><m-count :value="item.water" :decimal="0"/></b><i>吨</i></p>
          <p v-if="mode == 2"><b><m-count :value="item.output"/></b><i>万元</i></p>
        </div>
      </div>
    </div>
  </template>
</div>
</template>

<script>
export default {
  name: 'AreaCard',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    mode: {
      type: [String, Number],
      default: '1',
    },
  },
  data() {
    return {
      curIndex: null,
    }
  },
  methods: {
    handleSelect(i) {
      if (this.curIndex === i) {
        this.curIndex = null
      } else {
        this.curIndex = i
      }
      this.$emit('select', this.curIndex)
    },
    calcPercent({farm, water}) {
      return Number(((farm / water) * 100).toFixed(1))
    },
    calcPercent2({output, secondaryOutput}) {
      const max = Math.max.apply(null, [output, secondaryOutput])
      const min = Math.min.apply(null, [output, secondaryOutput])
      return {
        value: Number(((max - min) * 100 / (secondaryOutput || 1)).toFixed(1)),
        isUp: output >= secondaryOutput,
      }
    },
    switchColor(val) {
      if (val <= 5) {
        return {
          stroke: '#DBF6FF',
          trail: '#85CDFF',
        }
      } else if (val <= 10) {
        return {
          stroke: '#5BD5FF',
          trail: '#0076FF',
        }
      } else if (val <= 15) {
        return {
          stroke: '#8ED617',
          trail: '#3F772F',
        }
      } else if (val <= 20) {
        return {
          stroke: '#FFCE34',
          trail: '#E06536',
        }
      } else if (val <= 25) {
        return {
          stroke: '#FF6161',
          trail: '#A02929',
        }
      } else if (val <= 30) {
        return {
          stroke: '#8623EB',
          trail: '#C691FF',
        }
      } else {
        return {
          stroke: '#8623EB',
          trail: '#C691FF',
        }
      }
    },
  },
  filters: {
    pipe(val) {
      const result = val > 100 ? 100 : val
      // return `${result}%`
      return result
    }
  },
  computed: {
    size() {
      return Math.floor(window.innerWidth / 100) * 2.5
    },
  },
}
</script>

<style lang="stylus" scoped>
.area-list
  width 100%
  display flex
  flex-wrap wrap
  padding 0.5rem 0.5rem 0
  >div
    width 12.5%
  .area-card
    display flex
    align-items center
    width 100%
    padding 0.5rem 0
    cursor pointer
    border 0.1rem solid transparent
    &.on
      border-color $color-map(0.5)
      box-shadow 0 0 1rem 0.1rem $color-map(1)
    >div
      color #ccc
      margin-left 0.5rem
      p
        line-height 1
        font-size 0.9rem
      span
        color $color-map(0.8)
      i
        font-size 0.8rem
</style>
