<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-19 09:31:19
 * @LastEditTime: 2019-09-25 09:39:13
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="base-info" class="public-style" title="基本信息">
    <h-header :proportion="[5,1,1]" class="header">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>用户绑定</span>
      </div>
    </h-header>
    <Tab @getTabNum="getTabNum" />
    <h-content class="content">
      <div v-show="tabNum==0">
        <list-item :item-height="44">
          <item :showArrow="true">
            <div slot="name" class="font-color">客户类型</div>
            <input
              slot="content"
              v-model="bp_type_n"
              placeholder="请选择"
              type="text"
              readonly
              @click="selectIdType()"
            >
          </item>
          <item v-if="bp_type_flag">
            <div slot="name">{{ typeName }}</div>
            <input slot="content" :placeholder="type" v-model="baseInfo.agent_username" >
          </item>
        </list-item>
        <div class="userInfo martop">企业信息</div>
        <div class="upload-id-card">
          <span class="font-color">营业执照照片上传</span>
          <div class="upload-box1">
            <!-- <div> -->
            <img src="@/assets/userBind/camera.png" >
            <!-- </div> -->
          </div>
        </div>

        <!-- 营业执照识别信息 -->

        <list-item :item-height="44" class="second-part">
          <item>
            <div slot="name" class="font-color">公司名称</div>
            <input slot="content" v-model="baseInfo.bp_name" placeholder="上传营业执照自动填充" class="auto" >
          </item>
          <item>
            <div slot="name" class="font-color">企业类型</div>
            <input
              slot="content"
              v-model="baseInfo.enterprise_type"
              placeholder="上传营业执照自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color">统一社会信用代码</div>
            <input slot="content" v-model="baseInfo.organization_code" placeholder="上传营业执照自动填充" >
          </item>
          <item>
            <div slot="name" class="font-color">注册资本</div>
            <input slot="content" v-model="baseInfo.registered_capital" placeholder="上传营业执照自动填充" >
          </item>
          <item>
            <div slot="name" class="font-color">法定代表人</div>
            <input slot="content" v-model="baseInfo.legal_person" placeholder="上传营业执照自动填充" >
          </item>
          <item>
            <div slot="name" class="font-color">注册地址</div>
            <input slot="content" v-model="baseInfo.registered_place" placeholder="请输入注册地址" >
          </item>
          <item>
            <div slot="name" class="font-color">经营地址</div>
            <input slot="content" v-model="baseInfo.business_address" placeholder="请输入经营地址" >
          </item>
          <item>
            <div slot="name" class="font-color">固定电话</div>
            <input slot="content" v-model="baseInfo.phone" placeholder="请输入固定电话" >
          </item>
        </list-item>

        <!-- 授权切换 -->

        <div class="authorize">
          <p class="authorize-select font-color">是否授权</p>
          <div class="authorize-checklist" @click="authorizeChange">
            <div v-if="flag" />
            <img v-if="!flag" src="@/assets/userBind/org/checklist.png" alt >
          </div>
        </div>
        <div class="userInfo types">{{ text }}</div>
        <div class="upload-id-cards">
          <span>身份证照片上传</span>
          <div class="upload-box">
            <div>
              <img src="@/assets/userBind/org/front.png" >
              <p>正面</p>
            </div>
            <div>
              <img src="@/assets/userBind/org/back.png" >
              <p>反面</p>
            </div>
          </div>
        </div>

        <!-- 已授权 -->

        <list-item v-if="!flag" :item-height="44" class="second-part">
          <item>
            <div slot="name" class="font-color">姓名</div>
            <input
              slot="content"
              v-model="authMsg.auth_person_name"
              placeholder="上传身份证自动填充"
            >
          </item>
          <item>
            <div slot="name" class="font-color">身份证号</div>
            <input
              slot="content"
              v-model="authMsg.auth_person_id_card"
              placeholder="上传身份证自动填充"
            >
          </item>
          <item>
            <div slot="name" class="font-color">公司职务</div>
            <input slot="content" v-model="authMsg.auth_person_position" placeholder="请输入公司职务" >
          </item>
          <item>
            <div slot="name" class="font-color">授权事项</div>
            <input slot="content" v-model="authMsg.auth_person_matter" placeholder="请输入授权事项" >
          </item>
        </list-item>

        <!-- 未授权 -->

        <list-item v-if="flag" :item-height="44" class="second-part">
          <item>
            <div slot="name" class="font-color">姓名</div>
            <input slot="content" v-model="legal_personMsg.id_card_name" placeholder="上传身份证自动填充" >
          </item>
          <item>
            <div slot="name" class="font-color">身份证号</div>
            <input slot="content" v-model="legal_personMsg.id_card_no" placeholder="上传身份证自动填充" >
          </item>
          <item>
            <div slot="name" class="font-color">手机号</div>
            <input slot="content" v-model="legal_personMsg.cell_phone" placeholder="请输入手机号" >
          </item>
          <item>
            <div slot="name" class="font-color">居住地址</div>
            <input slot="content" v-model="legal_personMsg.living_address" placeholder="请输入居住地址" >
          </item>
        </list-item>
        <div v-if="!flag" class="upload-id-card">
          <span>授权书证件上传</span>
          <div class="upload-box1">
            <!-- <div> -->
            <img src="@/assets/userBind/camera.png" >
            <!-- </div> -->
          </div>
        </div>

        <!-- 资产信息 -->

        <div :class="{martop: flag,types:!flag}" class="userInfo">资产信息</div>
        <div class="card2">
          <span>房产证件</span>
          <div class="img-content">
            <div class="card-upload">
              <img src="@/assets/userBind/camera.png" >
            </div>
          </div>
        </div>
        <div class="card2">
          <span>车辆证件</span>
          <div class="img-content">
            <div class="card-upload">
              <img src="@/assets/userBind/camera.png" >
            </div>
          </div>
        </div>
        <div class="card2">
          <span>其他资产证件</span>
          <div class="img-content">
            <div class="card-upload">
              <img src="@/assets/userBind/camera.png" >
            </div>
          </div>
        </div>
      </div>
      <BankInfo v-show="tabNum==1" @getInfo="getInfo" />
      <InvoiceInfo v-show="tabNum==2" @getinvoiceList="getinvoiceList" />
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="put" @click.native="handSubmit">提交</tab-button>
      <tab-button class="save" @click.native="verified">保存</tab-button>
    </bottom-tab>
    <h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="search-modal">
      <h-content class="modal-content">
        <div class="modal-content-add-top">
          <span>添加银行卡</span>
          <img src="@/assets/userBind/close.png" @click="hideModal" >
        </div>
        <img src="@/assets/userBind/addBack.png" class="addBack" >
        <list-item :item-height="44" class="card-Info">
          <item>
            <div slot="name">银行卡卡号</div>
            <input
              slot="content"
              v-model="bank_lists.bank_account_num"
              placeholder="银行卡卡号自动填充"
            >
          </item>
          <item>
            <div slot="name">账户姓名</div>
            <input
              slot="content"
              v-model="bank_lists.bank_account_name"
              placeholder="请输入账户名称"
            >
          </item>
          <item>
            <div slot="name">银行名称</div>
            <input
              slot="content"
              v-model="bank_lists.bank_full_name"
              placeholder="请输入银行名称"
            >
          </item>
          <item>
            <div slot="name">支行名称</div>
            <input
              slot="content"
              v-model="bank_lists.bank_branch_name"
              placeholder="请输入支行名称"
            >
          </item>
        </list-item>
      </h-content>
      <bottom-tab class="add-box">
        <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button>
      </bottom-tab>
    </h-modal>
  </h-view>
