<template>
  <div class="online">
    <m-scroll :length="list.length" :limit="6">
      <div class="item" v-for="(item, i) in list" :key="i">
        <p>{{i+1}}. {{item.question}}</p>
        <span :style="`color:${getColor(item.status)}`">{{item.date}} {{item.status ? '已处理' : '未处理'}}</span>
      </div>
    </m-scroll>
  </div>
</template>

<script>
export default {
  name: 'Online',
  data() {
    return {
      list: [
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 1},
        {date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 1},
      ],
    }
  },
  methods: {
    getColor(status) {
      return status ? '#3897b5' : '#d04e4b'
    }
  }
}
</script>

<style lang="stylus" scoped>
.online
  width 100%
  height 100%
  overflow hidden
  .item
    display flex
    align-items center
    justify-content space-between
    line-height 2.5
    border-bottom .1rem solid $color-map(.6)
    >p
      width 66%
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
    >span
      font-size .9rem
</style>
