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

<template>
  <div class="inner">
    <div class="policy-box">
      <div
        :key="index"
        class="list-box d-flex flex-row flex-nowrap align-center"
        v-for="(item, index) in lists"
      >
        <div
          @click="jumpDetails(item)"
          class="date-box d-flex flex-column"
          v-if="item.time !== null"
        >
          <p class="date-mon">{{ monthEnglish[item.time.split('-')[1] - 1] }}.</p>
          <p class="date-day">{{ item.time.split(' ')[0].split('-')[2] }}</p>
        </div>
        <div class="d-flex flex-column flex-1">
          <p @click="jumpDetails(item)" class="item-title pointer">{{ item.title }}</p>
          <div class="d-flex flex-nowrap justify-space-between">
            <p class="source-time">
              <span class="source" v-if="item.time !== null">时间：{{ item.time }}</span>
              <span class="source" v-if="item.site">地点：{{ item.site }}</span>
            </p>
          </div>
        </div>
      </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: 20,
      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);
        } 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('/ItDetails');
    },
  },
};
</script>

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

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

.item-title {
  margin-bottom: 10px;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.65);
  font-family: Microsoft YaHei;
  font-weight: bold;
}

.item-content {
  text-indent: 2em;
  font-size: 16px;
  line-height: 36px;
  color: rgba(0, 0, 0, 0.35);
  font-family: Microsoft YaHei;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -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 {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  opacity: 1;
  margin-bottom: 0;

  span {
    cursor: pointer;
  }
}

.date-box {
  width: 160px !important;
  text-align: center;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 0 !important;

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

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

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

.source-time {
  margin-bottom: 0;
}

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