<template>
	<div>
		<el-form :model="form" label-width="90px" label-position="right" inline ref="ruleFormRef" :rules="rules">
			<el-row>
				<el-col :span="12">
					<el-card :body-style="cardBodyStyle" style="height:100%">
						<span>付款申请</span>
						<el-divider></el-divider>
						<el-row>
							<el-col :span="12">
								<el-form-item label="申请单号">
									<el-input v-model="form.reqNo" clearable style="width: 200px" disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="申请金额">
									<el-input v-model="form.payAmount" clearable style="width: 200px"
										disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="公司名称">
									<el-input v-model="form.compNm" clearable style="width: 200px" disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="部门名称">
									<el-input v-model="form.addDeptName" clearable style="width: 200px"
										disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="申请人">
									<el-input v-model="form.addName" clearable style="width: 200px" disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="备注">
									<el-input type="textarea" v-model="form.remark" clearable style="width: 524px"
										readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-card>
				</el-col>

				<el-col :span="12">
					<el-card :body-style="cardBodyStyle" style="height:100%">
						<span>账号信息</span>
						<el-divider></el-divider>
						<el-row>
							<el-col :span="12">
								<el-form-item label="单位编码">
									<el-input v-model="form.tradePartnerCode" clearable style="width: 200px"
										disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="收款单位">
									<el-input v-model="form.tradePartnerName" clearable style="width: 200px" readonly>
										<template #append>
											<el-button :icon="Search" @click="handleSearchTradePartner" disabled />
										</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="收款账号">
									<el-input v-model="form.accountNo" clearable style="width: 200px"
										onkeyup="value=value.replace(/(^\s*)|(\s*$)/g, '')" disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="开户联行号">
									<el-input v-model="form.bankNo" clearable style="width: 200px" disabled>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="开户行">
									<el-input v-model="form.bankNm" clearable style="width: 200px" disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="省">
									<el-select v-model="form.payProv" placeholder="请选择" style="width: 200px;" disabled>
										<el-option v-for="item in dicList.PROVINCE_CODE" :key="item.dicCode"
											:label="item.dicName" :value="item.dicCode" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="市">
									<el-select v-model="form.payCity" placeholder="请选择" style="width: 200px;" disabled>
										<el-option v-for="item in dicList.CITY_CODE" :key="item.dicCode"
											:label="item.dicName" :value="item.dicCode" />
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</el-form>

		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableDataLine" border highlight-current-row>
				<el-table-column type="index" label="序号" align="center" width="60" fixed>
					<template #default="scope">
						<span>{{ scope.$index + (currentPageLine - 1) * pageSizeLine + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="reqLn" label="申请单行号" min-width="200" header-align="center"
					align="center" show-overflow-tooltip fixed>
				</el-table-column>
				<el-table-column v-if="true" prop="reqDate" label="申请支付日期" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="accountNo" label="结算单号" min-width="200" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="invoiceNo" label="发票编号" min-width="200" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="purContrCd" label="采购合同" min-width="200" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="amount" label="合同额" min-width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="payedAmount" label="已付金额" min-width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="reqAmount" label="本次申请金额" min-width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="reqTy" label="申请类型" min-width="100" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="payMth" label="付款方式" width="120" header-align="center" align="center"
					show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="reqSts" label="申请状态" min-width="100" header-align="center"
					align="center" show-overflow-tooltip :formatter="formatter">
				</el-table-column>
				<el-table-column v-if="true" prop="refundAmount" label="退款金额" min-width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
			</el-table>
		</el-card>

		<el-card :body-style="cardBodyStyle">
			<el-pagination :current-page="currentPageLine" :page-size="pageSizeLine" :page-sizes="pageSizesLine"
				:total="totalRowsLine" background="background" layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChangeLine" @current-change="handleCurrentChangeLine">
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup>

import {
	ref,
	reactive,
	onMounted,
	onActivated,
	getCurrentInstance,
	nextTick
} from 'vue'
import { Search } from '@element-plus/icons-vue'

const {
	proxy
} = getCurrentInstance()

import style from '@/tools/style'
const cardBodyStyle = ref(style.card)

import {
	useWorkflowStore
} from "@/stores/workflow"


const workflow = useWorkflowStore()

onMounted(() => {
	getDicList()
	getTableData()
})

onActivated(() => {
	getTableData()
})

/**
 *  查询字典
 */
const dicList = ref({
	COM_PAY_MTH: [],
	PUR_PAY_TYPE: [],
	PROVINCE_CODE: [],
	PUR_PAY_STS: [],
})
const getDicList = () => {
	var url = 'framework/Common/querySelectorList'
	var param = {
		type: JSON.stringify(['COM_PAY_MTH', 'PUR_PAY_TYPE', 'PROVINCE_CODE', 'PUR_PAY_STS'])
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			dicList.value = response.data.data
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}
const formatter = (row, column, cellValue, index) => {
	if (!cellValue || cellValue == null || cellValue == '') {
		return cellValue
	}
	switch (column.property) {
		case 'reqTy':
			cellValue = dicList.value.PUR_PAY_TYPE.find(item => item.dicCode == cellValue)?.dicName
			break
		case 'payMth':
			cellValue = dicList.value.COM_PAY_MTH.find(item => item.dicCode == cellValue)?.dicName
			break	
		case 'reqSts':
			cellValue = dicList.value.PUR_PAY_STS.find(item => item.dicCode == cellValue)?.dicName
			break
	}

	return cellValue
}
/**
 *  查询字典
 */


const form = ref({
	id: '',
	compCd: '',
	compNm: '',
	reqNo: '',
	reqPayDate: '',
	reqDate: '',
	reqSts: '',
	payMth: '',
	payAmount: '',
	paySts: '',
	actPayDate: '',
	actPayAmount: '',
	remark: '',
	tradePartnerId: '',
	tradePartnerCode: '',
	tradePartnerName: '',
	accountNo: '',
	bankNo: '',
	bankNm: '',
	payProv: '',
	payCity: '',
	actAccountNo: '',
	actAccountNm: '',
	processInstanceId: '',
	processInstanceStatus: '',
	addId: '',
	addCode: '',
	addName: '',
	addDeptId: '',
	addDeptCode: '',
	addDeptName: '',
	addTime: '',
	modifyId: '',
	modifyCode: '',
	modifyTime: '',
	cancelId: '',
	cancelCode: '',
	cancelName: '',
})

const getTableData = () => {
	var url = 'pur/PayReqHead/queryByWorkId'
	var param = {
		workId: workflow.workId
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			form.value = response.data.data
			form.value.accountFlag = form.value.accountFlag === '0' ? '否' : '是'
			queryLine.value.reqNo = form.value.reqNo
			getTableDataLine()
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}


/**
 *   查询 —— 对账单行
 */
const queryLine = ref({
	reqNo: ''
})
const loadingLine = ref(false)
const tableDataLine = ref([])
const getTableDataLine = () => {
	loadingLine.value = true
	var url = 'pur/PayReqLine/query'
	var param = {
		page: currentPageLine.value,
		rows: pageSizeLine.value,
		params: JSON.stringify(queryLine.value)
	}
	proxy.$axios.get(url, param).then(response => {
		tableDataLine.value = response.data.data.records
		totalRowsLine.value = response.data.data.total
	})
	loadingLine.value = false
}
/**
 *   查询
 */


/**
  * 分页
  */
const currentPageLine = ref(1)
const totalRowsLine = ref(0)
const pageSizesLine = ref([5, 10, 20, 30, 40])
const pageSizeLine = ref(5)
const handleSizeChangeLine = (val) => {
	pageSizeLine.value = val
	getTableDataLine()
}
const handleCurrentChangeLine = (val) => {
	currentPageLine.value = val
	getTableDataLine()
}
/**
  * 分页
  */
</script>

<style></style>