<template>
  <div class="container">
    <!-- <img src="../assets/banner/26025632.png" alt="头图" class="topimg"> -->
    <div class="box">
      <breadcrumb :type="'列表'" :item="item" :en="en"></breadcrumb>
      <el-button class="btn">{{ item }}</el-button>
      <div v-if="contentlist.length > 0">
        <el-card class="box-card" v-for="(item, index) in contentlist" :key="index">
          <img :src="item.thumbnail || imguri" alt="缩略图" class="imgs">
          <div class="item">
            <h4 class="title" @click="btn(item)">{{ item.title }}</h4>
            <!-- <div class="details" v-html="item && item.slug"></div> -->
            <div class="other">
              <div class="el-icon-time date">{{ item.date }}</div>
              <div class="el-icon-view num">{{ item.hits || 0 }}</div>
            </div>
          </div>
        </el-card>
      </div>
      <el-divider class="divider" v-else>暂无数据</el-divider>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import breadcrumb from '../components/breadcrumb.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('menu')
const { mapState: contentnmapState, mapActions: contentmapActions } = createNamespacedHelpers('content')
export default {
  props: {
    id: String
  },
  components: {
    breadcrumb
  },
  data () {
    return {
      en: '',
      pageSize: 6,
      item: '',
      imguri: require('../assets/moren.png'),
      contentlist: [],
      total: 0
    }
  },
  methods: {
    ...mapActions(['getmenu']),
    ...contentmapActions(['getcontent']),
    // 分页
    async currentChange (e) {
      await this.getcontent({ code: this.id, skip: e - 1, limit: this.pageSize })
      this.contentlist = [...this.contentitems]
      this.total = this.contenttotal
    },
    // 跳转正文
    btn (e) {
      // this.$router.resolve(`/www/details/${e._id}`)
      const routeData = this.$router.resolve({
        path: `/www/details/${e._id}`
      })
      window.open(routeData.href)
    },
    async filteritem () {
      let items = {}
      if (this.id !== '-1') {
        items = this.items.filter(p => p.code === this.id)[0]
      }
      // eslint-disable-next-line eqeqeq
      this.item = items.name
      // eslint-disable-next-line eqeqeq
      this.en = items.en
      await this.getcontent({ code: this.id, skip: 0, limit: this.pageSize })
      this.contentlist = [...this.contentitems]
      this.total = this.contenttotal
    }
  },
  async mounted () {
    await this.getmenu()
    this.filteritem()
  },
  computed: {
    ...mapState(['items']),
    ...contentnmapState({ contentitems: 'items', contenttotal: 'total' })
  },
  watch: {
    id (val) {
      this.filteritem()
    }
  },
  filters: {
    dates (e) {
      return moment(Number(e)).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.topimg {
  width: 100%;
}
.btn {
  background: #a80002;
  color: #fff;
  margin: 0 15%;
  margin-top: 2%;
  font-size: 1.5em;
  padding: 20px;
  letter-spacing: 5px;
}
.box {
  width: 90%;
  margin: 5% auto;
}
.divider {
  width: 70%;
  margin: 5% auto;
}
.box-card {
  width: 70%;
  margin: 2% 15%;
  height: 22vh;
  /deep/ .el-card__body {
    height: 100%;
    display: flex;
    .imgs {
      width: 15%;
      margin: 0 2.5%;
    }
    .item {
      width: 75%;
      .details {
        color: #999999;
        font-size: 0.8em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .title {
        cursor: pointer;
      }
      .other {
        line-height: 3em;
        color: #666;
        .date {
          margin-right: 20px;
        }
      }
    }
  }
}
.pagination {
  margin-left: 15%;
   /deep/ .el-pager li:not(.disabled).active {
    background: #a80002;
  }
}
</style>
