<!-- 合同付款 -->
<template>
	<div class="container-wrap">
		<div class="bar-wrap">
			<div class="bar-title">
				<span style="font-size: 14px; font-weight: bold">付费统计</span>
				<span
					style="cursor: pointer"
					@click="$router.push('pay_history')"
					>查看历史付款记录>></span
				>
			</div>
			<div class="bar">
				<div class="item">
					<div class="left">
						{{
							$dayjs(
								titleData.curMonthPay.firDateTime || new Date()
							).format('YYYY-MM')
						}}
						<p>应付</p>
					</div>
					<div
						class="center"
						:class="tabIndex === 0 ? 'active' : ''"
						@click="dateClick(titleData.curMonthPay.firDateTime, 0)"
					>
						<p>
							{{
								new Date(
									titleData.curMonthPay.firDateTime
								).getDate() || 0
							}}日
						</p>
						<p class="number">
							{{
								(
									titleData.curMonthPay.firAmount +
									titleData.curMonthPay.firPayAmount
								).toFixed(2) || 0
							}}元
						</p>
						<p>
							已付<span class="red">{{
								titleData.curMonthPay.firPayAmount || 0
							}}</span
							>元
						</p>
					</div>
					<div
						class="center"
						:class="tabIndex === 1 ? 'active' : ''"
						@click="dateClick(titleData.curMonthPay.secDateTime, 1)"
					>
						<p>
							{{
								new Date(
									titleData.curMonthPay.secDateTime
								).getDate() || 0
							}}日
						</p>
						<p class="number">
							{{
								(
									titleData.curMonthPay.secAmount +
									titleData.curMonthPay.secPayAmount
								).toFixed(2) || 0
							}}元
						</p>
						<p>
							已付<span class="red">{{
								titleData.curMonthPay.secPayAmount || 0
							}}</span
							>元
						</p>
					</div>
				</div>
				<div class="item">
					<div class="left">
						{{
							$dayjs(
								titleData.nextMonthPay.firDateTime || new Date()
							).format('YYYY-MM')
						}}
						<p>应付</p>
					</div>
					<div
						class="center"
						:class="tabIndex === 2 ? 'active' : ''"
						@click="
							dateClick(titleData.nextMonthPay.firDateTime, 2)
						"
					>
						<p>
							{{
								new Date(
									titleData.nextMonthPay.firDateTime
								).getDate() || 0
							}}日
						</p>
						<p class="number">
							{{ titleData.nextMonthPay.firAmount || 0 }}元
						</p>
					</div>
					<div
						class="center"
						:class="tabIndex === 3 ? 'active' : ''"
						@click="
							dateClick(titleData.nextMonthPay.secDateTime, 3)
						"
					>
						<p>
							{{
								new Date(
									titleData.nextMonthPay.secDateTime
								).getDate() || 0
							}}日
						</p>
						<p class="number">
							{{ titleData.nextMonthPay.secAmount || 0 }}元
						</p>
					</div>
				</div>
				<div class="item">
					<div class="left">
						{{
							$dayjs(
								titleData.lastMonthPay.firDateTime || new Date()
							).format('YYYY-MM')
						}}
						<p>应付</p>
					</div>
					<div
						class="center"
						:class="tabIndex === 4 ? 'active' : ''"
						@click="
							dateClick(titleData.lastMonthPay.firDateTime, 4)
						"
					>
						<p>
							{{
								new Date(
									titleData.lastMonthPay.firDateTime
								).getDate() || 0
							}}日
						</p>
						<p class="number">
							{{ titleData.lastMonthPay.firAmount || 0 }}元
						</p>
					</div>
					<div
						class="center"
						:class="tabIndex === 5 ? 'active' : ''"
						@click="
							dateClick(titleData.lastMonthPay.secDateTime, 5)
						"
					>
						<p>
							{{
								new Date(
									titleData.lastMonthPay.secDateTime
								).getDate() || 0
							}}日
						</p>
						<p class="number">
							{{ titleData.lastMonthPay.secAmount || 0 }}元
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<!-- 检索 -->
			<div class="table-filter" @keyup.enter="search">
				<div class="filter-item">
					<RadioGroup
						v-model="payBillStatus"
						@on-change="statusChange"
					>
						<Radio :label="0">
							<span>
								全部
								<span class="red">({{ data.totalCount }})</span>
							</span>
						</Radio>
						<Radio :label="1">
							<span>
								可发起
								<span class="red"
									>({{ data.unApprovalCount }})</span
								>
							</span>
						</Radio>
						<Radio :label="2">
							<span>
								待补齐
								<span class="red"
									>({{ data.unCompleteCount }})</span
								>
							</span>
						</Radio>
					</RadioGroup>
				</div>
				<div class="filter-item">
					<Input
						v-model="keyWord"
						placeholder="请输入关键字"
						clearable
					/>
				</div>
				<div class="filter-item">
					<Button type="primary" style="width: 90px" @click="search"
						>查询</Button
					>
				</div>
				<div class="filter-item">
					<Button
						type="primary"
						style="width: 90px"
						@click="exportExcel"
						>导出Excel</Button
					>
				</div>
				<div class="filter-item">
					<Button type="primary" style="width: 90px" @click="toBill"
						>查看账单</Button
					>
				</div>
				<div class="filter-item" style="float: right">
					<Button type="error" @click="toDetail"
						>审批本周期付款申请</Button
					>
				</div>
				<!--      <div class="filter-item" style="float: right;margin-right: 0">-->
				<!--        <Button type="primary" style="width: 90px;">打印详情</Button>-->
				<!--      </div>-->
			</div>
			<!-- 表格 -->
			<div class="table-content">
				<div class="list">
					<div
						class="item"
						v-for="(item, index) in data.payBillItems"
						:key="index"
					>
						<div class="item-left">
							<div class="row">
								<div class="col">
									<div class="label">合同编码：</div>
									<div class="value">
										{{ item.purchaseBillNo }}
									</div>
								</div>
								<div class="col">
									<div class="label">供应商：</div>
									<div class="value">
										{{ item.supplierName }}
									</div>
								</div>
								<div class="col">
									<div class="label">付款期限：</div>
									<div class="value">
										{{ item.payTimeLimit }}
									</div>
								</div>
								<div class="col" style="flex: 1">
									<div class="label">实收发票：</div>
									<div class="value">
										{{ item.invoiceAmount }}元
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col">
									<div class="label">物料名称：</div>
									<div class="value">
										{{ item.materialName }}
									</div>
								</div>
								<div class="col">
									<div class="label">规格：</div>
									<div class="value">{{ item.spec }}</div>
								</div>
								<div class="col">
									<div class="label">采购数量：</div>
									<div class="value">
										{{ item.purchaseQty }}
									</div>
								</div>
								<div class="col" style="flex: 1">
									<div class="label">单价：</div>
									<div class="value">{{ item.price }}</div>
								</div>
							</div>
							<div class="row">
								<div class="col">
									<div class="label">合同金额：</div>
									<div class="value">
										{{ item.contractAmount }}元
									</div>
								</div>
								<div class="col">
									<div class="label">质检金额：</div>
									<div class="value">
										{{ item.qtyCheckAmount }}元
									</div>
								</div>
								<div class="col">
									<div class="label">已付金额：</div>
									<div class="value">
										{{ item.hadPayAmount }}元
									</div>
								</div>
								<div class="col" style="flex: 1">
									<div class="label">未付金额：</div>
									<div class="value">
										<span>{{ item.unPayAmount }}</span
										>元
									</div>
								</div>
							</div>
						</div>
						<div class="item-right">
							<div class="forms">
								<div class="row">
									<div class="col">
										<span
											class="text"
											@click="showForm(0, item)"
											>申购单</span
										>
										<Icon
											type="md-checkmark"
											color="#07C909"
											size="20"
										/>
									</div>
									<div class="col">
										<span
											class="text"
											@click="showForm(1, item)"
											>入库单</span
										>
										<Icon
											v-if="item.hasInStock"
											type="md-checkmark"
											color="#07C909"
											size="20"
										/>
										<Icon
											v-else
											type="md-close"
											color="red"
											size="20"
										/>
									</div>
									<div class="col">
										<span
											class="text"
											@click="showForm(2, item)"
											>质检单</span
										>
										<Icon
											v-if="item.hasQtyCheck"
											type="md-checkmark"
											color="#07C909"
											size="20"
										/>
										<Icon
											v-else
											type="md-close"
											color="red"
											size="20"
										/>
									</div>
									<div class="col">
										<span
											class="text"
											@click="showForm(3, item)"
											>合同</span
										>
										<Icon
											v-if="item.hasContractFile"
											type="md-checkmark"
											color="#07C909"
											size="20"
										/>
										<Icon
											v-else
											type="md-close"
											color="red"
											size="20"
										/>
									</div>
									<div class="col">
										<span
											class="text"
											@click="showForm(4, item)"
											>发票</span
										>
										<Icon
											v-if="item.hasGreaterCheckAmt"
											type="md-checkmark"
											color="#07C909"
											size="20"
										/>
										<Icon
											v-else
											type="md-close"
											color="red"
											size="20"
										/>
									</div>
								</div>
								<div class="row">
									<div
										class="col"
										style="
											justify-content: flex-start;
											padding: 0;
										"
									>
										<span
											class="text"
											style="
												text-decoration: none;
												cursor: auto;
											"
											>质检金额&lt;=发票金额</span
										>
										<Icon
											v-if="item.hasGreaterCheckAmt"
											type="md-checkmark"
											color="#07C909"
											size="20"
										/>
										<Icon
											v-else
											type="md-close"
											color="red"
											size="20"
										/>
									</div>
									<div
										class="col"
										v-if="
											['supervisor', 'purchase'].includes(
												access
											) &&
											item.canApplyPay === 2 &&
											item.inApprovalAmount
										"
									>
										<span
											>审批中：{{
												item.inApprovalAmount
											}}元</span
										>
									</div>
								</div>
							</div>
							<!-- 总监操作 -->
							<div
								v-if="
									['supervisor', 'purchase'].includes(access)
								"
							>
								<div class="btn" v-if="item.canApplyPay === 0">
									<Button
										type="primary"
										style="
											width: 92px;
											background-color: #62bceb;
											border: none;
										"
										@click="pass(item)"
										>发起预付款</Button
									>
								</div>
								<div class="btn" v-if="item.canApplyPay === 1">
									<Button
										type="primary"
										style="width: 92px; border: none"
										@click="pass(item)"
										>发起申请</Button
									>
								</div>
								<div class="btn" v-if="item.canApplyPay === 2">
									<Button
										type="primary"
										disabled
										style="width: 92px; border: none"
										>发起申请</Button
									>
								</div>
								<div
									class="btn"
									v-if="item.canApplyPay === 3"
									style="width: 92px"
								></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="table-page">
				<Page
					:current="params.pageIndex"
					:total="params.total"
					:page-size="params.pageSize"
					:show-total="true"
					show-elevator
					@on-change="changePage"
				/>
			</div>
		</div>
		<pass-modal
			v-model="passShow"
			:data="currentItem"
			@getlist="getList"
		></pass-modal>
		<my-form-pay
			v-model="payShow"
			type="form"
			:data="currentItem"
			:showSider="false"
		></my-form-pay>
		<store-in-form
			v-model="storeInShow"
			:data="currentItem"
		></store-in-form>
		<quality-form v-model="qualityShow" :data="qualityData"></quality-form>
		<invoice-form
			v-model="invoiceShow"
			:data="currentItem"
			@getlist="getList"
		></invoice-form>
		<contract-form
			v-model="contractShow"
			:data="currentItem"
			@getlist="getList"
		></contract-form>
		<apply-form
			v-model="applyShow"
			:data="currentItem"
			@getlist="getList"
		></apply-form>
	</div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import {
	GetPurContractPayBill,
	GetContractPayBillTotal,
	ApprovalBillFlow,
	GetApplyPurchasePageList,
	GetContractQtyCheckBill,
	AddApplyPurchasePay,
	selectDetails,
} from '@/api/applyPurchase'
import MyTable from '_c/my-table/my-table'
import MyFormPay from '_c/my-modal-pay'
import PassModal from './modals/pass-modal'
import StoreInForm from './modals/store-in-form'
import QualityForm from './modals/quality-form'
import InvoiceForm from './modals/invoice-form'
import ContractForm from './modals/contract-form'
import ApplyForm from './modals/apply-form'
import { GetInStockBill } from '@/api/stock'
import axios from 'axios'
export default {
	name: 'material_pay',
	components: {
		MyTable,
		PassModal,
		MyFormPay,
		StoreInForm,
		QualityForm,
		InvoiceForm,
		ContractForm,
		ApplyForm,
	},
	data() {
		return {
			tabIndex: '',
			access: this.$store.state.user.access,
			applyShow: false,
			contractShow: false,
			invoiceShow: false,
			qualityShow: false,
			storeInShow: false,
			payShow: false, // 申购单
			passShow: false, // 驳回
			currentItem: {},
			payBillStatus: 0,
			keyWord: '',
			formData: {},
			qualityData: [],
			data: {},
			titleData: {
				curMonthPay: {
					firDateTime: '',
					firAmount: 0,
					secDateTime: '',
					secAmount: 0,
				},
				nextMonthPay: {
					firDateTime: '',
					firAmount: 0,
					secDateTime: '',
					secAmount: 0,
				},
				lastMonthPay: {
					firDateTime: '',
					firAmount: 0,
					secDateTime: '',
					secAmount: 0,
				},
			},
			params: {
				pageIndex: 1,
				pageSize: 10,
				total: 0,
			},
		}
	},
	methods: {
		dateClick(date, index) {
			if (this.tabIndex === index) {
				this.tabIndex = ''
				this.params.payTime = ''
				this.params.pageIndex = 1
			} else {
				this.tabIndex = index
				this.params.payTime = date
				this.params.pageIndex = 1
			}
			this.getList()
		},
		showForm(type, item) {
			this.currentItem = { ...item }
			switch (type) {
				// 申购单
				case 0:
					this.currentItem.id = this.currentItem.payBillId
					GetApplyPurchasePageList({
						pageIndex: 1,
						pageSize: 1,
						purBillState: 1,
						keyWord: this.currentItem.applyBillNo,
					}).then((res) => {
						if (res.code === 0) {
							this.currentItem = {
								...this.currentItem,
								...res.result.list[0],
							}
							this.payShow = true
							console.log(this.currentItem)
						}
					})
					break
				case 1:
					GetInStockBill({
						inOutStorageNo: this.currentItem.inOutStorageNo,
						applyBillNo: this.currentItem.applyBillNo,
					}).then((res) => {
						if (res.code === 0) {
							this.currentItem = {
								...this.currentItem,
								...res.result,
							}
							this.storeInShow = true
						}
					})
					break
				case 2:
					GetContractQtyCheckBill({
						purchaseBillNo: this.currentItem.purchaseBillNo,
					}).then((res) => {
						if (res.code === 0) {
							this.qualityData = res.result
							this.qualityShow = true
						}
					})
					break
				case 3:
					this.contractShow = true
					break
				case 4:
					this.invoiceShow = true
					break
			}
		},
		/* 审核 */
		pass(item) {
			// if (type === 0) {
			//   this.$MyModal.show({ text: '是否通过' }).$on('confirm', () => {
			//     this.cfm(type)
			//   })
			// } else {
			//   this.passShow = true
			// }
			AddApplyPurchasePay({
				purchaseBillNo: item.purchaseBillNo,
			}).then((res) => {
				if (res.code === 0) {
					this.currentItem = {
						...res.result,
						bankMesList: res.result.bankMesList
							.filter((data) => data.bankAccoutName)
							.map((item) => {
								return {
									bankAccout: item.bankAccout || '',
									bankAccoutName: item.bankAccoutName || '',
									openBank: item.openBank || '',
								}
							}),
						canApplyPay: item.canApplyPay,
					}
					this.applyShow = true
				}
			})
		},
		/* 审批 */
		cfm(type) {
			ApprovalBillFlow({
				linkCheckId: [this.currentItem.flowCheckId],
				updateAction: type,
				suggestions: this.remark,
			}).then((res) => {
				if (res.code === 0) {
					this.$Message.info(res.msg || '操作成功！')
					this.currentItem = {}
					this.getList()
				}
			})
		},
		/* 查看账单 */
		toBill() {
			this.$router.push('material_bill')
		},
		/* 跳转订单详情 */
		toDetail(date, type) {
			// this.$router.push({
			//   name: 'material_pay_detail',
			//   query: {
			//     payDateTime: date,
			//     type
			//   }
			// })
			this.$router.push({
				name: 'material_pay_detail',
			})
		},
		statusChange() {
			this.params.pageIndex = 1
			this.keyWord = ''
			this.getList()
		},
		changePage(pageIndex) {
			this.params.pageIndex = pageIndex
			this.getList()
		},
		search() {
			this.params.pageIndex = 1
			this.getList()
		},
		exportExcel() {
			GetPurContractPayBill({
				...this.params,
				keyWord: this.keyWord,
				payBillStatus: this.payBillStatus,
				pageIndex: 1,
				pageSize: 99999,
			}).then((res) => {
				if (res.code === 0) {
					
					axios.post('http://120.79.80.64:8055/javaApi/selectDetails',{beginTime:this.params.payTime})
						.then((res2) => {
							
							for (
								let i = 0;
								i < res.result.payBillItems.length;
								i++
							) {
								const element = res.result.payBillItems[i]
								for (let j = 0; j < res2.data.result.length; j++) {
									
									const jelement = res2.data.result[j]
									if (
										element.purchaseBillNo ==
										jelement.fromBillNo
									) {
										element.completeStockTime =
											jelement.completeStockTime
										element.amount = jelement.amount
										element.payAmount = jelement.payAmount
										element.accountDate = jelement.accountDate
										
									}
								}
							}
							console.log(res.result.payBillItems)
							let columns = [
								{ title: '合同编码', key: 'purchaseBillNo' },
								{ title: '供应商', key: 'supplierName' },
								{ title: '付款期限', key: 'payTimeLimit' },
								{ title: '单价', key: 'price' },
								{ title: '物料名称', key: 'materialName' },
								{ title: '规格', key: 'spec' },
								{ title: '采购数量', key: 'purchaseQty' },
								{ title: '合同金额', key: 'contractAmount' },
								{ title: '质检金额', key: 'qtyCheckAmount' },
								{ title: '已付金额', key: 'hadPayAmount' },
								{ title: '实收发票', key: 'invoiceAmount' },
								{ title: '未付金额', key: 'unPayAmount' },
								{
									title: '完成到货时间',
									key: 'completeStockTime',
								},
								{ title: '退货冲抵', key: 'amount' },
								{ title: '代付冲抵', key: 'payAmount' },
								{ title: '本月已付', key: 'pays' },
								{ title: '账期', key: 'accountDate' },
							]
							let data = res.result.payBillItems
							exportExcel(columns, data, '合同付款')
						})

					return
					// for (let i = 0; i < array.length; i++) {
					//   const element = array[i];

					// }
				}
			})
		},
		getList() {
			GetPurContractPayBill({
				...this.params,
				keyWord: this.keyWord,
				payBillStatus: this.payBillStatus,
			}).then((res) => {
				if (res.code === 0) {
					this.data = res.result
					this.params.total = res.result.pageCount
				}
			})
		},
		/* 获取顶部信息 */
		getContractPayTotal() {
			GetContractPayBillTotal().then((res) => {
				if (res.code === 0) {
					this.titleData = res.result
				}
			})
		},
	},
	mounted() {
		this.getList()
		this.getContractPayTotal()
	},
}
</script>

