<template>
  <div class="article_list" style="background-color:#fff; margin-top: 3rem;">
    <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 class="list">
      <!--<el-row>-->
      <div class="article" v-for="(item ,index) in listData.data" :key="index">
        <el-row>
          <el-col :span="20">
            <div class="article_name" @click="getContext(item)">
              <span class="span">
                <img class="def_img" src="@/assets/index/scientific_research_trends/huidian@2x.png">
                <img class="hover_img" src="@/assets/index/scientific_research_trends/sy_icon_b1@2x.png">
              </span>
              <!--          <a :href="file.fileAddr">{{ file.fileName }}</a>-->
              {{ item.title }}
            </div>
          </el-col>
          <el-col :span="4">
            <div class="article_time">
              {{ getDateTime(item.publishTime) }}
            </div>
          </el-col>
        </el-row>
      </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>
</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
    }
  },
  created() {

  },
  methods: {
    getDateTime(date) {
      let time = new Date(date);
      let year = time.getFullYear();
      let month = time.getMonth() + 1
      if (month < 10){
        month = "0"+month
      }
      let day = time.getDate();
      if (day<10){
        day = "0"+ day
      }
      return year + "-" + month + "-" + day;
    },
    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
      }
      if (this.small){
        data.pageSize = 20
      }
      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
      })
    },
  }
}
</script>

<style scoped lang="scss">

.list {
  padding-top: 5rem;
  font-size: 1.6rem;

  .article {
    color: #757575;
    clear: both;
    padding: 1rem 3rem;

    .article_name {
      float: left;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 1; //显示的行

      .span {
        padding-right: 1rem;

        .def_img, .hover_img {
          width: 1.5rem;
        }

        .def_img {
          display: inline-block;
        }

        .hover_img {
          display: none;
        }
      }
    }

    .article_time {
      float: right;
    }

    a {
      color: #757575 !important;
    }
  }

  .article:hover {
    //background-color: gray;
    color: #1956BC;

    a {
      color: #1956BC !important;
      font-weight: bold;
    }

    .article_name {
      .def_img {
        display: none;
      }

      .hover_img {
        display: inline-block;
      }
    }


  }

  a {
    text-decoration: none;
  }
}

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

  .pagination {
    display: inline-block;
    float: none;
  }
}

.query {
  //margin: 1rem 0;
  z-index: 999;
  width: 30%;
  position: absolute;
  right: 3rem;
  top: -2.4rem;
  //float: right;

  .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;
  }

}

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

@media screen and (max-width: 1100px) {
  .query {
    height: 1rem;
    width: 80% !important;
    margin-top: 4rem;
  }
}

</style>
