<template>
  <div class="theme-list">
    <div v-for="(item, index) in list" :key="index">
      <div class="flag" :style="`background-image:url(${require('@/assets/images/flag-bg.png')})`">{{item.flag}}</div>
      <div class="content">
        <p class="title" :title="item.title">{{item.title | check}}<span>{{item.tag}}</span></p>
        <p class="date">{{item.date}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ThemeList',
  data() {
    return {
      list: [
        {
          flag: '市',
          title: '检查主题名称',
          date: '2020-01-07 ~ 2020-01-30',
          tag: '日常',
        },
        {
          flag: '区',
          title: '检查主题名称',
          date: '2020-01-07 ~ 2020-01-30',
          tag: '专项',
        },
        {
          flag: '房',
          title: '检查主题名称检查主题名称检查题名称检查题名称检查',
          date: '2020-01-07 ~ 2020-01-30',
          tag: '重点',
        },
        {
          flag: '区',
          title: '检查主题名称检查主题名称',
          date: '2020-01-07 ~ 2020-01-30',
          tag: '日常',
        },
      ]
    }
  },
  filters: {
    check(val) {
      if (val && val.length > 13) {
        return ([].slice.call(val, 0, 13)).join('') + '...'
      } else {
        return val
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.theme-list
  width 100%
  height 100%
  >div
    display flex
    align-items center
    margin 1rem 0
    .flag
      display flex
      align-items center
      justify-content center
      width 3rem
      height 3rem
      background-position center
      background-size cover
      color $edgeColor
      font-size 1.5rem
      font-weight bold
      margin-right 0.5rem
    .title
      color #fff
      >span
        font-size 0.9rem
        color $edgeColor
        border 0.1rem solid $edgeColor
        border-radius 0.3rem
        padding 0 0.2rem
        background-color $color-map()
        margin-left 0.5rem
    .date
      font-size 0.9rem
      color #aaa
</style>
