<template>
  <h-view class="public-style bp-detail" title="客户信息">
    <h-content>
      <list-item :item-height="40">
        <item :proportion="[1,1]">
          <img slot="left-icon" src="@/assets/image/projectCreate/client-info@2x.png" class="left-icon">
          <div slot="name">客户基本信息</div>
          <img
            slot="right-icon" src="@/assets/image/projectCreate/add@2x.png" class="right-icon" style="width: 0.4rem"
            @click="showSearchModal()">
        </item>
        <item>
          <div slot="name" class="required">客户姓名</div>
          <input slot="content" v-model="prjBp.bp_name" placeholder="请输入">
        </item>
        <item>
          <div slot="name" class="required">手机号</div>
          <input slot="content" v-model="prjBp.cell_phone" placeholder="请输入">
        </item>
        <item :show-arrow="true">
          <div slot="name" class="required">证件类型</div>
          <input
            slot="content" v-model="prjBp.id_type_n" placeholder="请选择" readonly
            @click="certificateType()">
        </item>
        <item>
          <div slot="name" class="required">证件号码</div>
          <input slot="content" v-model="prjBp.id_card_no" type="text" placeholder="请输入">
        </item>
      </list-item>
      <list-item>
        <item :proportion="[1,1]">
          <img slot="left-icon" src="@/assets/image/projectCreate/building@2x.png" class="left-icon">
          <div slot="name" class="titleMessage">客户地址信息</div>
        </item>
        <item :show-arrow="true">
          <div slot="name">住房情况</div>
          <input
            slot="content" v-model="prjBp.ownship_of_house_n" placeholder="请选择" readonly
            @click="housingSituation()">
        </item>
        <item :show-arrow="true">
          <div slot="name">住房是否贷款</div>
          <input
            slot="content" v-model="prjBp.house_loans_flag_n" placeholder="请选择" readonly
            @click="isLoan()">
        </item>
        <item>
          <div slot="name">户籍地址</div>
          <input slot="content" v-model="prjBp.address_on_resident_booklit" placeholder="请输入">
        </item>
        <item>
          <div slot="name">居住地址</div>
          <input slot="content" v-model="prjBp.living_address" placeholder="请输入">
        </item>
      </list-item>
      <list-item>
        <item :proportion="[1,1]">
          <img slot="left-icon" src="@/assets/image/projectCreate/work@2x.png" class="left-icon">
          <div slot="name">客户工作信息</div>
        </item>
        <item>
          <div slot="name">单位名称</div>
          <input slot="content" v-model="prjBp.work_unit" placeholder="请输入">
        </item>
        <item>
          <div slot="name">单位地址</div>
          <input slot="content" v-model="prjBp.work_unit_address" placeholder="请输入">
        </item>
        <item>
          <div slot="name">单位电话</div>
          <input slot="content" v-model="prjBp.work_unit_phone" placeholder="请输入">
        </item>
        <item :show-arrow="true">
          <div slot="name">职务</div>
          <input
            slot="content" v-model="prjBp.position_n" placeholder="请选择" readonly
            @click="jobTitle">
        </item>
      </list-item>
    </h-content>
    <bottom-tab>
      <tab-button @click.native="save">保存</tab-button>
    </bottom-tab>

    <h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="search-modal">
      <h-view>
        <h-header :proportion="[1,15,4]" class="bar-custom">
          <div slot="center" class="search-shelter">
            <img src="@/assets/image/projectCreate/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/projectCreate/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"
          class=""
          @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="loadBpToPrjBp(index)">
              <img slot="left-icon" src="@/assets/image/projectCreate/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>
import projectService from './projectService'

