<template>
  <div class="place-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>
</template>

<script>
export default {
  name: 'PlaceList',
  data() {
    return {
      layout: [
        {
          title: '序号',
          key: 'index',
          width: 4,
          align: 'center',
        },
        {
          title: '良种场名称',
          key: 'name',
          width: 20,
          align: 'center',
        },
      ],
      model: [
        {index: 1, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 2, name: '苏州市德诚渔业有限公司'},
        {index: 3, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 4, name: '苏州市德诚渔业有限公司'},
        {index: 5, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 6, name: '苏州市德诚渔业有限公司'},
        {index: 7, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 8, name: '苏州市德诚渔业有限公司'},
        {index: 9, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 10, name: '苏州市德诚渔业有限公司'},
        {index: 11, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 12, name: '苏州市德诚渔业有限公司'},
        {index: 13, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 14, name: '苏州市德诚渔业有限公司'},
        {index: 15, name: '苏州市大有乡鑫富洋海参养殖场'},
        {index: 16, name: '苏州市德诚渔业有限公司'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.place-list
  width 100%
  height 100%
  overflow hidden
  .row
    display flex
    align-items center
    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>
