<!--
  Copyright (c) 2020.
  author: bin
  email: binbin0314@126.com
  -->

<template>
  <div class="inner">
    <div class="policy-box">
      <div :key="index" class="policy-list" v-for="(item, index) in lists">
        <div @click="jumpDetails(item)" class="date-box pointer" v-if="item.time">
          <p class="date-mon">{{ monthEnglish[item.time.split('-')[1] - 1] }}.</p>
          <p class="date-day">{{ item.time.split(' ')[0].split('-')[2] }}</p>
        </div>
        <p @click="jumpDetails(item)" class="item-title pointer">{{ item.title }}</p>
        <p @click="jumpDetails(item)" class="item-content pointer">{{ item.content }}</p>
        <p class="source-time">
          <span class="source">时间：{{ item.time }}</span>
          <span class="source">地点：{{ item.site }}</span>
        </p>
      </div>
    </div>
    <a-pagination
      :current="current"
      :page-size="pageSize"
      :total="total"
      @change="onShowSizeChange"
      class="pagination"
      show-less-items
      show-quick-jumper
      v-show="total > 5"
    />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { industryInfo } from 'config/api';
export default {
  name: 'ItInformation',
  data() {
    return {
      str: '这是行业资讯界面',
      lists: [],
      total: 0,
      pageSize: 5,
      current: 1,
      monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapMutations('home', ['setActDetail']),
    async getData() {
      try {
        const params = {
          param: {
            pageNum: this.current,
            pageSize: this.pageSize,
          },
        };
        const res = await industryInfo(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.lists = data.list;
          this.total = parseInt(data.total);
          for (var i = 0; i < this.lists.length; i++) {
            // this.lists[i].time = moment(this.lists[i].time).format('YYYY-MM-DD');
            this.lists[i].time = this.$moment(parseInt(this.lists[i].time) * 1000).format('YYYY-MM-DD');
          }
        } else {
          console.log(msg);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },

    onShowSizeChange(current) {
      this.current = current;
      this.getData();
    },

    // 跳转到详情界面
    jumpDetails(item) {
      this.setActDetail(item);
      this.$router.push('/ActDetails');
    },
  },
};
</script>

<style scoped lang="stylus">
.inner {
  margin: 40px auto;
}

.policy-box {
  .policy-list {
    position: relative;
    width: 100%;
    height: 238px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    margin-top: 24px;
    padding: 25px;
  }
}

.item-title {
  margin-left: 200px;
  overflow: hidden;
  display: -webkit-box;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.65);
  font-family: Microsoft YaHei;
  font-weight: bold;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.item-content {
  margin-left: 200px;
  text-indent: 2em;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.35);
  font-family: Microsoft YaHei;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.source {
  cursor: pointer;
  font-family: Microsoft YaHei;
  font-weight: 400;
  opacity: 1;
  margin-right: 24px;
}

.time {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.25);
  opacity: 1;
}

.original {
  position: absolute;
  right: 25px;
  bottom: 25px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  opacity: 1;
  margin-bottom: 0;

  span {
    cursor: pointer;
  }
}

.date-box {
  height: 188px !important;
  width: 188px !important;
  position: absolute !important;
  top: 0 !important;
  // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  text-align: center;
  box-shadow: none !important;
  padding: 25px;
  margin-top: 24px;

  p {
    margin-bottom: 0 !important;
  }
}

.date-mon {
  font-size: 40px;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  color: #13ACC4;
}

.date-day {
  font-size: 70px;
  height: 80px;
  line-height: 80px;
  font-weight: bold;
  color: #13ACC4;
}

.source-time {
  margin-left: 200px;
  position: absolute;
  bottom: 26px;
  margin-bottom: 0;
}

.pagination {
  margin-top: 68px;
  text-align: right;
}
</style>