export default {
  name: 'PrjBpInfo',
  data () {
    return {
      idCheckFlag: false,
      prjBp: {
        bp_id: null,
        // 客户姓名
        bp_name: null,
        // 手机号
        cell_phone: null,
        // 证件类型
        id_type_n: null,
        id_type: null,
        // 证件号码
        id_card_no: null,
        // 住房情况
        ownship_of_house: null,
        ownship_of_house_n: null,
        // 是否住房贷款
        house_loans_flag: null,
        house_loans_flag_n: null,
        // 户籍地址
        address_on_resident_booklit: null,
        // 居住地址
        living_address: null,
        // 单位名称
        work_unit: null,
        // 单位地址
        work_unit_address: null,
        // 单位电话
        work_unit_phone: null,
        // 职务
        position: null,
        position_n: null,
      },
      info: {
        key: '',
      },
      showModalValue: false,
      offsize: 1,
      bpList: [],
    }
  },
  created () {
    let vm = this
    this.$watch('info.key', (newValue, oldValue) => {
      if (vm.timeout) {
        clearTimeout(vm.timeout)
      }
      vm.timeout = setTimeout(() => {
        vm.search()
      }, 1000)
    })
  },

  mounted () {
    this.loadBpSelect()
    this.prjBp = projectService.getPrjbp()
  },
  methods: {
    loadBpSelect () {
      let vm = this
      let basePath = process.env.basePath
      let url = basePath + 'prj_bp_info_selected' // 伙伴信息下拉框
      let param = {}
      vm.hlsHttp.post(url, param).then(function (res) { // 伙伴信息下拉框初始化
        if (res.result === 'S') {
          vm.id_types = res.id_type_list// 证件类型
          vm.ownship_of_houses = res.ownship_of_house_list// 住房情况
          vm.house_loans = res.house_loans_flag_list // 住房是否贷款
          vm.positions = res.position_list // 职务
        }
      })
    },
    save () {
      let vm = this
      vm.checkIdCard()
      projectService.setClientInfoFlag(0)
      if (vm.prjBp.cell_phone) {
        vm.prjBp.cell_phone = (vm.prjBp.cell_phone).toString().replace(/(^\s*)|(\s*$)/g, '')
        if (!vm.prjBp.bp_class) {
          if (!vm.hlsUtil.phoneNumber(vm.prjBp.cell_phone)) {
            vm.hlsPopup.showLongCenter('手机号码错误')
            return
          }
        } else if (vm.prjBp.bp_class && vm.prjBp.bp_class !== 'ORG') {
          if (!vm.hlsUtil.phoneNumber(vm.prjBp.cell_phone)) {
            vm.hlsPopup.showLongCenter('手机号码错误')
            return
          }
        }
      } else {
        vm.hlsPopup.showLongCenter({content: '请填写手机号', type: 'warning'})
        return
      }
      if (!vm.prjBp.bp_name) {
        vm.hlsPopup.showLongCenter('请填写客户姓名')
      } else if (!vm.prjBp.id_type) {
        vm.hlsPopup.showLongCenter('请选择证件类型')
      } else if (!vm.prjBp.id_card_no) {
        vm.hlsPopup.showLongCenter('请填写证件号码')
      } else if (vm.prjBp.id_type === 'ID_CARD' && !vm.idCheckFlag) {
        vm.hlsPopup.showLongCenter('身份证输入有误！')
      } else {
        vm.hlsPopup.showLongCenter('保存成功!')
        projectService.setPrjbp(vm.prjBp)
        projectService.setClientInfoFlag(1)
        vm.returnGo()
      }
    },
    checkIdCard () {
      let vm = this
      if (!vm.prjBp.id_type) {
        vm.hlsPopup.showLongCenter('请先选择证件类型')
      } else {
        if (vm.prjBp.id_type === 'ID_CARD') {
          vm.idCheckFlag = true
          let result = vm.hlsUtil.isCardID(vm.prjBp.id_card_no.toString())
          if (result) {
            vm.idCheckFlag = false
            vm.hlsPopup.showLongCenter(result)
          }
        }
        // loadInfoByCard();
      }
    },
    certificateType () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.id_types,
        code: 'id_type',
        object: vm.prjBp,
        returnItem: function (index, result) {
          vm.prjBp = result
        },
      })
    },
    housingSituation () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.ownship_of_houses,
        code: 'ownship_of_house',
        object: vm.prjBp,
        returnItem: function (index, result) {
          vm.prjBp = result
        },
      })
    },
    isLoan () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.house_loans,
        code: 'house_loans_flag',
        object: vm.prjBp,
        returnItem: function (index, result) {
          vm.prjBp = result
        },
      })
    },
    jobTitle () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.positions,
        code: 'position',
        object: vm.prjBp,
        returnItem: function (index, result) {
          vm.prjBp = result
        },
      })
    },

    showSearchModal () {
      this.showModalValue = true
      this.loadMaster()
    },
    loadMaster () {
      let vm = this
      let url = $config.basePath + 'query_bp_master'
      let param = { 'offsize': vm.offsize }
      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.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)
          } else if (returnData.length === 10) {
            returnData.forEach((data, index, array) => {
              vm.bpList.push(array[index])
            })
            vm.$refs.scroll.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)
        }
      })
    },
    hideModal () {
      this.$refs.modal.hideModal()
      this.info.key = ''
    },
    clearCondition () {
      this.info.key = ''
    },

    loadBpToPrjBp (index) {
      let vm = this
      let bp = vm.bpList[index]
      vm.prjBp = Object.assign(vm.prjBp, bp)
      vm.hideModal()
    },
    returnGo () {
      let vm = this
      vm.$router.push({
        name: 'InfoMationMain',
        params: {
          reload: false,
        },
      })
    },
  },
}
</script>

<style scoped lang="less">
  .hls-item .contents .add-content .right-icon {
    width: 10px;
  }

  .bp-detail {
    .content{
      padding-bottom: 80px;
    }
    .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;
        }
      }

      .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;
            }
          }
        }
      }
    }
    .h-bottom-tab{
      background-color: @headerColor;
      color: #fff;
    }
  }
</style>
