<template>
  <div class="consult-info">
    <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="3">
        <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-if="col.formatter">
              {{col.formatter(row[col.key])}}
            </div>
            <div v-else class="text" :title="row[col.key]" :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: 'ConsultInfo',
  data() {
    return {
      layout: [
        {
          title: '主题',
          key: 'theme',
          width: 8,
        },
        {
          title: '处理状态',
          key: 'status',
          width: 3,
          formatter: val => {
            return val == '1' ? '已处理' : '未处理'
          }
        },
        {
          title: '送检单位',
          key: 'unit',
          width: 7,
        },
        {
          title: '送检时间',
          key: 'time',
          width: 3,
        },
        {
          title: '处理时间',
          key: 'done',
          width: 3,
        },
      ],
      model: [
        {theme: '病鱼上下颌，眼眶，鳍条基部，腹部充血发红，严重时眼球外突，两侧鳞片脱落，腹腔有淡红色液体。', status: '1', unit: ' 常熟市水产技术推广站', time: '2020/8/20 18:28:00', done: '2020/8/21 14:01:00'},
        {theme: '病鱼体色发黑，身体消瘦，食欲减退，严重时有大量鱼体聚集池边，鳃丝肿胀，呼吸困难而死。', status: '1', unit: '渔友1YN95QGRA8TJ', time: '2020/8/19 20:40:00', done: '2020/8/20 18:37:00'},
        {theme: '病鱼体色发黑，独游于池边，鳃丝腐烂带污泥，鳃丝末端有许多粘液。鳃盖骨内表中央部分被腐蚀成一个不规则的透明圆形窗。', status: '1', unit: ' 天祥公司', time: '2020/8/20 10:03:00', done: '2020/8/20 18:28:00'},
        {theme: '鳃丝末端发白腐烂， 常粘有污泥．软骨外露，一些病鱼鳍条腐烂，严重患者鳃盖骨内、外表皮充血发炎', status: '1', unit: '宁河县韩军渔药经营部', time: '2020/8/19 20:40:00', done: '2020/8/19 20:40:00'},
        {theme: '送检蟹活力较强，血液凝固较好，肠内有食，肝胰腺正常。镜检：鳃内未发现寄生虫，鳃丝清晰，肠内细菌', status: '1', unit: ' 安徽有机良庄农业科技股份有限公司', time: '2020/8/8 16:08:00', done: '2020/8/11 15:10:00'},
        {theme: '送检蟹活力好，体表清晰，肝胰腺颜色正常，肠内有食。镜检：鳃内未发现寄生虫，肠内细菌正常。', status: '1', unit: ' 常熟市水产技术推广站', time: '2020/8/2 10:46:00', done: '2020/8/5 13:41:00'},
        {theme: '如何治疗河蟹水瘪子病？如何进行预防？', status: '1', unit: '桂林鱼伯伯生态农业科技有限公司', time: '2020/8/1 9:21:00', done: '2020/8/2 15:46:00'},
        {theme: '高温期间，如何做好鳜鱼病的防治工作', status: '1', unit: ' 乐亭县铭泰水产养殖有限公司', time: '2020/8/1 16:04:00', done: '2020/8/1 16:04:00'},
        {theme: '送检蟹活力较差，底板发黄，指尖发红，肝脏发肉色和白色。镜检：鳃内未发现寄生虫，污物较多，肠内细', status: '1', unit: ' 肇庆市水产研究所', time: '2020/7/30 16:50:00', done: '2020/7/30 16:50:00'},
        {theme: '镜检腮丝有纤毛虫，肠道与肛门红肿充血', status: '1', unit: ' 常熟市水产技术推广站', time: '2020/7/30 15:39:00', done: '2020/7/30 21:19:00'},
        {theme: '鱼体表有疥疮，鱼鳍有部分腐烂，腮丝红肿充血，', status: '1', unit: ' 苏州市相城区水产技术推广站', time: '2020/7/29 13:32:00', done: '2020/7/30 16:12:00'},
        {theme: '鱼大批死亡', status: '1', unit: '章俊', time: '2020/7/28 8:21:00', done: '2020/7/30 20:56:00'},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.consult-info
  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 .3rem
      display flex
      align-items center
      flex-wrap wrap
      font-size .9rem
      .text
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
</style>
