<template>
  <div class="farm-build">
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
        <p>{{item.name}}</p>
        <m-count class="count" :value="item.value" :decimal="0"/>
      </div>
    </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: 'FarmBuild',
  data() {
    return {
      sum: [
        {name: '总数量(个)', value: 5847884},
        {name: '总面积(公顷)', value: 879944},
        {name: '总投资额(万元)', value: 9875645},
      ],
      layout: [
        {
          title: '省份',
          key: 'province',
          width: 4,
          align: 'center',
        },
        {
          title: '数量(个)',
          key: 'number',
          width: 6,
          align: 'center',
        },
        {
          title: '面积(公顷)',
          key: 'area',
          width: 6,
          align: 'center',
        },
        {
          title: '投资总额(万元)',
          key: 'invest',
          width: 8,
          align: 'center',
        },
      ],
      model: [
        {province: '福建', number: 6558745, area: 5487, invest: 59895464},
        {province: '山东', number: 6558745, area: 5487, invest: 59895464},
        {province: '上海', number: 6558745, area: 5487, invest: 59895464},
        {province: '浙江', number: 6558745, area: 5487, invest: 59895464},
        {province: '江苏', number: 6558745, area: 5487, invest: 59895464},
        {province: '福建', number: 6558745, area: 5487, invest: 59895464},
        {province: '山东', number: 6558745, area: 5487, invest: 59895464},
        {province: '上海', number: 6558745, area: 5487, invest: 59895464},
        {province: '浙江', number: 6558745, area: 5487, invest: 59895464},
        {province: '江苏', number: 6558745, area: 5487, invest: 59895464},
        {province: '福建', number: 6558745, area: 5487, invest: 59895464},
        {province: '山东', number: 6558745, area: 5487, invest: 59895464},
        {province: '上海', number: 6558745, area: 5487, invest: 59895464},
        {province: '浙江', number: 6558745, area: 5487, invest: 59895464},
        {province: '江苏', number: 6558745, area: 5487, invest: 59895464},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.farm-build
  width 100%
  height 100%
  overflow hidden
  display flex
  flex-direction column
  .sum
    display flex
    justify-content space-around
    margin-bottom 1rem
    >div
      text-align center
      .count
        color $edgeColor !important
        font-weight bold !important
        font-size 1.1rem !important
  .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>
