<template>
  <div class="list" style="background-color:#fff;  margin-top: 3rem;">
    <!--{{value}}-->
    <div class="query">
      <el-row>
        <el-col :xs="14" :sm="14" :md="14" :lg="20" :xl="20">
          <!--<div style="width: 95%;">-->
          <div>
            <!--<input class="query_input" v-model="query"/>-->
            <el-input class="query_input" v-model="query" size="small"
                      :placeholder="$t('message.placeholder')"></el-input>
          </div>
        </el-col>
        <el-col :xs="10" :sm="10" :md="10" :lg="4" :xl="4" style="float: right">
          <el-button class="query_button" type="primary" size="small" icon="el-icon-search"
                     @click="handleCurrentChange(-1)">
            {{ $t('message.search') }}
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <!--正文内容-->
      <div class="context" v-if="listData">
        <div v-for="(item,index) in listData.data" class="tw">
          <el-row>
            <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
              <div class="tw_time">
                <div class="tw_top">
                  {{ getDay(item.publishTime) }}
                </div>
                <div class="tw_bottoms">
                  {{ getTime(item.publishTime) }}
                </div>
              </div>
            </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
              <div class="tw_context">
                <div class="tw_context_title" @click="getContext(item)">
                  {{ item.title }}
                </div>
                <div v-if="item.description" class="tw_context_text">{{item.description}}</div>
                <div v-if="!item.description" class="tw_context_text" v-html="item.content"></div>
              </div>
            </el-col>
            <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
              <div class="tw_img">
                <img :src="item.imgurl" alt="">
              </div>
            </el-col>
          </el-row>
          <hr v-if="index != listData.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
        </div>
      </div>

      <el-row>
        <el-col class="pagination_p">
          <el-pagination  v-if="!small"
                          :small="!small"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="listData.pageNum"
                          :page-sizes="[10,20, 30, 50, 100]"
                          layout="prev, pager,next,sizes,  jumper"
                          :total="listData.total">
          </el-pagination>
          <el-pagination v-if="small"
                         :small="small"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listData.pageNum"
                         layout="prev ,pager,next"
                         :total="listData.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getNode} from "@/api";

export default {
  name: "list",
  props: {
    list: {
      type: Object,
      default() {
        return {
          data: [],
          pageNum: 1,
          pageSize: 10,
        }
      },
    },
  },
  data() {
    return {
      listData : this.list,
      width: document.documentElement.clientWidth,
      small: document.documentElement.clientWidth <= 992,
      query: '',
    }
  },
  watch:{
    list(val){
      this.listData = val
    }
  },
  methods: {
    getContext(context) {
      let type = this.$route.query && this.$route.query.type
      let router = ''
      if (type != null) {
        router = "?id=" + context.id + '&type=' + type + "&lang=" + sessionStorage.getItem("lang")
      } else {
        router = "/" + this.listData.navId + "?id=" + context.id + "&lang=" + sessionStorage.getItem("lang")
      }
      let routeData = null;
      if (this.width <= 992) {
        routeData = this.$router.resolve({path: "/mobile/" + this.listData.secondId + router});
      } else {
        routeData = this.$router.resolve({path: "/pc/" + this.listData.secondId + router});
      }
      window.open(routeData.href,"_blank")
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      if (val === -1) {
        this.listData.pageSize = 1
      } else {
        this.listData.pageSize = val
      }
      this.getData()
    },
    handleCurrentChange(val) {
      if (val === -1) {
        this.listData.pageNum = 1
      } else {
        this.listData.pageNum = val
      }
      this.getData()
    },
    getData() {
      let data = {
        title: this.query,
        id: this.listData.navId,
        pageNum: this.listData.pageNum,
        pageSize: this.listData.pageSize
      }
      this.type = this.$route.query && this.$route.query.type
      if (this.type != null && this.type !== 0) {
        data.id = this.listData.secondId
      } else {
        console.log(this.listData);
      }
      // console.log(data);
      getNode(data).then(res => {
        this.listData.data = res.rows
        this.listData.total = res.total
      })
    },
    getDay(time) {
      let day = new Date(time).getDate();
      return day
    },
    getTime(time) {
      let date = new Date(time);
      let month = date.getMonth() + 1
      return date.getFullYear() + "-" + month
    }
  }
}
</script>

<style scoped lang="scss">

.query_input {
  border-color: #1956BC !important;
  border-radius: 0 !important;

}

.query_button {
  //height: 3.5rem;
  border-radius: 0rem 1rem 1rem 0rem;
  background-color: #1956BC;
  border-color: #1956BC !important;
}

.context {
  margin: 3rem 2rem;
  padding-bottom: 3rem;
  padding-top: 2rem;
  //width: 84.3rem;
  background: #FFFFFF;

  .tw {
    margin-top: 4rem;
  }

  .tw_img {
    width: 100%;
    text-align: left;

    img {
      width: 90%;
    }
  }

  .tw_time {
    border-right: .3rem solid #D5D5D5;
    height: 10rem;
    width: 10rem;
    color: #1956BC;
    text-align: center;

    .tw_top {
      height: 8rem;
      width: 100%;
      line-height: 8rem;
      font-size: 5.2rem;
    }

    .tw_bottoms {
      height: 2rem;
      width: 100%;
      font-size: 1.4rem;
    }
  }

  .tw_context {
    cursor: pointer;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #161616;


    .tw_context_title {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      font-size: 2rem;
      font-weight: bold;
      padding-right: 2rem;

    }

    //.tw_context_title:hover{
    //  font-weight: bolder;
    //}

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

  .title {
    font-size: 2.4rem;
    font-weight: 500;
    color: #1956BC;
    text-align: center;
  }

  .text {
    margin-top: 2rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: #3C3C3C;
  }
}

.pagination_p {
  text-align: center;
  margin-bottom: 2rem;

  .pagination {
    display: inline-block;
    float: none;
  }
}
.query {
  //margin: 1rem 0;
  z-index: 50;
  width: 30%;
  position: absolute;
  right: 3rem;
  top: -2.4rem;
  //float: right;
}

@media screen and (min-width: 1100px) and (max-width: 1400px) {
  .query {
    width: 40% !important;
  }
}

@media screen and (max-width: 1100px) {
  .query {
    margin-top: 3rem;
    width: 80% !important;
  }
  .context {
    width: 80% !important;
    margin-top: 4rem;
  }
}
</style>
