<template>
  <h-view class="public-style partner-list" title="客户维护">
    <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"
      @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-modal ref="modal" v-model="showModalValue" position="bottom" 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 {
    background-color: #eff1f3;
    //padding-top: 0;
    .top-part {
      background-color: #FFFFFF;
      padding: 12px 0 10px 0;
      position: relative;
      z-index: 5;

      .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;
      z-index: 5;
      position: relative;

      .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 {

      .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;
        }
      }
    }
  }
</style>
