<template>
  <div class="party_building_activities" v-bind:style="{backgroundImage:'url('+bgc+')'}">
    <!--title-->

    <div class="headline">
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="title">
        {{ $t('message.party') }}
        <!--党群工作-->
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>
    <!--<el-row>-->
    <!--  <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
    <!--    <div class="grid-content"></div>-->
    <!--  </el-col>-->
    <!--  -->
    <!--  <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
    <!--    <div class="title">-->
    <!--      &lt;!&ndash;          {{ $t('message.news_center') }}&ndash;&gt;-->
    <!--      党群工作-->
    <!--    </div>-->
    <!--    <el-row>-->
    <!--      <el-col :span="8">-->
    <!--        <hr class="hr">-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <div class="divider_text">Party Building Activities</div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="8">-->
    <!--        <hr class="hr">-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--  </el-col>-->
    <!--</el-row>-->
    <!--轮播图-->

    <el-row>
      <el-col :xs="1" :sm="1" hidden-md-only :lg="2" :xl="3">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="24" :sm="22" :md="24" :lg="20" :xl="18">
        <SlideshowCard/>
      </el-col>
    </el-row>
    <!--更多-->


    <div class="headline">
      <!--      <div style="background: #DA2D2D;color: #E6E6E6;" class="more">-->
      <!--        {{ $t('message.more') }}-->
      <!--      </div>-->
      <!--<div class="more_img">-->
      <!--  <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">-->
      <!--</div>-->
      <div class="hr_div">
        <div class="hr_line_left">
        </div>
        <div class="hr_dot_left">
        </div>
      </div>
      <div class="hr_text" style="color:#DA2D2D;">
        {{ $t('message.party_education') }}
        <!--党史教育-->
      </div>
      <div class="hr_div">
        <div class="hr_line_right">
        </div>
        <div class="hr_dot_right">
        </div>
      </div>
    </div>


    <!--党史教育内容-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
        <div class="phe_row" v-for="(item,index) in listData" :key="index">
          <el-row>
            <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
              <div class="phe_img">
                <img :src="item.imgurl" alt="">
              </div>
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
              <div class="phe_context" @click="getArticle(item)">
                <div class="phe_context_title">{{ item.title }}</div>
                <div class="phe_context_text" v-html="item.content">
                </div>
              </div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="22" :lg="3" :xl="3">
              <div class="phe_time">{{ getTime(item.publishTime) }}</div>
            </el-col>
          </el-row>
          <hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
        </div>
      </el-col>
    </el-row>    <!--更多-->
    <el-row>
      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
        <div class="grid-content"></div>
      </el-col>
      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
        <div style="background: #DA2D2D;color: #E6E6E6;" class="more" @click="lookMore(listData[0])">
          {{ $t('message.more') }}
        </div>
        <!--        <div class="more_img">-->
        <!--          <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
        <!--        </div>-->
      </el-col>
    </el-row>

  </div>
</template>

<script>
import SlideshowCard from '../components/slideshow_card'
import {getArticleList} from "@/api";
import {toArticle, lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";

export default {
  name: "party_building_activities",
  components: {
    SlideshowCard
  },
  data() {
    return {
      width: document.documentElement.clientWidth > 992,
      listData: [],
      bgc: require("../../../assets/index/party_building_activities/sy_bj3.png")
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    getArticle(item) {
      toArticle(item, this.width)
    },
    lookMore(item) {
      // lookMoreComment(item,this.width)
      lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width)
    },

    getListData() {
      getArticleList({
        type: "N6CfFGz2UWpQ9Uhk3uwiJAQ",
        pageNum: 1,
        pageSize: 6
      }).then(res => {
        this.listData = res.rows
      })
    },
    getTime(date) {
      let time = new Date(date);
      let year = time.getFullYear();
      let month = time.getMonth() + 1
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    }
  }
}
</script>

<style scoped lang="scss">
.party_building_activities {
  background-image: url("../../../assets/index/party_building_activities/sy_bj3.png");
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.headline {

  .hr_line_left, .hr_line_right {
    border-color: #DA2D2D !important;
  }

  .hr_dot_left, .hr_dot_right {
    background-color: #DA2D2D !important;
  }

  .title {
    background: #DA2D2D;
  }

  .divider_text {
    color: #DA2D2D;
  }

}

.hr {
  border: .1rem solid #D13C3C;
}

.phe_row {
  margin: 4rem 0;
}

.phe {
  font-family: PingFangSC-Medium, PingFang SC;
  margin-top: 4rem;
  margin-bottom: 4rem;

  .phe_img {
    img {
      height: 10rem;
    }
  }


  .phe_context {
    .phe_context_title {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      cursor: pointer;
      font-size: 2rem;
      font-weight: 600;
      color: #161616;
      letter-spacing: 2px;
    }

    .phe_context_title:hover {
      color: #DA2D2D;
    }

    .phe_context_text {
      margin-top: 0.8rem;
      font-size: 1.6rem;
      height: 6rem;
      color: #565656;
      letter-spacing: 1px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 3; //显示的行
      span {
        color: #565656 !important;
      }
    }
  }

  .phe_time {
    text-align: right;
    font-size: 2rem;
    font-weight: 500;
    color: #565656;
    letter-spacing: 2px;
  }
}


</style>
