<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{ viewTitle }}</div>
      <div>
        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate()">保存</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
        <el-row style="border-top: 1px solid #e0e3eb">
          <el-col :span="24">
            <div class="span-sty"><span class="icon">*</span>生成合同设置</div>
            <el-form-item>
              <el-radio-group class="addinputInfo" :disabled="contractDisabled" style="font-size: 1px" v-model="formobj.conSetUpKey">
                <el-radio label="001">一车一合同</el-radio>
                <el-radio label="002">一贷款人一合同</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">还款协议</div>
        <div class="title">借款人乙方</div>
        <el-row>
          <el-col :span="8">
            <div class="span-sty"><span><span class="icon">*</span>借款人姓名</span><el-checkbox style="margin-left: 5px" v-model="formobj.actualBuyer">实际购车人</el-checkbox></div>
            <el-form-item><span class="addinputInfo">{{ formobj.lenderNam }}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty"><span class="icon">*</span>身份证号</div>
            <el-form-item prop="idNumber"><el-input class="addinputInfo" style="width: 40%" v-model="formobj.idNumber" clearable placeholder=""/></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty"><span class="icon">*</span>电话</div>
            <el-form-item><span class="addinputInfo">{{ formobj.mobile }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="span-sty">借款人职业</div>
            <el-form-item>
              <el-select class="addinputInfo" v-model="formobj.lenderJobKey" placeholder="请选择" clearable filterable @change="lenderJobChange">
                <el-option v-for="item in career_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty"><span class="icon">*</span>婚姻状况</div>
            <el-form-item prop="marriageTypeKey">
              <el-select class="addinputInfo" v-model="formobj.marriageTypeKey" placeholder="请选择" clearable filterable @change="marriageChange">
                <el-option v-for="item in marital_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty">有无子女</div>
            <el-form-item prop="childrenKey">
              <el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.childrenKey" @change="childrenChange">
                <el-radio label="1">有</el-radio>
                <el-radio label="0">无</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty"><span class="icon">*</span>借款人户籍地址</div>
            <el-form-item prop="koseki">
              <el-input class="addinputInfo addinputw" v-model="formobj.koseki" clearable placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty"><span class="icon">*</span>借款人现住址</div>
            <el-form-item prop="address">
              <el-input class="addinputInfo addinputw" v-model="formobj.address" clearable placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="formobj.marriageTypeKey == '0004'">
          <div class="title">配偶(丙方)</div>
          <el-row>
            <el-col :span="8">
              <div class="span-sty"><span class="icon">*</span>配偶姓名</div>
              <el-form-item prop="spouseName">
                <el-input class="addinputInfo" style="width: 40%" v-model="formobj.spouseName" clearable placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span class="icon">*</span>身份证号</div>
              <el-form-item prop="spouseIdCard">
                <el-input class="addinputInfo" style="width: 40%" v-model="formobj.spouseIdCard" clearable placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span class="icon">*</span>电话</div>
              <el-form-item prop="spouseMobile">
                <el-input class="addinputInfo" style="width: 40%" v-model="formobj.spouseMobile" clearable placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">配偶职业</div>
              <el-form-item>
                <el-select class="addinputInfo" v-model="formobj.spouseJobKey" placeholder="请选择" clearable filterable @change="spouseChange">
                  <el-option v-for="item in career_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span class="icon">*</span>户籍地址</div>
              <el-form-item prop="spouseRegisterAddress">
                <el-input class="addinputInfo addinputw" v-model="formobj.spouseRegisterAddress" clearable placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span class="icon">*</span>现住址</div>
              <el-form-item prop="spouseAddress">
                <el-input class="addinputInfo addinputw" v-model="formobj.spouseAddress" clearable placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="title titleOne">
          <div>其他人员(戊方、己方,若借款人不是实际购车人,则必须录入实际购车人,且作为担保人)</div>
          <el-button type="primary" class="btntopblueline" size="mini" @click="addPerson">添加</el-button>
        </div>
        <el-table :key="tableKey" :data="formobj.otherPersonnel" :index="index" border style="width: 100%">
          <el-table-column fixed width="60" label="序号" type="index" :index="index + 1" align="center"/>
          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="deletePerson(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="人员身份" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.personnelType" placeholder="请选择" @change="identityChange($event, scope.row)" clearable filterable>
                <el-option v-for="item in identity_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="身份证号码" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.idCard" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="电话" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.mobile" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="户籍地址" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.residentAddress" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="现住址" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="工作单位" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.company" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="职业" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.job" clearable placeholder=""></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="12">
            <div class="span-sty"><span class="icon">*</span>车辆登记在</div>
            <el-form-item prop="vehRegis">
              <el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.vehRegis">
                <el-radio label="1">客户名下</el-radio>
                <el-radio label="2">挂靠公司名下</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div v-if="formobj.vehRegis == '2'">
              <div class="span-sty"><span class="icon">*</span>挂靠公司是否担保</div>
              <el-form-item prop="isSecurity">
                <el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.isSecurity">
                  <el-radio label="0">是</el-radio>
                  <el-radio label="1">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <div v-if="formobj.vehRegis == '2'">
          <div class="title">挂靠公司信息(丁方)</div>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">选择挂靠运输公司</div>
              <el-form-item>
                <el-select v-model="formobj.accCompName" class="addinputInfo" filterable clearable placeholder="" @change="changeBusiness">
                  <el-option v-for="item in business_list" :key="item.taxpayerNo" :label="item.businessName" :value="item.businessName"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="span-sty"><span class="icon">*</span>挂靠公司名称</div>
              <el-form-item>
                <el-input class="addinputInfo addinputw" v-model="formobj.accCompName" clearable placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="span-sty"><span class="icon">*</span>统一社会信用代码</div>
              <el-form-item>
                <el-input class="addinputInfo" style="width: 30%" v-model="formobj.accCompRegistNum" clearable placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="span-sty">负责人</div>
              <el-form-item>
                <el-input class="addinputInfo" style="width: 30%" v-model="formobj.accCompContract" clearable placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="span-sty">电话</div>
              <el-form-item>
                <el-input class="addinputInfo" style="width: 30%" v-model="formobj.accComphone" clearable placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="span-sty">注册地址</div>
              <el-form-item>
                <el-input class="addinputInfo addinputw" v-model="formobj.accCompAddress" clearable placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="span-sty">实际经营地址</div>
              <el-form-item>
                <el-input class="addinputInfo addinputw" v-model="formobj.accCompxAddress" clearable placeholder=""/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="title">车辆及上装采购合同</div>
        <el-row>
          <el-col :span="24">
            <div class="span-sty"><span class="icon">*</span>挂车或上装是否公司采购</div>
            <el-form-item>
              <el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.isCompBuy">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import req from '@/api/homevisitpreparation/homevisitpreparation'
import { selectInvoingByOrgPath, typeValues } from '@/api/Common/dictcommons'

export default {
  name: 'HomeVisitPreparationAdd',
  data() {
    return {
      viewTitle: '',
      submitdisabled: false,
      contractDisabled: false,
      tableKey: 0,
      index: 0,
      career_list: [],
      marital_list: [],
      identity_list: [],
      business_list: [],
      formobj: {
        accCompAddress: '',
        accCompContract: '',
        accCompName: '',
        accCompRegistNum: '',
        accComphone: '',
        accCompxAddress: '',
        actualBuyer: false,
        address: '',
        bankCardImages: [],
        bankNumber: '',
        children: '',
        childrenKey: '',
        conSetUpKey: '',
        emergencyContactMobile: '',
        emergencyContactName: '',
        emergencyContactType: '',
        emergencyContactTypeKey: '',
        idNumber: '',
        invoBank: '',
        isCompBuy: '',
        isSecurity: '',
        koseki: '',
        lenderJob: '',
        lenderJobKey: '',
        lenderNam: '',
        lenderSid: '',
        marriageType: '',
        marriageTypeKey: '',
        mobile: '',
        otherPersonnel: [],
        sid: '',
        spouseAddress: '',
        spouseIdCard: '',
        spouseJob: '',
        spouseJobKey: '',
        spouseMobile: '',
        spouseName: '',
        spouseRegisterAddress: '',
        vehRegis: ''
      },
      rules: {
        idNumber: [{ required: true, message: '借款人身份证号不能为空', trigger: 'blur' }],
        marriageTypeKey: [{ required: true, message: '婚姻情况不能为空', trigger: 'change' }],
        childrenKey: [{ required: true, message: '有无子女不能为空', trigger: 'change' }],
        koseki: [{ required: true, message: '借款人户籍地址不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '借款人现住址不能为空', trigger: 'blur' }],
        vehRegis: [{ required: true, message: '车辆登记不能为空', trigger: 'change' }],
        isSecurity: [{ required: true, message: '挂靠公司是否担保不能为空', trigger: 'change' }],
        spouseName: [{ required: true, message: '配偶姓名不能为空', trigger: 'blur' }],
        spouseIdCard: [{ required: true, message: '配偶身份证号不能为空', trigger: 'blur' }],
        spouseMobile: [{ required: true, message: '配偶电话不能为空', trigger: 'blur' }],
        spouseRegisterAddress: [{ required: true, message: '配偶户籍地址不能为空', trigger: 'blur' }],
        spouseAddress: [{ required: true, message: '配偶现住址不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init() {
      typeValues({ type: 'careerType' }).then((res) => {
        if (res.success) {
          this.career_list = res.data
        }
      })
      typeValues({ type: 'maritalstatus' }).then((res) => {
        if (res.success) {
          this.marital_list = res.data
        }
      })
      typeValues({ type: 'identity2' }).then((res) => {
        if (res.success) {
          this.identity_list = res.data
        }
      })
      selectInvoingByOrgPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => {
        if (res.success) {
          this.business_list = res.data
        }
      })
    },
    showInfo(sid) {
      this.init()
      this.viewTitle = '贷款合同信息补充'
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      req.fetchDetailsBySid({ sid: sid }).then((resp) => {
        if (resp.success) {
          this.formobj = resp.data
          this.formobj.sid = sid
          req.initConSetUp(sid).then((res) => {
            if (res.success) {
              if (res.data === '003') {
                this.contractDisabled = false
              } else {
                this.contractDisabled = true
                this.formobj.conSetUpKey = res.data
              }
            }
          })
        }
      })
    },
    lenderJobChange(value) {
      const choose = this.career_list.filter((item) => item.dictKey === value)
      if (choose.length > 0 && choose !== null) {
        this.formobj.lenderJob = choose[0].dictValue
      } else {
        this.formobj.lenderJob = ''
      }
    },
    marriageChange(value) {
      const choose = this.marital_list.filter((item) => item.dictKey === value)
      if (choose.length > 0 && choose !== null) {
        this.formobj.marriageType = choose[0].dictValue
      } else {
        this.formobj.marriageType = ''
      }
    },
    childrenChange(val) {
      if (val === '1') {
        this.formobj.children = '有'
      } else {
        this.formobj.children = '无'
      }
    },
    spouseChange(value) {
      const choose = this.career_list.filter((item) => item.dictKey === value)
      if (choose.length > 0 && choose !== null) {
        this.formobj.spouseJob = choose[0].dictValue
      } else {
        this.formobj.spouseJob = ''
      }
    },
    addPerson() {
      this.formobj.otherPersonnel.push({
        address: '',
        company: '',
        idCard: '',
        job: '',
        mobile: '',
        name: '',
        personnelKey: '',
        personnelType: '',
        residentAddress: '',
        sid: ''
      })
    },
    deletePerson(index) {
      this.formobj.otherPersonnel.splice(index, 1)
    },
    identityChange(value, row) {
      const choose = this.identity_list.filter((item) => item.dictValue === value)
      if (choose.length > 0) {
        row.personnelKey = choose[0].dictKey
      } else {
        row.personnelKey = ''
      }
    },
    changeBusiness(value) {
      const choose = this.business_list.filter((item) => item.businessName === value)
      if (choose.length > 0) {
        this.formobj.accCompRegistNum = choose[0].taxpayerNo
        this.formobj.accComphone = choose[0].phone
        this.formobj.accCompxAddress = choose[0].address
      } else {
        this.formobj.accCompRegistNum = ''
        this.formobj.accComphone = ''
        this.formobj.accCompxAddress = ''
      }
    },
    saveOrUpdate() {
      if (this.formobj.conSetUpKey === '') {
        this.$message({ showClose: true, type: 'error', message: '生成合同设置不能为空' })
        return
      }
      if (!this.formobj.actualBuyer) {
        if (this.formobj.otherPersonnel.length === 0) {
          this.$message({ showClose: true, type: 'error', message: '若借款人不是实际购车人，则其他人员表中必须录入实际购车人' })
          return
        } else {
          let tip = '0'
          for (var i = 0; i < this.formobj.otherPersonnel.length; i++) {
            if (this.formobj.otherPersonnel[i].personnelKey === '3') {
              tip = '1'
              break
            }
          }
          if (tip === '0') {
            this.$message({ showClose: true, type: 'error', message: '若借款人不是实际购车人，则其他人员表中必须录入实际购车人' })
            return
          }
        }
      }
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.submitdisabled = true
          req.saveOrUpdate(this.formobj).then((resp) => {
            if (resp.success) {
              const loading = this.$loading({
                lock: true,
                text: '合同生成中，请勿终止和关闭，生成后才可后续操作，请耐心等待，大概用时1-2分钟……',
                customClass: 'create-isLoading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              })
              req.saveLoanCon({ sid: this.formobj.sid, conSetUpKey: this.formobj.conSetUpKey }).then((res) => {
                if (res.success) {
                  loading.close()
                  this.$message({ showClose: true, type: 'success', message: '操作成功' })
                  this.handleReturn('true')
                }
              })
            } else {
              this.submitdisabled = false
            }
          }).catch(() => {
            this.submitdisabled = false
          })
        }
      })
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj = {
        accCompAddress: '',
        accCompContract: '',
        accCompName: '',
        accCompRegistNum: '',
        accComphone: '',
        accCompxAddress: '',
        actualBuyer: false,
        address: '',
        bankCardImages: [],
        bankNumber: '',
        children: '',
        childrenKey: '',
        conSetUpKey: '',
        emergencyContactMobile: '',
        emergencyContactName: '',
        emergencyContactType: '',
        emergencyContactTypeKey: '',
        idNumber: '',
        invoBank: '',
        isCompBuy: '',
        isSecurity: '',
        koseki: '',
        lenderJob: '',
        lenderJobKey: '',
        lenderNam: '',
        lenderSid: '',
        marriageType: '',
        marriageTypeKey: '',
        mobile: '',
        otherPersonnel: [],
        sid: '',
        spouseAddress: '',
        spouseIdCard: '',
        spouseJob: '',
        spouseJobKey: '',
        spouseMobile: '',
        spouseName: '',
        spouseRegisterAddress: '',
        vehRegis: ''
      }
      this.submitdisabled = false
      this.contractDisabled = false
      this.$refs['form_obj'].resetFields()
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 200px !important;
}
.addinputInfo {
  margin-left: 190px !important;
}
/deep/ .el-form-item__error {
  margin-left: 190px !important;
}
.titleOne {
  padding: 7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
/deep/ .create-isLoading .el-loading-text {
  font-size: 20px;
}
</style>
