<!--
   * @Description: 产品展示列表
 * @Author: y/>e: 2019-10-16 14:39:07
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="prolist" class="public-style" title="产品查询">
    <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>
    <h-content>
      <div class="hinput">
        <div class="search-box">
          <input type="text" placeholder="请输入经销商/产品名称/参数项">
          <img src="@/assets/distributorSign/search.png" alt="">
        </div>
      </div>
      <list-item v-for="item in lists" :key="item.product_id">
        <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status)">
          <div slot="name" class="item-pic">
            <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
          </div>
          <div slot="content" class="item-content">
            <div class="centers">
              <p class="firsts1">经销商</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 class="centers">
              <p class="firsts1">产品名称</p>
              <p class="seconds1">{{ item.product_name }}</p>
            </div>
          </div>
          <div slot="right-icon">
            <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
          </div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>
<script>
export default {
  name: 'ProductList',
  data () {
    return {
      lists: [],
    }
  },
  computed: {},
  watch: {},
  // beforeRouteEnter (to, from, next) {
  //   if (from.name === 'QueryHome') {
  //     next(vm => {
  //       // vm.proQuery()
  //       // vm.division = vm.$route.params.division
  //     })
  //   }
  //   next()
  // },
  activated () {
    // debugger
    this.proQuery()
  },
  methods:
 {
   // 根据产品线查询列表
   proQuery () {
     let vm = this
     let url = $config.basePath + 'prd_product_list'
     let param = {
       division: window.sessionStorage.division,
       user_phone: window.localStorage.user_phone,
     }
     vm.$post(url, param).then(function (res) {
       console.log(res)
       if (res.result === 'S') {
         vm.lists = res.lists
       } else {
         hlsPopup.showLongCenter(res.message)
       }
     })
   },
   // val:产品id, status: 收藏状态
   goDetailed (val, status) {
     window.sessionStorage.setItem('collect_status', status)
     this.$router.push({
       name: 'ProDetailed',
       params: {
         product_id: val,
         //  collect_status: status,
       },
     })
   },
 },
}
</script>
<style lang='less' scoped>
#prolist {
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }

      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
    }
    .hinput {
      position: relative;
      z-index: 50;
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #cccccc70;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      .search-box {
        width: 93.6%;
        height: 36px;
        font-size: 14px;
        color: #B4B4B5;
        letter-spacing: 0;
        font-family: PingFangSC-Regular;
        border: 1px solid rgba(56, 63, 69, 0.60);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        input {
          width: 90%;
          height: 100%;
          opacity: 0.4;
          border: none;
          line-height: 34px;
        }
      }
    }
    .arrow {
        width: 16px;
        height: 16px;
       // margin-left: 30px;
        margin-top: 16px;
    }
    // .hls-item .contents .add-name {
    //   flex: none!important;
    // }
    .item-pic {
          width: 100px;
          //height: 110px;
          img {
              width: 100%;
              height: 100%;
          }
    }
    .item-content {
         // height: 102px;
          width: 100%;
          margin-left: 20px;
          .centers:nth-of-type(1) {
              margin-top: 16px;
          }
          .centers:nth-of-type(2) {
              margin-top: 6px;
          }
          .centers:nth-of-type(3) {
              margin-top: 6px;
          }
          .centers {
            //   margin-top: 6px;
            // white-space: nowrap;
            // width: 100%;
              font-family: PingFangSC-Semibold;
              font-size: 13px;
              color: rgba(56,63,69,0.60);
              letter-spacing: 0.5px;
              display: flex;
              flex-direction: row;
              .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: #383F45;
              }
          }
    }
}
</style>