<!-- 供应商出货确认 -->
<template>
	<modal v-model="modal" :footer-hide="true" width="600px">
		<!--  表单主要内容  -->
		<div class="content">
			<div class="title">补出库审批</div>
			<div class="sub-title border">
				<span>申请信息</span>
			</div>
			<div class="row">
				<div class="col">
					<div class="label">申请部门：</div>
					<div class="value">{{ data.purchaseBillNo }}</div>
				</div>
				<div class="col">
					<div class="label">申请人：</div>
					<div class="value">{{ data.supplierName }}</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="label">申请时间：</div>
					<div class="value">{{ data.materialCode }}</div>
				</div>
			</div>
			<div class="sub-title border">
				<span>补出库信息</span>
			</div>
			<ul>
				<li v-for="(i,index) in listData" :key="index">
					<div>物料编码：{{i.materialCode}}</div>
					<div>物料名称：{{i.materialName}}</div>
					<div>出库时间：{{i.createTime}}</div>
					<div>数量：<span style="color: red">{{i.changeNum}}</span></div>
					<div>补出库原因：{{i.remark}}</div>
					<div>接收人员：{{i.realName}}</div>
				</li>
			</ul>
            <div style="text-align:center">
                <Button style="width:200px" @click="handleFlow">审批流程</Button>
            </div>
            
		</div>
	</modal>
</template>
  
  <script>
import { ApprovalBillFlow } from '@/api/applyPurchase'

import { filePreview } from '@/libs/util'
import axios from 'axios'
export default {
	name: 'contract-form',
	data() {
		return {
			tabIndex: 0,
			formData: {},
			remark: '',
			modal: false,
			flowsList: [],
			infoData: {},
            listData:[],
		}
	},
	components: {},
	props: {
		data: {
			type: Object,
			default() {
				return {}
			},
		},
		value: {
			type: Boolean,
			default: false,
			require: true,
		},
	},
	watch: {
		value: {
			handler(n) {
                console.log(this.data)
				this.modal = n
			},
			immediate: true,
		},
		modal(n) {
			this.$emit('input', n)
			if (n) {
				axios
                    .post('/cloudApi/materialReceive/flowDetails', {
                        flowLinkId: this.data.linkId,
                    })
                    .then(res => {
                        console.log(res)
                        this.listData = res.data.data
                    })
			}
		},
	},
	methods: {
        handleFlow(){
            const v = this
            axios
                .post('/cloudApi/materialReceive/handleFlow', {
                    checkUserId:JSON.parse(window.localStorage.getItem('userInfo')).id,
                    flowLinkId: this.data.linkId,
                    checkState:2,
                    suggestions:'',
                })
                .then(res => {
                    this.$Message.info('操作成功！')
                    this.modal = false
                    this.$emit('getlist')
                })
            
        },
		openPic(url) {
			filePreview(url)
		},
		cfm(type) {
			ApprovalBillFlow({
				linkCheckId: [this.data.flowChekId],
				updateAction: type,
				suggestions: this.remark,
				adjustNum: this.data.adjustNum,
			}).then((res) => {
				if (res.code === 0) {
					this.cancel()
					this.$Message.info(res.msg || '操作成功！')
					this.$emit('getlist')
				}
			})
		},
		cancel() {
			this.remark = ''
			this.modal = false
		},
	},
}
</script>
  
  <style lang="less" scoped>
ul {
	padding: 0 20px;
	li {
		list-style: none;
		border: 1px solid #ccc;
		overflow: hidden;
		padding: 0 20px;
		div {
			width: 50%;
			float: left;
			line-height: 34px;
		}
	}
}
.content {
	padding: 10px 0;
	border-radius: 5px;
	background-color: #ffffff;
	&.sub-content {
		background-color: #f2f2f2;
		margin-top: 3px;
		.title {
			padding-top: 0;
		}
	}
	.title {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
	.sub-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px;
		font-size: 14px;
		font-weight: bold;
		&.border {
			border-bottom: 1px solid #000000;
		}
		.go {
			font-size: 10px;
			font-weight: normal;
			color: #0000ff;
		}
		.tabs {
			margin-bottom: 1px;
			display: flex;
			justify-content: space-between;
			border: 1px solid #5d6c7b;
			border-radius: 2px;
			font-size: 12px;
			font-weight: normal;
			.tab {
				width: 50px;
				text-align: center;
				border-right: 1px solid #5d6c7b;
				cursor: pointer;
				&:last-child {
					border-right: none;
				}
				&.active {
					background-color: rgba(22, 155, 213, 1);
					color: #ffffff;
				}
			}
		}
	}
	.row-wrap {
		position: relative;
		.pic {
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			width: 50px;
			img {
				width: 100%;
			}
		}
	}
	.row {
		padding: 0 20px;
		margin-bottom: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.col {
			flex: 1;
			display: flex;
			align-items: flex-start;
			.value {
				flex: 1;
			}
		}
	}
	.card {
		margin-bottom: 5px;
		background-color: #ffffff;
		border: 1px solid rgba(215, 215, 215, 1);
		border-radius: 5px;
		.border {
			border-bottom: 1px solid #5d6c7b;
		}
		.line {
			width: 100%;
			border-bottom: 1px solid #5d6c7b;
		}
	}
	.table {
		padding: 0 20px;
		padding-bottom: 20px;
		table {
			border-collapse: collapse;
			border: none;
			width: 100%;
			tr {
				td,
				th {
					padding: 5px;
					text-align: center;
					border: solid #dcdee2 1px;
					position: relative;
					font-size: 12px;
				}
				th {
					background-color: #eeeeee;
				}
			}
		}
	}
}
/deep/ .ivu-modal-body {
	padding: 0;
	max-height: 80vh;
	overflow: auto;
}
/deep/ .ivu-modal-content {
	background-color: transparent;
}
</style>
  