<style lang="less" scoped>
.container-wrap {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.bar-wrap {
		margin-bottom: 10px;
		background: #ffffff;
		border-radius: 3px;
		.bar-title {
			padding: 5px 10px;
			border-radius: 3px 3px 0 0;
			background: #dcdee2;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.bar {
			padding: 10px 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.item {
				flex: 1;
				margin-right: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 5px;
				background-color: #ffffff;
				.left,
				.center,
				.right {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					text-align: center;
					border: 1px solid #e6e6e6;
					margin-right: -1px;
					&.active {
						border: 1px solid #3f92f9;
						margin-right: 0;
					}
					.number {
						margin: 5px 0;
						font-size: 16px;
						font-weight: bold;
						color: #3f92f9;
						white-space: nowrap;
					}
					.red {
						color: #db0020;
					}
				}
				.left {
					flex: 4;
					font-size: 16px;
					font-weight: bold;
				}
				.center {
					flex: 5;
					padding: 10px 0;
					cursor: pointer;
				}
				.right {
					flex: 5;
					cursor: pointer;
				}
			}
		}
	}
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.table-filter {
			padding-bottom: 10px;
			height: 42px;
			line-height: 32px;
			overflow: hidden;
			.filter-item {
				margin-right: 10px;
				float: left;
				//&:last-child {
				//  margin-right: 0;
				//}
			}
		}
		.table-content {
			flex: 1;
			overflow: hidden;
			.row {
				margin-bottom: 5px;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				&:last-child {
					margin-bottom: 0;
				}
				.col {
					padding: 0 5px;
					flex: 2;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					.value {
						flex: 1;
						overflow: hidden;
						word-break: break-all;
					}
				}
			}
			.list {
				height: 100%;
				overflow: auto;
				.item {
					margin-bottom: 10px;
					padding: 10px;
					border: 1px solid #d7d7d7;
					border-radius: 5px;
					background: #ffffff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&:last-child {
						margin-bottom: 0;
					}
					.item-left {
						padding: 0 10px;
						flex: 1;
						border-right: 1px solid #333333;
					}
					.item-right {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.forms {
							padding: 0 10px;
							.col {
								align-items: center;
								margin-right: 10px;
								justify-content: flex-end;
								&:last-child {
									margin-right: 0;
								}
								.text {
									text-decoration: underline;
									cursor: pointer;
									white-space: nowrap;
								}
							}
						}
						.btn {
							display: flex;
							flex-direction: column;
						}
					}
				}
			}
		}
		.table-page {
			position: relative;
			padding-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 43px;
			overflow: hidden;
			.tabs {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				.tab {
					padding: 5px 0;
					width: 100px;
					border-radius: 5px;
					text-align: center;
					background-color: #ffffff;
					cursor: pointer;
					&.active {
						color: #ffffff;
						background-color: #3f92f9e5;
					}
				}
			}
		}
	}
	.red {
		color: red;
	}
}
</style>
