<template>
  <h-view id="newList" class="public-style" title="资讯动态">
    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()" >
        <img src="@/assets/userBind/arrow.png">
        <span>资讯动态</span>
      </div>
    </h-header>
    <div class="search has-header">
      <input
        v-model="searchInput"
        type="text"
        placeholder="请输入标题名称"
        @input="searchList()"
      >
    </div>
    <div v-if="newsList.length === 0">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="" >
      </div>
    </div>
    <scroll
      ref="scroll"
      :updateData="newsList"
      :pullUp="true"
      :autoUpdate="true"
      :listenScroll="true"
      class="scroll-content"
      @pullingUp="loadMore()"
    >
      <div
        v-for="(item, index) in newsList"
        :key="index"
        class="pay-content"
        @click="newsInfo(item.new_id)"
      >
        <ul>
          <li>
            <img class="title_logo" src="@/assets/homePage/inform.png" >{{
              item.new_title
            }}
          </li>
          <li>{{ item.new_note }}</li>
          <li>
            {{ item.new_date
            }}<span
            >查看详情<img
              src="@/assets/functionCenter/in@2x.png"
            ></span>
          </li>
        </ul>
      </div>
    </scroll>
  </h-view>
</template>
<script>
import noImg from '../../assets/productQuery/none.png'

export default {
  name: 'ToDoList',
  data () {
    return {
      searchInput: '',
      newsList: [],
      pageNum: 1,
      mysetTimeout: null,
    }
  },
  watch: {},
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.searchInput = ''
      vm.pageNum = 1
      vm.getNewsList()
    })
  },
  methods: {
    // tab切换
    isSelected (name) {
      this.selected = name
    },
    searchList () {
      this.pageNum = 1
      if (this.mysetTimeout !== null) {
        clearTimeout(this.mysetTimeout)
        this.mysetTimeout = setTimeout(() => {
          this.getNewsList()
        }, 1000)
      } else {
        this.mysetTimeout = setTimeout(() => {
          this.getNewsList()
        }, 1000)
      }
    },
    getNewsList () {
      this.newsList = []
      let param = {
        searchInput: this.searchInput,
        pagenum: this.pageNum,
        pagesize: 10,
      }
      let url = $config.basePath + 'news_query_list'
      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        let returnData = []
        if (res.result === 'S') {
          returnData = res.lists
          if (returnData < 10) {
            this.ifPull1 = false
          }
          returnData.forEach((data, index, array) => {
            this.newsList.push(data)
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    newsInfo (new_id) {
      this.$router.push({
        name: 'NewsInfo',
        params: {
          new_id: new_id,
        },
      })
    },
    loadMore () {
      this.pageNum++
      let url
      let param
      url = $config.basePath + 'news_query_list'
      param = {
        searchInput: this.searchInput,
        pagenum: this.pageNum,
        pagesize: 10,
      }
      this.hlsPopup.showLoading('请稍候')
      this.hlsHttp.post(url, param).then((res) => {
        this.hlsPopup.hideLoading()
        this.ifPull = false
        let returnData = []
        if (res.result === 'S') {
          returnData = res.lists
          if (returnData.length === 0) {
            this.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            this.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            this.$refs.scroll.update(true)
          }
          this.showLists = returnData
          returnData.forEach((data, index, array) => {
            this.newsList.push(data)
          })
          this.ifPull = true
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang='less'>
@import "../../styles/vue-1px";

#newList {
  .display {
    position: fixed;
    top: 0;
    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }
  background: #efefef;
  .scroll-content {
    //top: 50px;
  }
  .pay-content {
    width: 96%;
    margin: 10px auto;
    border-radius: 10px;
    background: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul {
      flex-grow: 1;
      li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        vertical-align: middle;
        text-align: left;
        overflow: hidden;
        .title_logo {
          margin-right: 15px;
        }
        img {
          vertical-align: middle;
          width: 15px;
        }
        &:nth-child(2) {
          border-bottom: 1px solid #f1f0f5;
        }
        span {
          color: #1d3fff;
          float: right;
        }
        &:nth-child(2) {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(56, 63, 69, 0.6);
          letter-spacing: 0;
        }
        &:nth-child(3) {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(56, 63, 69, 0.6);
          letter-spacing: 0;
        }
      }
    }
  }
  .search {
    background-color: #fff;
    padding: 8px 12px;
    position: absolute;
    width: 100%;
    z-index: 100;
    margin-bottom: 8px;
    input {
      padding-left: 12px;
      height: 36px;
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #21254c;
      line-height: 36px;
      border-radius: 4px;
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
    }
    input::placeholder {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888c8f;
      letter-spacing: 0;
    }
    input:focus {
      background: url("../../assets/contractStart/search2.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      border: 2px solid #bcc6ff;
    }
  }
}
</style>
