<template>
  <h-view v-if="showFlag" id="product-list">
    <h-header :proportion="[1,4,1]" class="bar-custom">
      <span slot="center" style="color:#fff">选择产品</span>
      <span slot="right" style="color:#fff" @click="showFlag=false">取消</span>
    </h-header>
    <div class="search has-header">
      <input v-model="keyword" placeholder="请输入产品名称">
    </div>
    <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="loadMoreProduct">
      <list-item v-for="(item,index) in showList" :key="index">
        <item
          :proportion="[1,4]"
          @click.native="getSelectProduct(item)"
        >
          <div slot="name" class="item-pic">
            <img :src="item.url">
          </div>
          <div slot="content" class="item-content">
            <div class="pro-name">
              <p>{{ item.product_name }}</p>
            </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>
    </scroll>
  </h-view>
</template>
<script>
export default {
  props: {
    bp_agent_id: {
      type: String,
      default: '',
    },
    division: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      showFlag: false,
      divisionLists: [],
      searchList: [],
      showList: [],
      selectedProduct: {
        product_id_n: '',
        product_id: '',
      },
      pagenumSearch: 1,
      pagenum: 1,
      keyword: '',
    }
  },
  watch: {
    keyword (newVal, oldVal) {
      if (newVal) {
        this.searchProduct()
      } else {
        this.getProduct()
      }
    },
  },
  methods: {
    init () {
      this.divisionLists = []
      this.selectedProduct = []
      this.pagenum = 1
      this.keyword = ''
    },
    show () {
      this.showFlag = true
    },
    getSelectProduct (e) {
      let vm = this
      this.selectedProduct.product_id_n = e.product_name
      this.selectedProduct.product_id = e.product_id
      this.$emit('selectedProduct', this.selectedProduct)
      setTimeout(() => {
        vm.showFlag = false
      }, 100)
    },
    getProduct () {
      let vm = this
      vm.pagenum = 1
      vm.divisionLists = []
      let randomString = Math.floor(Math.random() * 21)
      let url =
          process.env.basePath +
          'prj_product_list' +
          '&index' +
          `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        division: vm.division,
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.pagenum,
        searchInput: vm.keyword,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.$refs.scroll.scrollToTop()
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.divisionLists.push(array[index])
            })
            vm.pagenum++
            console.log(vm.pagenum)
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.divisionLists.push(array[index])
            })
            vm.pagenum++
            console.log(vm.pagenum)
            vm.$refs.scroll.update(false)
          }
          vm.divisionLists.forEach(item => {
            item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
          })
          vm.showList = vm.divisionLists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getLoad () {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
          process.env.basePath +
          'prj_product_list' +
          '&index' +
          `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        division: vm.division,
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.pagenum,
        searchInput: vm.keyword,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.divisionLists.push(array[index])
            })
            vm.pagenum++
            console.log(vm.pagenum)
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.divisionLists.push(array[index])
            })
            vm.pagenum++
            console.log(vm.pagenum)
            vm.$refs.scroll.update(false)
          }
          vm.divisionLists.forEach(item => {
            item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
          })
          vm.showList = vm.divisionLists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    loadMoreProduct () {
      if (this.keyword) {
        this.searchLoad()
      } else {
        this.getLoad()
      }
    },
    searchLoad () {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
          process.env.basePath +
          'prj_product_list' +
          '&index' +
          `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        division: vm.division,
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.pagenumSearch,
        searchInput: vm.keyword,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            if (vm.searchList) {

            } else {
              vm.searchList = returnData
            }
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vm.searchList = returnData
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.searchList.push(array[index])
            })
            vm.pagenumSearch++
            vm.$refs.scroll.update(false)
          }
          vm.searchList.forEach(item => {
            item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
          })
          vm.showList = vm.searchList
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    searchProduct () {
      let vm = this
      vm.pagenumSearch = 1
      vm.searchList = []
      let randomString = Math.floor(Math.random() * 21)
      let url =
          process.env.basePath +
          'prj_product_list' +
          '&index' +
          `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        division: vm.division,
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.pagenumSearch,
        searchInput: vm.keyword,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.$refs.scroll.scrollToTop()
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            if (vm.searchList) {

            } else {
              vm.searchList = returnData
            }
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vm.searchList = returnData
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.searchList.push(array[index])
            })
            vm.pagenumSearch++
            vm.$refs.scroll.update(false)
          }
          vm.searchList.forEach(item => {
            item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
          })
          vm.showList = vm.searchList
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less">
#product-list {
      position: absolute;
  top:0;
  z-index:999;
  background: #fff;
      .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: 16px;
            height: 16px;
            right: 0;
            top: 13px;
          }

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

          .seconds1 {
            width: 70%;
            margin-left: 16px;
            height: auto;
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: #4b4a4b;
          }
        }
      }

      .item {
        width: 359px;
        margin: 0 auto;
      }

      .search {
        background-color: #fff;
        padding: 8px 12px;
        width: 100%;
        height: 1.02rem;
        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;
          height: 36px;
          line-height: 36px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }

        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;
        }
      }
    }
.platform-ios {
  #product-list {
    .scrollContent {
      padding-top: 1.4rem;
    }
  }
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #product-list {
      .scrollContent {
        padding-top: 1.8rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #product-list {
      .scrollContent {
        padding-top: 1.8rem;
      }
      .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>
