<template>
  <div class="sales-data">
    <div class="tabs">
      <p @click="curTab = '产销数量'" :class="`${curTab === '产销数量' ? 'on' : ''}`">产销数量</p>
      <p @click="curTab = '销售金额'" :class="`${curTab === '销售金额' ? 'on' : ''}`">销售金额</p>
    </div>
    <div class="list">
      <Row class="row row-title">
        <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
          <div :style="`text-align: ${col.align || 'left'};width:100%;`">{{col.title}}</div>
        </i-col>
      </Row>
      <m-scroll :length="model.length" :limit="12">
        <Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
          <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
            <div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">
              <m-count :value="row[col.key]" :decimal="0"/>
            </div>
            <div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
          </i-col>
        </Row>
      </m-scroll>
    </div>
  </div>
</template>

<script>
const mock = [
  {name: '鲫鱼', product: 2755632, sales: 2476598},
  {name: '鲈鱼', product: 477808, sales: 408647},
  {name: '罗非鱼', product: 1641662, sales: 1487590},
  {name: '鲟鱼', product: 102042, sales: 986755},
  {name: '鳗鲡', product: 234223, sales: 209758},
  {name: '南美白对虾', product: 671108, sales: 603456},
  {name: '青虾', product: 225321, sales: 206427},
  {name: '克氏原螯虾', product: 2089604, sales: 1985479},
  {name: '河蟹', product: 778682, sales: 722861},
  {name: '鲫鱼', product: 2755632, sales: 2476598},
  {name: '鲈鱼', product: 477808, sales: 408647},
  {name: '罗非鱼', product: 1641662, sales: 1487590},
  {name: '鲟鱼', product: 102042, sales: 986755},
  {name: '鳗鲡', product: 234223, sales: 209758},
  {name: '南美白对虾', product: 671108, sales: 603456},
  {name: '青虾', product: 225321, sales: 206427},
  {name: '克氏原螯虾', product: 2089604, sales: 1985479},
  {name: '河蟹', product: 778682, sales: 722861},
]
const mockSales = [
  {name: '鲫鱼', value: 5200856},
  {name: '鲈鱼', value: 2206694},
  {name: '罗非鱼', value: 1785108},
  {name: '鲟鱼', value: 4933775},
  {name: '鳗鲡', value: 943911},
  {name: '南美白对虾', value: 3620736},
  {name: '青虾', value: 3302832},
  {name: '克氏原螯虾', value: 11515778},
  {name: '河蟹', value: 4554024},
  {name: '鲫鱼', value: 5200856},
  {name: '鲈鱼', value: 2206694},
  {name: '罗非鱼', value: 1785108},
  {name: '鲟鱼', value: 4933775},
  {name: '鳗鲡', value: 943911},
  {name: '南美白对虾', value: 3620736},
  {name: '青虾', value: 3302832},
  {name: '克氏原螯虾', value: 11515778},
  {name: '河蟹', value: 4554024},
]
export default {
  name: 'SalesData',
  data() {
    return {
      curTab: '产销数量',
      layout1: [
        {
          title: '名称',
          key: 'name',
          width: 8,
          align: 'center',
        },
        {
          title: '产量(吨)',
          key: 'product',
          width: 8,
          align: 'center',
        },
        {
          title: '销量(吨)',
          key: 'sales',
          width: 8,
          align: 'center',
        },
      ],
      layout2: [
        {
          title: '名称',
          key: 'name',
          width: 8,
          align: 'center',
        },
        {
          title: '金额(万元)',
          key: 'value',
          width: 16,
          align: 'center',
        },
      ],
    }
  },
  computed: {
    layout() {
      if (this.curTab === '产销数量') {
        return this.layout1
      } else {
        return this.layout2
      }
    },
    model() {
      if (this.curTab === '产销数量') {
        return mock
      } else {
        return mockSales
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.sales-data
  width 100%
  height 100%
  overflow hidden
  display flex
  flex-direction column
  .tabs
    width 50%
    margin 0 auto 1rem
    border-bottom .1rem solid $edgeColor
    display flex
    justify-content space-around
    >p
      text-align center
      flex 1
      cursor pointer
      &.on
        color $edgeColor
        font-weight bold
        border-bottom .2rem solid $edgeColor
  .list
    flex 1
    .row
      display flex
      align-items center
      // line-height 2.4rem
      line-height 2.5
      &.row-title
        font-weight bold
        background-color $color-map()
        font-size 1rem
      &:nth-child(2n)
        background-color $color-map(0.15)
    .col
      padding 0 .5rem
      display flex
      align-items center
      flex-wrap wrap
      font-size .9rem
</style>