</template>

<script>
import Tab from '@/components/tab'
import InvoiceInfo from './invoiceInfo'
import BankInfo from './bankInfo'
export default {
  name: 'Enterprise',
  components: {
    Tab,
    BankInfo,
    InvoiceInfo,
  },
  data () {
    return {
      tabNum: 0,
      bp_id: '',
      flag: true,
      img_url: {},
      typeList: [],
      backList: [],
      saveInfo: {},
      lastInfo: {},
      bp_type_n: '',
      msg_flag: false,
      invoiceInfo: {},
      maritalList: [],
      academic_bg_n: '',
      text: '法人代表信息',
      bp_type_flag: false,
      typeName: '业务经办',
      marital_status_n: '',
      bank_card_flag: false,
      showModalValue: false,
      type: '请输入业务经办姓名',
      legal_personMsg: {
        id_card_no: null,
        id_card_name: '',
        cell_phone: null,
        living_address: '',
      },
      baseInfo: {
        bp_type: '',
        bp_name: '',
        phone: null,
        auth_flag: '',
        business_address: '',
        legal_person: '',
        enterprise_type: '',
        agent_username: '',
        registered_place: '',
        organization_code: null,
        registered_capital: null,
        bp_class: this.$route.params.bp_class,
      },
      bank_lists: {
        bank_account_num: '',
        bank_account_name: '',
        bank_card_type: '储蓄卡',
        bank_full_name: '',
        bank_branch_name: '',
      },
      authMsg: {
        auth_person_name: '',
        auth_person_matter: '',
        auth_person_id_card: '',
        auth_person_position: '',
      },
    }
  },
  computed: {},
  watch: {
    // 监听客户类型
    bp_type_n () {
      let vm = this
      if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') {
        vm.type = '请输入业务经办员工代码'
        vm.typeName = '业务经办'
        vm.bp_type_flag = true
      } else if (
        vm.baseInfo.bp_type === 'AGENT' ||
        vm.baseInfo.bp_type === 'OFFICE' ||
        vm.baseInfo.bp_type === 'FACTORY'
      ) {
        vm.bp_type_flag = false
        delete vm.baseInfo.agent_username
      }
    },
    flag () {
      if (this.flag) {
        this.text = '法人代表信息'
      } else {
        this.text = '授权信息'
      }
    },
  },
  created () {
    this.getBpType()
  },
  methods: {
    handSubmit () {
      let url = $config.basePath + 'bp_bind_submit'
      let param = {
        'master': {
          'bp_id': this.bp_id,
          'company_id': '2145',
        },
      }
      this.hlsHttp.post(url, param).then(function (res) {
        console.log('企业信息提交', res)
      })
    },
    addBankInfo () {
      for (var key in this.bank_lists) {
        if (!this.bank_lists[key]) {
          this.bank_card_flag = false
          this.hlsPopup.showLongCenter('银行信息不完整！')
          return
        } else {
          this.bank_card_flag = true
        }
      }
      // 银行卡验证this.hlsUtil.isBankAccount(this.bank.bank_account_num)
      // if (this.hlsUtil.isBankAccount(this.bank_lists.bank_account_num)) {
      //   this.bank_card_flag = false
      //   this.hlsPopup.showLongCenter('请输入正确银行卡号！')
      // }
      // 验证账户名称与承租人名称一致
      if (this.bank_lists.bank_account_name !== this.saveInfo.bp_name) {
        this.bank_card_flag = false
        this.hlsPopup.showLongCenter('企业名称与账户名称不一致')
      }
      if (this.bank_card_flag) {
        this.hlsPopup.showLoading('请稍后')
        let url = $config.basePath + 'bp_bank_save'
        let param = {

          'master': {
            'bp_id': this.bp_id,
            'bank_lists': [this.bank_lists],
          },
        }
        let vm = this
        vm.hlsHttp.post(url, param).then(function (res) {
          console.log(res)
          if (res.result === 'S') {
            vm.hlsPopup.hideLoading()
            let url = $config.basePath + 'bp_bank_query'
            let param = {
              'bp_id': vm.bp_id,
            }

            vm.hlsHttp.post(url, param).then(function (res) {
              console.log('银行卡查询', res)
            })
          }
        })
      }
    },

    verified () {
      if (this.flag) {
        this.baseInfo.auth_flag = 'N'
        this.lastInfo = { ...this.baseInfo, ...this.legal_personMsg, ...this.invoiceInfo }
        this.saveInfo = {...this.lastInfo, ...this.authMsg}
      } else {
        this.baseInfo.auth_flag = 'Y'
        this.lastInfo = { ...this.baseInfo, ...this.authMsg, ...this.invoiceInfo }
        this.saveInfo = { ...this.lastInfo, ...this.legal_personMsg }
      }
      console.log('last', this.lastInfo, this.invoiceInfo)
      let vm = this
      // 校验开票信息
      let arr = Object.keys(vm.invoiceInfo)
      if (arr.length !== 6) {
        vm.msg_flag = false
        vm.hlsPopup.showLongCenter('开票信息不完整！')
      } else {
        vm.msg_flag = true
      }
      // 校验基本信息
      for (var key in vm.lastInfo) {
        if (!vm.lastInfo[key]) {
          vm.hlsPopup.showLongCenter('基本信息不完整！')
          vm.msg_flag = false
          return
        } else {
          vm.msg_flag = true
        }
      }
      if (!vm.bp_type_flag) {
        vm.baseInfo.agent_username = ''
        // vm.saveInfo.agent_username = ''
      }
      // 校验电话号
      let re = this.hlsUtil.phoneNumber(this.invoiceInfo.invoice_bp_address_phone_num)
      if (!re) {
        vm.msg_flag = false
        vm.hlsPopup.showLongCenter('请输入正确电话号')
      }
      // 校验身份证号vm.hlsUtil.isCardID(vm.baseInfo.id_card_no)
      if (vm.flag) {
        if (vm.hlsUtil.isCardID(vm.saveInfo.id_card_no)) {
          vm.msg_flag = false
          vm.hlsPopup.showLongCenter('身份证不正确')
        }
      } else {
        if (vm.hlsUtil.isCardID(vm.saveInfo.auth_person_id_card)) {
          vm.msg_flag = false
          vm.hlsPopup.showLongCenter('身份证不正确')
        }
      }

      if (vm.msg_flag) {
        vm.hlsPopup.showLoading('请稍后')
        let url = $config.basePath + 'bp_org_bind_save'
        let param = {
          'master': vm.saveInfo,
        }
        vm.hlsHttp.post(url, param).then(function (res) {
          console.log(res)
          if (res.result === 'S') {
            vm.hlsPopup.hideLoading()
            vm.bp_id = res.bp_id
          }
        })
      }
    },
    hideModal () {
      this.showModalValue = false
    },
    getInfo (i) {
      this.showModalValue = i
    },
    getinvoiceList (val) {
      console.log(val)
      this.invoiceInfo = val
    },
    authorizeChange () {
      this.flag = !this.flag
      if (this.flag) {
        this.auth_flag = '未授权'
      } else {
        this.auth_flag = '已授权'
      }
    },

    // 客户类型下拉框
    selectIdType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.typeList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.bp_type = obj.bp_type
          vm.bp_type_n = obj.bp_type_n
        },
      })
    },
    getTabNum (i) {
      this.tabNum = i
    },
    fileSuccess (fileList, result) {
      this.fileList = fileList
      this.fileList.forEach((itemFile, index) => {
        if (
          result.response &&
          itemFile.file &&
          !itemFile.attachment_id &&
          result.response.fileName === itemFile.file.name
        ) {
          itemFile.attachment_id = result.response.attachment_id
        }
      })
    },

    //  客户类型请求
    getBpType () {
      let vm = this
      let url = process.env.basePath + 'bp_type_select'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.typeList = res.lists.map(item => {
            return {
              code: item.bp_type,
              code_name: item.bp_type_n,
            }
          })
        }
      })
    },
  },
}
</script>
<style lang='less' scoped>
#base-info {
  font-family: PingFangSC-Regular;
  input::placeholder {
    color: #b4b4b5;
  }
  .header {
    background-color: #00469c;
    color: #fff;
    .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.6px;
        line-height: 24px;
      }
    }
  }

  .content {
    margin-top: 3px;
    height: 76%;
    .font-color {
      color: #656464;
    }
    .martop {
      margin-top: -10px;
    }
    .userInfo {
      height: 40px;
      line-height: 40px;
      background-color: #fafafa;
      color: #00469c;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 10px;
    }
    .types {
      margin-top: 0;
    }
    .authorize {
      width: 100%;
      height: 32px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: rgba(0, 70, 156, 0.03);
      .authorize-select {
        // width: 48px;
        height: 20px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #656464;
        line-height: 20px;
        margin-left: 16px;
      }
      .authorize-checklist {
        width: 16px;
        height: 16px;
        margin-left: 8px;
        div {
          width: 100%;
          height: 100%;
          border: 1px solid #00469c;
          border-radius: 3px;
        }
      }
    }
    .upload-id-cards {
      height: 176px;
      background-color: #fff;
      span {
        display: block;
        color: #656464;
        margin-left: 16px;
        padding-top: 16px;
        font-size: 13px;
      }
      .upload-box {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        div {
          width: 172px;
          height: 120px;
          border: 1px dashed #dcdcdd;
          text-align: center;
          font-size: 14px;
          color: #b4b4b5;
          .front,
          .back {
            width: 172px;
            height: 120px;
          }
        }
        div:nth-of-type(2) {
          margin-left: 7px;
        }
        img {
          margin-top: 32px;
          width: 58px;
          height: 45px;
        }
        p {
          margin-top: 12px;
          font-size: 13px;
        }
      }
    }
    .upload-id-card {
      height: 122px;
      background-color: #fff;
      span {
        display: block;
        color: #656464;
        margin-left: 16px;
        padding-top: 16px;
        font-size: 13px;
      }
      .upload-box1 {
        width: 80px;
        height: 80px;
        border: 1px dashed #dcdcdd;
        text-align: center;
        margin-top: 8px;
        margin-left: 16px;
        img {
          margin-top: 30px;
          width: 25px;
          height: 25px;
        }
      }
    }
    .second-part {
      margin-top: 9px;
      .auto {
        color: #b4b4b5;
      }
    }
    // .card {
    //   padding-bottom: 8px;
    //   span {
    //     color: #656464;
    //     font-size: 18px;
    //   }
    //   .card-upload {
    //     width: 80px;
    //     height: 80px;
    //     border: 1px dashed #dcdcdd;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     margin-top: 12px;
    //   }
    //   img {
    //     width: 24px;
    //     height: 24px;
    //   }
    // }
    .card2 {
      padding-bottom: 8px;
      height: auto;
      background-color: #fff;
      margin-bottom: 10px;
      span {
        color: #656464;
        font-size: 13px;
        line-height: 18px;
        padding-top: 8px;
        display: block;
        margin-left: 16px;
      }
      .img-content {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
      }
      .card-upload {
        width: 88px;
        height: 88px;
        border: 1px dashed #dcdcdd;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        margin-left: 16px;
        // float: left;
        img {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .put {
    width: 175px;
    height: 45px;
    color: #00469c;
    border-radius: 4px;
    border: 1px solid #00469c;
    background-color: #fafafa;
  }
  .save {
    width: 175px;
    height: 45px;
    color: #fff;
    border-radius: 4px;
    background-color: #00469c;
  }
  .footer-button {
    //height: 88px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .front,
  .photo,
  .backphoto,
  .back {
    display: none;
  }
}

.modal-content {
  height: 71%;
  position: absolute;
  top: 29%;
  background-color: #fff;
  .modal-content-add-top {
    width: 320px;
    margin: 0 auto;
    height: 34px;
    line-height: 34px;
    margin-top: 10px;
    margin-bottom: 16px;
    span {
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      color: #00469c;
      letter-spacing: 0.47px;
    }
    img {
      width: 34px;
      height: 34px;
      float: right;
    }
  }
  .addBack {
    display: block;
    width: 320px;
    margin: 0 auto;
    border-radius: 6px;
    margin-bottom: 17px;
  }

  .card-Info {
    margin-bottom: 220px;
  }
}
.add-card {
  width: 358px;
  height: 40px;
  background: #00469c;
  border-radius: 4px;
  color: #fff;
  // margin-top:-35px;
}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
// .add-box{
//   height: 88px;
// }
</style>
