<template>
  <div class="about">
    <div class="newsbanner">
      <img src="../assets/newsbanner.jpg" alt="">
    </div>
    <b-container style="padding: 0 10px">
      <div style="margin-top: 20px">
        <div class="hideMobile">
          <el-radio-group v-model="queryParams.type" size="small" class="typeRadio" @change="GroupType">
            <el-radio :label="item.type" border v-for="(item, index) in pcTypeList" :key="index">{{ item.name }}</el-radio>
          </el-radio-group>
        </div>
        <div style="height: 10px"></div>
        <div>
          <el-row v-loading="loading">
            <el-empty :image-size="200" v-if="artlist.length < 1"></el-empty>
            <div class="transverseNews linkc" style="paddding-bottom: 0" v-for="(item, index) in artlist" :key="index" @click="newsDetailFn(item)">
              <el-col :xs="8" :sm="6" :md="6" :lg="6">
                <div class="sliks">
                  <div class="imgbox">
                    <img class="newImg" :src="item.image" />
                  </div>
                </div>
              </el-col>
              <el-col :xs="16" :sm="18" :md="18" :lg="18">
                <div style="padding: 0 10px">
                  <p class="textOneHide NewsTitle">{{ item.title }}</p>
                  <p class="textTwoHide newsInfo" v-html="getText(item.content)"></p>
                  <p class="NewsTime">
                    <span><i class="el-icon-time"></i>&nbsp;{{ parseTime(item.pubDate, '{y}-{m}-{d}') }}</span>
                  </p>
                </div>
              </el-col>
              <div style="clear: both"></div>
            </div>
          </el-row>
          <el-pagination
            v-if="total > queryParams.limit"
            :page-size="queryParams.limit"
            :current-page.sync="queryParams.page"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="total"
            :pager-count="3"
          >
          </el-pagination>
        </div>
      </div>
    </b-container>
  </div>
</template>
<script>
import { newsListByApprovalAndStatus, newsGroupList } from '@/api/index';

export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 12,
        type: 'dgtIndustryNews',
        title: '',
      },
      loading: true,
      total: 0,
      artlist: [],
      pcTypeList: [],
    };
  },
  created() {
    this.radio3 = this.$route.query.type;
    var keywords = this.$route.query.name;
    this.getPcType();
    if (keywords != null && keywords != undefined) {
      this.queryParams.searchName = keywords;
    }
    this.getArtlist();
  },
  watch: {
    $route: {
      handler: function () {
        this.radio3 = this.$route.query.type;
        var keywords = this.$route.query.name;
        this.getPcType();
        if (keywords != null && keywords != undefined) {
          this.queryParams.searchName = keywords;
        }
        this.getArtlist();
      },
    },
  },
  methods: {
    handleCurrentChange() {
      this.getArtlist();
    },
    getText(html) {
      return html;
    },
    GroupType() {
      this.queryParams.page = 1;
      this.getArtlist();
    },
    getPcType() {
      newsGroupList().then((response) => {
        console.log(response.data);
        this.pcTypeList = response.data;
      });
    },
    getArtlist() {
      this.loading = true;
      newsListByApprovalAndStatus(this.queryParams).then((response) => {
        this.loading = false;
        this.artlist = response.data.items;
        this.total = response.data.total;
      });
    },
    newsDetailFn(val) {
      this.$router.push({
        path: '/news/newsDetail?id=' + val.id,
      });
    },
  },
};
</script>
<style>
.el-radio.is-bordered.is-checked {
  background-color: #004ca1;
}
.el-radio.is-bordered.is-checked {
  border-color: #004ca1;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #fff;
}
.el-radio:hover {
  background-color: #004ca1;
  border-color: #004ca1;
  color: #fff;
}
.el-radio__label {
  padding: 0;
}
.el-radio--small.is-bordered {
  padding: 8px 24px 0 24px;
  /* height: 26px; */
  border-radius: 16px;
  margin-right: 20px;
}
.el-radio__input {
  display: none;
}
.newsbanner{
  width:100%;
}
.newsbanner img{
    width:100%;
    height:auto;
  }
</style>
