<template>
  <h-view class="public-style partner-list" title="客户维护">
    <h-content class="scroll-content">
      <div class="top-part">
        <div class="client">
          <div class="client-img">
            <img src="@/assets/image/bpMaster/count@2x.png" >
          </div>
          <div class="statistics">客户总计</div>
        </div>
        <div class="total-num">\{{ bpCount.bp_sum }}<span class="measure">个</span></div>
        <div class="list-general">
          <div class="enterprise">
            <div class="list-name">企业</div>
            <div class="list-num">\{{ bpCount.sum_org }}<span class="sum-num">个</span></div>
          </div>
          <div class="enterprise">
            <div class="list-name">个人</div>
            <div class="list-num">\{{ bpCount.sum_np }}<span class="sum-num">个</span></div>
          </div>
          <div class="enterprise">
            <div class="list-name">主承租人</div>
            <div class="list-num">\{{ bpCount.sum_tenant }}<span class="sum-num">个</span></div>
          </div>
          <div class="enterprise">
            <div class="list-name">经销商</div>
            <div class="list-num">\{{ bpCount.sum_agent }}<span class="sum-num">个</span></div>
          </div>
        </div>

      </div>
      <div class="search">
        <div class="search-box" @click="showSearchModal">
          <div class="search-icon"><img src="@/assets/image/bpMaster/search@2x.png" ></div>
          <div class="hint">请输入客户名称/客户类型</div>
        </div>
        <div class="add-icon" @click="createPartent()"><img src="@/assets/image/bpMaster/add@2x.png" ></div>
      </div>
      <scroll
        ref="scrollList"
        :updateData="[bpList]"
        :pullUp="true"
        class="content-scroll"
        @pullingUp="loadMore">
        <list-item :item-height="80">
          <item
            v-for="(list,index) in bpList"
            :has-border="false" :key="index" :proportion="[5,1]" :show-arrow="true"
            @click.native="goPartnerMainten(list)">
            <img slot="left-icon" src="@/assets/image/bpMaster/custormer@2x.png" class="left-icon">
            <div slot="name" class="text">
              <div class="cont-name">客户名称：\{{ list.bp_name }}</div>
              <div class="cont-type">客户类型：\{{ list.bp_type_n }}</div>
              <div class="cont-type">客户分类：\{{ list.bp_class_n }}</div>
            </div>
          </item>
        </list-item>
      </scroll>
    </h-content>

    <h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="search-modal">
      <h-view>
        <h-header :proportion="[1,15,4]" class="bar-custom" style="height: 44px;padding-top: 0px">
          <div slot="center" class="search-shelter">
            <img src="@/assets/image/bpMaster/search.png" class="search-icon">
            <input
              v-focus id="risk-search-input" v-model="info.key" type="text"
              placeholder="伙伴名称/类型" class="search-input">
            <img v-show="info.key" src="@/assets/image/bpMaster/clear.png" class="clear-button" @click="clearCondition()">
          </div>
          <div slot="right" class="h-header-btn" @click="hideModal">取消</div>
        </h-header>
        <scroll
          ref="scroll"
          :updateData="[bpList]"
          :pullUp="true"
          @pullingUp="loadMore">
          <list-item :item-height="80">
            <item
              v-for="(list,index) in bpList"
              :has-border="false" :key="index" :proportion="[5,1]" :show-arrow="true"
              @click.native="goPartnerMainten(list)">
              <img slot="left-icon" src="@/assets/image/bpMaster/custormer@2x.png" class="left-icon">
              <div slot="name" class="text">
                <div class="cont-name">客户名称：\{{ list.bp_name }}</div>
                <div class="cont-type">客户类型：\{{ list.bp_type_n }}</div>
                <div class="cont-type">客户分类：\{{ list.bp_class_n }}</div>
              </div>
            </item>
          </list-item>
        </scroll>
      </h-view>
    </h-modal>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      offsize: 1,
      bpList: [],
      bpCount: {},
      showModalValue: false,
      info: {
        key: '',
      },
    }
  },
  watch: {
    'info.key': {
      handler (newName, oldName) {
        let vm = this
        if (vm.timeout) {
          clearTimeout(vm.timeout)
        }
        vm.timeout = setTimeout(() => {
          vm.search()
        }, 1000)
      },
    },
  },
  created: function () {
    let vm = this
    vm.initLoad()
  },
  methods: {
    initLoad () {
      let vm = this
      let url = $config.basePath + 'query_bp_master'
      let url1 = $config.basePath + 'bp_count_query'
      let param = {'offsize': vm.offsize}
      let param1 = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        if (res.result === 'S') {
          // bp_type
          vm.bpList = res.bpMaster_list
          if (res.bpMaster_list.length > 0 && res.bpMaster_list.length < 10) {
            vm.$refs.scroll.update(true)
            vm.$refs.scrollList.update(true)
          }
          vm.hlsPopup.hideLoading()
        }
      })
      vm.hlsHttp.post(url1, param1).then(function (res) { // 商业伙伴各种个数信息查询
        vm.bpCount = res.bp_count_list[0]
        vm.hlsPopup.hideLoading()
      })
    },

    loadMore () {
      let vm = this
      vm.offsize = vm.offsize + 1
      let url = $config.basePath + 'query_bp_master'
      let param = {
        'offsize': vm.offsize,
        'searchInput': vm.info.key,
      }
      hlsHttp.post(url, param).then(function (res) {
        let returnData = []
        if (res.result === 'S') {
          returnData = res.bpMaster_list
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            returnData.forEach((data, index, array) => {
              vm.bpList.push(array[index])
            })
            vm.$refs.scroll.update(true)
            vm.$refs.scrollList.update(true)
          } else if (returnData.length === 10) {
            returnData.forEach((data, index, array) => {
              vm.bpList.push(array[index])
            })
            vm.$refs.scroll.update(false)
            vm.$refs.scrollList.update(false)
          }
        }
      })
    },

    search () {
      let vm = this
      vm.offsize = 1
      // vm.bpList = []
      let url = $config.basePath + 'query_bp_master'
      let param = {
        'searchInput': vm.info.key,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.bpList = res.bpMaster_list
        if (vm.bpList.length >= 0 && vm.bpList.length < 10) {
          vm.$refs.scroll.update(true)
        } else if (vm.bpList.length === 10) {
          vm.$refs.scroll.update(false)
        }
      })
    },

    goPartnerMainten (list) {
      this.hideModal()
      let name
      if (list.bp_class === 'NP') {
        name = 'PartnerMainten'
      } else {
        name = 'PartnerOrgMainten'
      }
      this.$router.push({
        name: name,
        params: {
          bpData: list,
        },
      })
    },
    showSearchModal () {
      this.showModalValue = true
    },
    /**
       * 商业伙伴创建
       */
    createPartent () {
      this.$router.push({
        name: 'PartnerCreate',
      })
    },
    hideModal () {
      this.$refs.modal.hideModal()
      this.info.key = ''
    },
    clearCondition () {
      this.info.key = ''
    },

  },
}
</script>
<style lang="less" scoped type="text/less">

  .partner-list {
    .scroll-content{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
    }
    .content {
      background-color: #eff1f3;
      padding-top: 0;
      .top-part{
        background-color: #FFFFFF;
        padding:12px 0 10px 0;
        .client{
          display: flex;
          .client-img{
            margin:0 5px 0 15px;
            img{
              width:17px;
              height: 15px;
            }
          }
          .statistics{
            font-size: 14px;
            line-height: 16px;
            color: #363636;
          }
        }
        .total-num{
          width: 100%;
          padding: 10px 0 25px 0;
          font-size: 26px;
          color: #FF8877;
          display: flex;
          justify-content: center;
          .measure{
            font-size: 13px;
            color: #313131;
            padding:5px;
          }
        }
        .list-general{
          width: 100%;
          display: flex;
          justify-content: center;
          .enterprise{
            width: 25%;
            display: flex;
            text-align:center;
            flex-direction: column;
            .list-name{
              font-size: 13px;
              color: #313131;
            }
            .list-num{
              padding-top: 6px;
              font-size: 14px;
              color: #FF8877;
              .sum-num{
                font-size: 12px;
                line-height: 17px;
                color: #313131;
                padding-left: 2px;
              }
            }
          }
        }
      }
      .search{
        margin-top:5px;
        width: 100%;
        background-color: #FFFFFF;
        display: flex;
        padding: 12.5px 0;
        .search-box{
          width:80%;
          margin-left:15px;
          display: flex;
          background: #FDFFFF;
          border: 1px solid @headerColor;  /*no*/
          border-radius: 50px;
          .search-icon{
            padding-left: 10px;
            display: flex;
            align-items: center;
            img{
              width: 22px;
              height:15px;
              border-right:1px solid @headerColor; /*no*/
              padding-right:7px;
            }
          }
          .hint{
            font-size:12px;
            margin-left:12px;
            color: #DBD8D8;
            display: flex;
            align-items: center;
          }
        }
        .add-icon{
          margin-left:23px;
          img{
            width:26px;
            height:26px;
          }
        }
      }

      .hls-item {
        &:nth-child(odd){
          background-color: #EFF1F3;
        }
        &:nth-child(even){
          background-color: #fff;
        }

        .contents {
          .add-name {
            .cont-name{
              font-size: 15px;
              line-height: 21px;
              color: @headerColor;
            }
            .cont-type{
              font-size: 13px;
              line-height: 18px;
              color: #888;
            }
            .left-icon{
              width: 35px;
            }
          }
        }
      }
    }
    .search-modal{
      .scroll-content{
        top:44px
      }
      .search-shelter{
        height: 30px;
        width: 100%;
        background-color: #fff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        img{
          width: 15px;
          margin: 0 10px;
        }
        input{
          width: 100%;
          font-size: 14px;
          color: #333;
        }
      }
    }
    .content-scroll{
      top:198px
    }
  }
</style>
