<template>
  <h-view id="entity-list" 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="请输入经销商/产品名称/产品型号">
    </div>
    <scroll
      ref="scroll"
      :updateData="[lists]"
      :pullUp="true"
      class="scroll-content"
      @pullingUp="loadMore"
    >
      <div class="division-box">
        <list-item v-for="(item,index) in lists" :key="index">
          <item :proportion="[1,4]" @click.native="goDetailed(item.product_id, item.bp_id)">
            <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>
                <span>办事处：{{ item.bp_name }}</span><br>
                <span>产品型号：{{ item.product_code }}</span>
              </div>
            </div>
            <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
          </item>
        </list-item>
      </div>
    </scroll>
    <div v-if="lists.length===0">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </div>
  </h-view>
</template>
<script>
import noImg from '../../assets/productQuery/none.png'
export default {
  name: 'EntityList',
  data () {
    return {
      lists: [],
      pagenum: 1,
      division: '',
      searchInput: '',
    }
  },
  computed: {},
  watch: {
    searchInput () {
      let vm = this
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      // vm.timeout = setTimeout(() => {
      vm.search()
      // }, 1000)
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ProductList') {
        vm.division = vm.$route.params.division
        vm.pagenum = 1
        vm.searchInput = ''
        vm.proQuery()
      } else if (from.name === 'ProDetailed') {
        vm.proQuery()
      }
    })
  },
  methods: {
    // 根据产品名称查询列表
    proQuery () {
      let vm = this
      let url = $config.basePath + 'prd_product_list'
      let param = {
        division: vm.division,
        searchInput: vm.searchInput,
        user_phone: localStorage.getItem('user_phone'),
        pagenum: vm.pagenum,
        pagesize: 10,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
          if (vm.lists.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (vm.lists.length > 0 && vm.lists.length < 10) {
            vm.lists.forEach(item => {
              item['url'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            vm.$refs.scroll.update(true)
          } else if (vm.lists.length === 10) {
            vm.lists.forEach(item => {
              item['url'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },

    loadMore () {
      let vm = this
      vm.pagenum = vm.pagenum + 1
      let url = $config.basePath + 'prd_product_list'
      let param = {
        division: vm.division,
        user_phone: window.localStorage.user_phone,
        searchInput: vm.searchInput,
        pagenum: vm.pagenum,
        pagesize: 10,
      }
      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'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            returnData.forEach((data, index, array) => {
              vm.lists.push(array[index])
            })
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            returnData.forEach(item => {
              item['url'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
            })
            returnData.forEach((data, index, array) => {
              vm.lists.push(array[index])
            })
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },

    // 搜索
    search () {
      let vm = this
      vm.pagenum = 1
      let num = Math.random() * 10
      // vm.bpList = []
      let url = $config.basePath + 'prd_product_list' + '&index' + `${num}`
      let param = {
        pagesize: 10,
        pagenum: 1,
        searchInput: vm.searchInput,
        division: vm.division,
        user_phone: window.localStorage.user_phone,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.lists = res.lists
        vm.lists.forEach(item => {
          item['url'] = item.product_attachment_id ? process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token : noImg
        })
        if (vm.lists.length >= 0 && vm.lists.length < 10) {
          vm.$refs.scroll.update(true)
        } else if (vm.lists.length === 10) {
          vm.$refs.scroll.update(false)
        }
      })
    },
    // val：产品id, status: 收藏状态
    goDetailed (product_id, bp_id) {
      this.$router.push({
        name: 'ProDetailed',
        params: {
          product_id: product_id,
          bp_id: bp_id,
        },
      })
    },
  },
}
</script>
<style lang='less' scoped>
#entity-list {
  .content{
    background-color: #f5f5f5;
  }
  .scroll-content{
    //margin-top: 100px;
  }
  .display {
    position: fixed;
    top: 0;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
     // margin-top: -70px;
    }
  }
    .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;
    }
    }
    .division-box {
      padding: 8px;
      .arrow {
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0;
        top: 34px;
      }
    }
    .hls-list-item {
      border-radius: 4px;
      padding: 10px;
    }
    .item-pic {
      width: 100px;
      //height: 110px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-content {
      width: 100%;
      margin-left: 20px;
      .pro-name {
        width: 90%;
        position: relative;
        p {
          height: 36px;
          line-height: 36px;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #4B4A4B;
          letter-spacing: 0;
          font-weight: 600;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
      .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: 85px;
          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.92rem;
      padding-bottom: 20px;
    }
}
.platform-ios {
    #prolist {
      .scrollContent {
        padding-top: 2.32rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #prolist {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #prolist {
        .scrollContent {
          padding-top: 2.72rem;
        }
        .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>
