<template>
  <div class="sales-data">
    <div class="tabs">
      <p>产销数量</p>
      <p>销售金额</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>
export default {
  name: 'SalesData',
  data() {
    return {
      layout: [
        {
          title: '名称',
          key: 'name',
          width: 8,
          align: 'center',
        },
        {
          title: '产量(万吨)',
          key: 'product',
          width: 8,
          align: 'center',
        },
        {
          title: '销量(万吨)',
          key: 'sales',
          width: 8,
          align: 'center',
        },
      ],
      model: [
        {name: '草鱼', product: 1548746, sales: 248745},
        {name: '鲫鱼', product: 1548746, sales: 248745},
        {name: '鲈鱼', product: 1548746, sales: 248745},
        {name: '桂鱼', product: 1548746, sales: 248745},
        {name: '草鱼', product: 1548746, sales: 248745},
        {name: '鲫鱼', product: 1548746, sales: 248745},
        {name: '鲈鱼', product: 1548746, sales: 248745},
        {name: '桂鱼', product: 1548746, sales: 248745},
        {name: '草鱼', product: 1548746, sales: 248745},
        {name: '鲫鱼', product: 1548746, sales: 248745},
        {name: '鲈鱼', product: 1548746, sales: 248745},
        {name: '桂鱼', product: 1548746, sales: 248745},
        {name: '草鱼', product: 1548746, sales: 248745},
        {name: '鲫鱼', product: 1548746, sales: 248745},
        {name: '鲈鱼', product: 1548746, sales: 248745},
        {name: '桂鱼', product: 1548746, sales: 248745},
      ]
    }
  },
}
</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
      &:first-child
        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>
