<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{ viewTitle }}</div>
      <div>
        <el-button v-show="viewState == 2" type="primary" size="small" @click="handAffirm()">确认</el-button>
        <el-button v-show="viewState == 2" type="primary" size="small" @click="handReject()">驳回</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <div class="wlInfo"><span>收款确认申请</span></div>
      <el-form ref="form_obj" :model="formobj" :rules="rules" label-position="top" label-width="300px" class="formadd">
        <el-row>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>收款日期</span></el-form-item>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              {{ formobj.collectionDate }}
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>收款银行</span></el-form-item>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              {{ formobj.collectionBank }}
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>收款银行账号</span></el-form-item>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              {{ formobj.collectionBankNum }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>收款方式</span></el-form-item>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              {{ formobj.collectionTypeValue }}
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>付款方名称</span></el-form-item>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              {{ formobj.payerName }}
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>收款金额</span></el-form-item>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              {{ formobj.collectionMoney }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>备注</span></el-form-item>
          </el-col>
          <el-col :span="20" class="trightb">
            <el-form-item>
              {{ formobj.remarks }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>打款凭证</span></el-form-item>
          </el-col>
          <el-col :span="20" class="trightb">
            <el-form-item>
              <span v-for="(item, index) in list1" :key="index">
                <el-link :underline="false" :href="item.path" target="_blank">{{ item.name }}</el-link>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <el-form-item><span>汇款确认书</span></el-form-item>
          </el-col>
          <el-col :span="20" class="trightb">
            <el-form-item>
              <span v-for="(item, index) in list2" :key="index">
                <el-link :underline="false" :href="item.path" target="_blank">{{ item.name }}</el-link>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="tleftb">
            <el-form-item><span>收款金额</span></el-form-item>
          </el-col>
          <el-col :span="6" class="trightb">
            <el-form-item>
              {{ formobj.collectionMoney }}
            </el-form-item>
          </el-col>
          <el-col :span="6" class="tleftb">
            <el-form-item><span>余额</span></el-form-item>
          </el-col>
          <el-col :span="6" class="trightb">
            <el-form-item>
              {{ formobj.balance }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table border :key="selectedreceivableKey" style="width: 100%" :data="formobj.finSelectedReceivablesDetaileds">
        <el-table-column label="合同编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.contractNo }}
          </template>
        </el-table-column>
        <el-table-column label="车架号" align="center">
          <template slot-scope="scope">
            {{ scope.row.VIN }}
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.customerName }}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center">
          <template slot-scope="scope">
            {{ scope.row.customerPhone }}
          </template>
        </el-table-column>
        <el-table-column label="应收项目名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.receivablesName }}
          </template>
        </el-table-column>
        <el-table-column label="当前应收金额" align="center">
          <template slot-scope="scope">
            {{ scope.row.currentReceivableMoney }}
          </template>
        </el-table-column>
        <el-table-column label="认款金额" align="center">
          <template slot-scope="scope">
            {{ scope.row.subscriptionMoney }}
          </template>
        </el-table-column>
        <el-table-column label="认款申请日期" align="center">
          <template slot-scope="scope">
            {{ scope.row.subscriptionDate }}
          </template>
        </el-table-column>
<!--        <el-table-column label="状态" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.auditState == 1 ? '待审核' : scope.row.auditState == 2 ? '已驳回' : scope.row.auditState == 3 ? '已审核' : '其他' }}-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
import { fetchDetailBySid, cashierConfirm, cashierReject } from '@/api/anruifinmanagement/paymentConfirmation.js'

export default {
  name: 'cashierConfitmationInfo',
  data() {
    return {
      sid: '',
      viewTitle: '',
      viewState: '',
      selectedreceivableKey: 0,
      formobj: {},
      list1: [],
      list2: [],
      rules: {}
    }
  },
  methods: {
    showInfo(row, viewState) {
      this.viewState = viewState
      this.sid = row.sid
      this.viewTitle = '认款详情'
      fetchDetailBySid(row.sid).then(resp => {
        if (resp.code === '200') {
          this.formobj = resp.data
          if (this.formobj.paymentVoucherAppendixs.length > 0) {
            this.formobj.paymentVoucherAppendixs.forEach((e) => {
              this.list1.push({
                name: e.fileName,
                path: e.filePath
              })
            })
          }
          if (this.formobj.remittanceConfirmationAppendixs.length > 0) {
            this.formobj.remittanceConfirmationAppendixs.forEach((e) => {
              this.list2.push({
                name: e.fileName,
                path: e.filePath
              })
            })
          }
        }
      }).catch(e => {
        this.formobj = row
      })
    },
    handAffirm() {
      cashierConfirm({ sid: this.sid }).then((res) => {
        if (res.code === '200') {
          this.$message({
            showClose: true,
            message: '确认成功',
            type: 'success'
            }
          )
          this.handleReturn('true')
        }
      })
    },
    handReject() {
      cashierReject({ sid: this.sid }).then((res) => {
        if (res.code === '200') {
          this.message({ showClose: true, message: '已驳回', type: 'success' }
          )
        }
      })
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj = {}
      this.list1 = []
      this.list2 = []
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.wlInfo {
  padding-top: 20px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tleftb {
  text-align: right;
}
.listadd {
  width: 100%;
  height: calc(100vh - 0px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
