<template>
  <div class="medicine-frequency">
    <Select v-model="type" class="custom-select" size="small" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
    <p class="custom-select" style="color:#d04e4b;left:0.5rem;">安全值：15次</p>
    <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="5">
      <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 :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
        </i-col>
      </Row>
    </m-scroll>
  </div>
</template>

<script>
const mock = [
  {name: '张恒', date: '2020年7月购买杀虫药', count: 10},
  {name: '张恒', date: '2020年7月购买杀虫药', count: 13},
  {name: '张恒', date: '2020年7月购买杀虫药', count: 10},
  {name: '张恒', date: '2020年7月购买杀虫药', count: 18},
  {name: '张恒', date: '2020年7月购买杀虫药', count: 20},
  {name: '张恒', date: '2020年7月购买杀虫药', count: 11},
]
export default {
  name: 'MedicineFrequency',
  data() {
    return {
      type: '杀虫药',
      options: ['杀虫药'],
      layout: [
        {
          title: '姓名',
          key: 'name',
          width: 6,
          align: 'center',
        },
        {
          title: '时间',
          key: 'date',
          width: 12,
          align: 'center',
        },
        {
          title: '次数',
          key: 'count',
          width: 6,
          align: 'center',
        },
      ],
      model: mock,
    }
  },
}
</script>

<style lang="stylus" scoped>
.medicine-frequency
  width 100%
  height 100%
  overflow hidden
  .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>
