
/**
* @Author Sean
* @Date 2019/10/22
*/
<template>
  <h-view id="my-collect" class="public-style" style="height: 100%">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>我的收藏</span>
      </div>
    </h-header>

      <!-- 搜索 -->
    <div class="search has-header">
      <input v-model="searchInput" type="text" placeholder="请输入经销商/产品名称/设备识别号">
    </div>
      <scroll
        ref="scroll"
        :updateData="[productList]"
        :pullUp="true"
        @pullingUp="loadMore"
      >
<div class="division-box">

      <list-item v-for="(item,index) in productList" :key="index">
        <item :proportion="[1,4]" @click.native="goDetailed(item)">
          <div slot="name" class="item-pic">
              <img :src="item.url" alt="">
            </div>
          <div slot="content" class="item-content">
            <div class="pro-name">
              <p>{{ item.product_name }}</p>
              <img class="arrow" src="@/assets/productQuery/collmark.png" alt="" >
            </div>
            <div class="centers">
              <p class="firsts1">{{ item.bp_type_n }}</p>
              <p class="seconds1">{{ item.bp_name }}</p>
            </div>
            <div class="centers">
              <p class="firsts1">设备识别号</p>
              <p class="seconds1">{{ item.product_code }}</p>
            </div>
          </div>
        </item>
      </list-item>
</div>
      </scroll>
      <div v-if="productList.length===0">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
      </div>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      pagenum: 1,
      searchInput: '',
      productList: [],
    }
  },
  created: function () {
  },
  watch: {
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    },
  },
  mounted: function () {

  },
  updated: function () {
  },
  destroyed: function () {
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'MyInfo') {
        vm.pagenum = 1
        vm.searchInput = ''
      vm.getList()
      } else if (from.name === 'ProDetailed') {
        vm.getList()
      }
    })
  },
  methods: {
    getList () {
      let vm = this
      let url = $config.basePath + 'my_collection_query'
      let param = {
        pagesize: 10,
        pagenum: vm.pagenum,
        searchInput: vm.searchInput,
        user_phone: window.localStorage.getItem('user_phone'),
      }
      hlsPopup.showLoading('数据加载中')
      vm.$post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.productList = res.lists

          if (vm.productList.length === 0) {
           vm.$refs.scroll.update(true)
         } else if (vm.productList.length > 0 && vm.productList.length < 10) {
           vm.productList.forEach(item => {
             item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
           })
           vm.$refs.scroll.update(true)
         } else if (vm.productList.length === 10) {
           vm.productList.forEach(item => {
             item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
           })
           vm.$refs.scroll.update(false)
         }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    loadMore () {
     let vm = this
     vm.pagenum = vm.pagenum + 1
     let url = $config.basePath + 'my_collection_query'
     let param = {
       pagesize: 10,
        pagenum: vm.pagenum,
        searchInput: vm.searchInput,
        user_phone: window.localStorage.getItem('user_phone'),
     }
     vm.hlsPopup.showLoading('数据加载中')
     vm.$post(url, param).then(function (res) {
       vm.hlsPopup.hideLoading()
       let returnData = []
       if (res.result === 'S') {
         returnData = res.lists
         if (returnData.length === 0) {
           vm.$refs.scroll.update(true)
         } else if (returnData.length > 0 && returnData.length < 10) {
           returnData.forEach(item => {
             item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
           })
           returnData.forEach((data, index, array) => {
             vm.productList.push(array[index])
           })
           vm.$refs.scroll.update(true)
         } else if (returnData.length === 10) {
           returnData.forEach(item => {
             item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
           })
           returnData.forEach((data, index, array) => {
             vm.productList.push(array[index])
           })
           vm.$refs.scroll.update(false)
         }
       } else {
         hlsPopup.showLongCenter(res.message)
       }
     })
   },
   search () {
     let vm = this
     vm.pagenum = 1
     // vm.bpList = []
     let url = $config.basePath + 'my_collection_query'
     let param = {
       pagesize: 10,
       pagenum: 1,
       searchInput: vm.searchInput,
       user_phone: window.localStorage.getItem('user_phone'),
     }
     vm.hlsPopup.showLoading('数据加载中')
     vm.hlsHttp.post(url, param).then(function (res) {
       vm.hlsPopup.hideLoading()
       vm.productList = res.lists
       vm.productList.forEach(item => {
         item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
       })
       if (vm.productList.length >= 0 && vm.productList.length < 10) {
         vm.$refs.scroll.update(true)
       } else if (vm.productList.length === 10) {
         vm.$refs.scroll.update(false)
       }
     })
   },
    // val：产品id, status: 收藏状态
    goDetailed (item) { // 进入产品查询功能明细页面
      window.localStorage.setItem('collect_status', item.collect_status)
      this.$router.push({
        name: 'ProDetailed',
        params: {
          product_id: item.product_id,
          bp_id: item.bp_id,
          //  collect_status: status,
        },
      })
    },
  },
}
</script>

<style lang="less" rel="stylesheet">
#my-collect {
  .display {
    position: fixed;
    top: 0;
    img {
      width: 100%;
      height: 100%;
     // margin-top: -70px;
    }
  }
  .search {
      background-color: #fff;
      padding: 8px 12px;
      position: absolute;
      width: 100%;
      z-index: 100;
      margin-bottom: 8px;
      input {
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
        padding-left: 12px;
        border-radius: 4px;
        height: 36px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        line-height: 36px;
      }

      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;
    }
      
    }
.division-box {
      padding: 8px;
    }
    .hls-list-item {
      border-radius: 4px;
    }
    .item-pic {
          width: 100px;
          //height: 110px;
          img {
              width: 100%;
              height: 100%;
          }
    }
    .item-content {
          width: 100%;
          margin-left: 20px;
          .pro-name {
            height: 42px;
            width: 100%;
            position: relative;
            border-bottom: 1px solid #F3F3F7;
            .arrow {
              position: absolute;
              width: 10px;
              height: 15px;
              right: 0;
              top: 0px;
            }
            p {
              height: 42px;
              line-height: 42px;
            font-family: PingFangSC-Semibold;
            font-size: 15px;
            color: #4B4A4B;
            letter-spacing: 0;
            font-weight: 600;
            }
          }

          .centers {
              font-family: PingFangSC-Semibold;
              font-size: 13px;
              color: rgba(56,63,69,0.60);
              letter-spacing: 0.5px;
              display: flex;
              flex-direction: row;
              margin-top: 8px;
              .firsts1 {
                  width: 60px;
                  height: 17px;
                  font-family: PingFangSC-Regular;
                  font-size: 13px;
                  color: rgba(56,63,69,0.60);
              }
              .seconds1 {
                  width: 70%;
                  margin-left: 16px;
                  height: auto;
                  font-family: PingFangSC-Regular;
                  font-size: 13px;
                  color: #4B4A4B;
              }
          }
    }
   .content{
    position: absolute;
      top:0;
  } 
  .scrollContent{
     padding-top: 1.9rem;
      padding-bottom: 20px;
    }
}
.platform-ios {
    #my-collect {
      .scrollContent {
        padding-top: 2.3rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #my-collect {
        .scrollContent {
          padding-top: 2.7rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #my-collect {
        .scrollContent {
          padding-top: 3.1rem;
        }
        .search {
        input {
          background: url("../../assets/contractStart/search1.png") 320px
            no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding: 8px 12px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }
      }
      }
    }
  }
 

</style>
