<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <el-form ref="form_obj" :model="formobj" class="formaddcopy02">
          <el-row style="border-top: 1px solid #E0E3EB">
            <el-col :span="8">
              <div class="span-sty">申请部门</div>
              <el-form-item><span class="addinputInfo">{{ formobj.applyDeptName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">申请人</div>
              <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">申请日期</div>
              <el-form-item><span class="addinputInfo">{{ formobj.createTime }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="span-sty">车型</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.modelName }}</span></el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="span-sty">客户类型</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.custTypeValue }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formobj.loanPreloanCreditApplyDetailsVo.custTypeKey != '1'">
            <el-col :span="24">
              <div class="span-sty">企业</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.qyName }}</span></el-form-item>
            </el-col>
          </el-row>
          <div class="title">
            <span v-if="formobj.loanPreloanCreditApplyDetailsVo.custTypeKey != '1'">法人信息</span>
            <span v-else>贷款人信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">身份证号码</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.idCard }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">姓名</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.custName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">手机号码</div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.phone }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>身份证正反面</span></div>
              <el-form-item>
                <el-form-item>
                  <el-image class="addinputInfo" v-for="(item, index) in formobj.loanPreloanCreditApplyDetailsVo.idCardImages" :key="index" :src="item" :preview-src-list="formobj.loanPreloanCreditApplyDetailsVo.idCardImages"/>
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title">
            <div>风控要求的其他人员</div>
          </div>
          <el-table :key="tableKey" :data="formobj.loanPreloanCreditApplyDetailsVo.loanPreloanCreditPeos" :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="180">
              <template slot-scope="scope">
                <span>{{ scope.row.peoTypeValue }}</span>
              </template>
            </el-table-column>
            <el-table-column label="身份证号码" align="center" width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.idCard }}</span>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.peoName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column label="身份证正反面照片" align="center" width="140">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" style="padding-left: 5px" v-show="scope.row.idCardImages.length > 0" @click="handleLook(scope.row.idCardImages)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.remarks }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="title">
            公司风控
          </div>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>要求附件</span></div>
              <el-form-item>
                <el-image class="addinputInfo" v-for="(item, index) in formobj.loanPreloanCreditApplyDetailsVo.comFkFiles" :key="index" :src="item" :preview-src-list="formobj.loanPreloanCreditApplyDetailsVo.comFkFiles"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>查询结果截图</span></div>
              <el-form-item>
                <el-image class="addinputInfo" v-for="(item, index) in formobj.loanPreloanCreditApplyDetailsVo.gsQueryResults" :key="index" :src="item" :preview-src-list="formobj.loanPreloanCreditApplyDetailsVo.gsQueryResults"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>审核结果</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.gsfkjg }}</span></el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>审核日期</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.gsshDate }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>备注</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.gsshRemarks }}</span></el-form-item>
            </el-col>
          </el-row>
          <div class="title">
            资方风控
          </div>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">资方名称</div>
              <el-form-item>
                <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.capitalName }}</span></el-form-item>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>查询结果截图</span></div>
              <el-form-item>
                <el-image class="addinputInfo" v-for="(item, index) in formobj.loanPreloanCreditApplyDetailsVo.zfQueryResults" :key="index" :src="item" :preview-src-list="formobj.loanPreloanCreditApplyDetailsVo.zfQueryResults"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>审核结果</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.zffkjg }}</span></el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>审核日期</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.zfshDate }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center"><span>备注</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.loanPreloanCreditApplyDetailsVo.zfshRemarks }}</span></el-form-item>
            </el-col>
          </el-row>
          <div class="title titleOne">
            <div>申诉</div>
            <el-button type="primary" size="mini" @click="handleSales">销售订单查看</el-button>
          </div>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">申诉原因</div>
              <el-form-item><span class="addinputInfo">{{ formobj.appealReason }}</span></el-form-item>
            </el-col>
          </el-row>
          <div class="title titleOne">
            <div>担保人</div>
          </div>
          <el-table :key="ensureKey" :data="formobj.loanCreditAppealPeos" :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="180">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="身份证号码" align="center" width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.idCard }}</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.remarks }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="title">资方证明</div>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-image v-for="(item, index) in formobj.ssImages" :key="index" :src="item" :preview-src-list="formobj.ssImages"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <salesOrder v-show="viewState == 2" ref="divSales" @doback="resetState"/>
    <!-- 身份证 -->
    <el-dialog :visible.sync="dialogVisible">
      <el-image v-for="(item, index) in list" :key="index" :src="item" :preview-src-list="list"/>
    </el-dialog>
  </div>
