<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{ viewTitle }}</div>
      <div>
        <el-button v-show="viewState == 2" type="primary" size="small" :disabled="submitdisabled" @click="handAffirm()">确认</el-button>
        <el-button v-show="viewState == 2" type="primary" size="small" :disabled="submitdisabled" @click="handReject()">驳回</el-button>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <div class="titwu"><span>收款确认申请</span></div>
      <el-form ref="form_obj" :model="formobj" :rules="rules" label-position="top" class="formadd">
        <el-row style="border-left: 0">
          <el-col :span="24" class="tleftb" style="border-right: 0">
            <el-form-item>
              <span>收款单号:{{ receiptNumber }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <span>申请部门</span>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <span>{{ formobj.createDept }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span>申请人</span>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <span>{{ formobj.createByName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span>申请日期</span>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <span>{{ formobj.createDate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <span>收款方式</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span>{{ formobj.collectionTypeValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span>收款金额(元)</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span>{{ formobj.collectionMoney }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span>收款日期</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span>{{ formobj.collectionDate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="formobj.collectionTypeKey === '03'">
          <el-col :span="4" class="tleftb balanceStyle">
            <span>收款银行账号</span>
          </el-col>
          <el-col :span="4" class="tlineheightb">
            <el-form-item>
              <span>{{ formobj.collectionBankNum }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb balanceStyle">
            <span>收款银行名称</span>
          </el-col>
          <el-col :span="4" class="tlineheightb">
            <el-form-item>
              <span>{{ formobj.receivingName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb balanceStyle">
            <span>收款银行</span>
          </el-col>
          <el-col :span="4" class="tlineheightb">
            <el-form-item>
              <span>{{ formobj.collectionBank }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <span>付款方名称</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span>{{ formobj.payerName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span v-show="formobj.collectionTypeKey === '03'">付款账号后4位</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span v-show="formobj.collectionTypeKey === '03'">{{ formobj.payAccount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span v-show="formobj.collectionTypeKey === '03'">付款银行</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span v-show="formobj.collectionTypeKey === '03'">{{ formobj.payBank }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">
            <span>备注</span>
          </el-col>
          <el-col :span="12" class="trightb">
            <el-form-item>
              <span>{{ formobj.remarks }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="tleftb">
            <span>采购系统</span>
          </el-col>
          <el-col :span="4" class="trightb">
            <el-form-item>
              <span>{{ formobj.purchaseSystemName }}</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 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-row v-show="formobj.reason !== ''">
          <el-col :span="6" class="tleftb">
            <el-form-item><span>审核状态</span></el-form-item>
          </el-col>
          <el-col :span="18" class="trightb">
            <el-form-item>
              <span>{{ formobj.reason }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <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.payType }}
            </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>
      </el-form>
    </div>
    <el-dialog center :visible.sync="dialogVisible" width="50%">
      <el-form ref="form_obj" class="formadd">
        <el-row style="border-top: 1px solid #E0E3EB">
          <el-col :span="4" class="tleftb">
            <span>意见</span>
          </el-col>
          <el-col :span="20">
            <el-form-item><el-input v-model="reason" clearable placeholder="" type="textarea" :autosize="{ minRows: 2, maxRows: 20}" resize="none"/></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  name: 'cashierConfitmationInfo',
  data() {
    return {
      sid: '',
      viewTitle: '',
      viewState: '',
      dialogVisible: false,
      submitdisabled: false,
      reason: '', // 驳回原因
      selectedreceivableKey: 0,
      receiptNumber: '',
      formobj: {},
      list1: [],
      list2: [],
      rules: {}
    }
  },
  methods: {
    showInfo(row, viewState) {
      this.viewState = viewState
      this.sid = row.sid
      this.receiptNumber = row.billNo
      this.viewTitle = '认款详情'
      fetchDetailBySid(row.sid).then(resp => {
        if (resp.success) {
          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() {
      this.submitdisabled = true
      cashierConfirm({ sid: this.sid, userSid: window.sessionStorage.getItem('userSid') }).then((res) => {
        if (res.success) {
          this.$message({ showClose: true, message: '确认成功', type: 'success' })
          this.handleReturn('true')
        } else {
          this.submitdisabled = false
        }
      }).catch(() => {
        this.submitdisabled = false
      })
    },
    handReject() {
      this.dialogVisible = true
    },
    handleConfirm() {
      this.submitdisabled = true
      cashierReject({ sid: this.sid, reason: this.reason, userSid: window.sessionStorage.getItem('userSid') }).then((res) => {
        if (res.success) {
          this.$message({ showClose: true, message: '已驳回', type: 'success' })
          this.handleReturn('true')
        } else {
          this.submitdisabled = false
        }
      }).catch(() => {
        this.submitdisabled = false
      })
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj = {}
      this.list1 = []
      this.list2 = []
      this.receiptNumber = ''
      this.reason = ''
      this.dialogVisible = false
      this.submitdisabled = false
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.titwu {
  padding-bottom: 0;
}
</style>