</template>

<script>
import req from '@/api/creditauditappeal/creditauditappeal'
import salesOrder from '@/components/publicPage/salesOrder'

export default {
  name: 'CreditAuditAppealInfo',
  components: {
    salesOrder
  },
  data() {
    return {
      viewTitle: '',
      viewState: 1,
      dialogVisible: false,
      list: [],
      image_list1: [],
      submitdisabled: false,
      tableKey: 0,
      ensureKey: 1,
      index: 0,
      formobj: {
        appealReason: '',
        applyDeptName: '',
        applyDeptSid: '',
        billNo: '',
        createByName: '',
        createBySid: '',
        creditApplySid: '',
        loanCreditAppealPeos: [],
        loanPreloanCreditApplyDetailsVo: {
          applyDeptName: '',
          applyDeptSid: '',
          capitalBalance: '',
          capitalName: '',
          capitalSid: '',
          comFkFiles: [],
          createByName: '',
          createBySid: '',
          custName: '',
          custSid: '',
          custTypeKey: '',
          custTypeValue: '',
          gsQueryResults: [],
          gsfkjg: '',
          gsfkjgKey: '',
          gsshDate: '',
          gsshRemarks: '',
          idCard: '',
          idCardImages: [],
          loanPreloanCreditPeos: [],
          modelName: '',
          modelSid: '',
          orgSidPath: '',
          phone: '',
          qyName: '',
          qySid: '',
          sid: '',
          ssjg: '',
          type: '',
          useOrgName: '',
          useOrgSid: '',
          zfQueryResults: [],
          zffkjg: '',
          zffkjgKey: '',
          zfshDate: '',
          zfshRemarks: ''
        },
        orgSidPath: '',
        sid: '',
        procDefId: '',
        procInstSid: '',
        saleOrderSid: '',
        ssImages: [],
        useOrgName: '',
        useOrgSid: ''
      },
      rules: {}
    }
  },
  methods: {
    showInfo(row) {
      this.viewTitle = '贷前信用审核申诉详情'
      req.fetchBySid(row.sid).then((res) => {
        if (res.success) {
          this.formobj = res.data
        }
      })
    },
    handleLook(row) {
      this.dialogVisible = true
      this.list = row
    },
    handleSales() {
      if (this.formobj.saleOrderSid !== '' && this.formobj.saleOrderSid !== null) {
        this.viewState = 2
        this.$refs['divSales'].showInfo(this.formobj.saleOrderSid)
      } else {
        this.$message({ showClose: true, type: 'error', message: '无销售订单' })
      }
    },
    resetState() {
      this.viewState = 1
    },
    handleReturn() {
      this.formobj = {
        appealReason: '',
        applyDeptName: '',
        applyDeptSid: '',
        billNo: '',
        createByName: '',
        createBySid: '',
        creditApplySid: '',
        loanCreditAppealPeos: [],
        loanPreloanCreditApplyDetailsVo: {
          applyDeptName: '',
          applyDeptSid: '',
          capitalBalance: '',
          capitalName: '',
          capitalSid: '',
          comFkFiles: [],
          createByName: '',
          createBySid: '',
          custName: '',
          custSid: '',
          custTypeKey: '',
          custTypeValue: '',
          gsQueryResults: [],
          gsfkjg: '',
          gsfkjgKey: '',
          gsshDate: '',
          gsshRemarks: '',
          idCard: '',
          idCardImages: [],
          loanPreloanCreditPeos: [],
          modelName: '',
          modelSid: '',
          orgSidPath: '',
          phone: '',
          qyName: '',
          qySid: '',
          sid: '',
          ssjg: '',
          type: '',
          useOrgName: '',
          useOrgSid: '',
          zfQueryResults: [],
          zffkjg: '',
          zffkjgKey: '',
          zfshDate: '',
          zfshRemarks: ''
        },
        orgSidPath: '',
        sid: '',
        procDefId: '',
        procInstSid: '',
        saleOrderSid: '',
        ssImages: [],
        useOrgName: '',
        useOrgSid: ''
      }
      this.list = []
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 130px !important;
}
.addinputInfo {
  margin-left: 120px !important;
}
.titleOne {
  padding: 7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
