<template>
	<div class="content-main">
		<el-row :id="$route.query.state == 'export' ? 'tjcbData' : ''">
			<el-row class="titles" id="protectedItems"
				>市级储备粮库存年份表-调节储备</el-row
			>
			<div id="adjustingMonth"></div>
			<el-row class="titlesMor">
				上报单位:{{ detailData.sskdmc }}

				<span style="float: right"
					>上报期数:{{ detailData.sbqs
					}}<span style="margin: 0 10px 0 50px">单位:吨</span></span
				>
			</el-row>
			<el-row>
				<el-form :model="detailData" ref="detailData" :rules="rules">
					<el-table
						:data="detailData.tjmxs"
						stripe
						border
						fit
						highlight-current-row
						style="width: 100%"
					>
						<el-table-column
							prop="pzmc"
							align="center"
							label="项目"
						>
							<template slot-scope="scope">
								<div
									:class="{
										pzmcStyle:
											scope.row.pzmc == '小麦' ||
											scope.row.pzmc == '红麦' ||
											scope.row.pzmc == '白麦' ||
											scope.row.pzmc == '美麦' ||
											scope.row.pzmc == '加麦' ||
											scope.row.pzmc == '澳麦',
									}"
								>
									{{ scope.row.pzmc }}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							prop="qmkc"
							align="center"
							label="期末库存"
						>
							<template slot-scope="scope">
								{{
									String(scope.row.qmkc).indexOf('.') > -1
										? Number(scope.row.qmkc).toFixed(3)
										: scope.row.qmkc
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="按 生 产 年 度 划 分"
						>
							<el-table-column
								prop="fiveqmkc"
								align="center"
								:label="nowYear - 5 + '年'"
							>
								<template slot-scope="scope">
									<span v-if="scope.row.fiveqmkc">
										{{
											String(scope.row.fiveqmkc).indexOf(
												'.'
											) > -1
												? Number(
														scope.row.fiveqmkc
												  ).toLocaleString(undefined, {
														minimumFractionDigits: 3,
														maximumFractionDigits: 3,
												  })
												: Number(
														scope.row.fiveqmkc
												  ).toLocaleString()
										}}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="fourqmkc"
								align="center"
								:label="nowYear - 4 + '年'"
							>
								<template slot-scope="scope">
									{{
										String(scope.row.fourqmkc).indexOf(
											'.'
										) > -1
											? Number(
													scope.row.fourqmkc
											  ).toFixed(3)
											: scope.row.fourqmkc
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="threeqmkc"
								align="center"
								:label="nowYear - 3 + '年'"
							>
								<template slot-scope="scope">
									{{
										String(scope.row.threeqmkc).indexOf(
											'.'
										) > -1
											? Number(
													scope.row.threeqmkc
											  ).toFixed(3)
											: scope.row.threeqmkc
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="twoqmkc"
								align="center"
								:label="nowYear - 2 + '年'"
							>
								<template slot-scope="scope">
									{{
										String(scope.row.twoqmkc).indexOf('.') >
										-1
											? Number(scope.row.twoqmkc).toFixed(
													3
											  )
											: scope.row.twoqmkc
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="oneqmkc"
								align="center"
								:label="nowYear - 1 + '年'"
								width="120"
							>
								<template slot-scope="scope">
									<span>{{
										String(scope.row.oneqmkc).indexOf('.') >
										-1
											? Number(scope.row.oneqmkc).toFixed(
													3
											  )
											: scope.row.oneqmkc
									}}</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="dqmkc"
								align="center"
								:label="nowYear + '年'"
								width="120"
							>
								<template slot-scope="scope">
									<span>{{
										String(scope.row.dqmkc).indexOf('.') >
										-1
											? Number(scope.row.dqmkc).toFixed(3)
											: scope.row.dqmkc
									}}</span>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
					<el-row style="margin-top: 15px">
						<el-col :span="8">
							<el-form-item
								prop="tbr"
								label="填报人"
								label-width="100px"
							>
								<el-input
									class="inputWid"
									disabled
									placeholder="请输入"
									v-model="detailData.tbr"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								prop="dwfzr"
								label="单位负责人"
								label-width="100px"
							>
								<el-input
									disabled
									class="inputWid"
									placeholder="请输入"
									v-model="detailData.dwfzr"
								></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="8">
							<el-form-item
								prop="shry"
								label="审核人"
								label-width="100px"
							>
								<el-input
									:disabled="detailF"
									class="inputWid"
									placeholder="请输入"
									v-model="detailData.shry"
								></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
				</el-form>
			</el-row>
		</el-row>

		<span class="detail-footer">
			<el-button
				v-if="!detailF"
				type="primary"
				size="small"
				class="iconfont icontijiao"
				@click="saveChange()"
				>通过</el-button
			>
			<el-button
				v-if="!detailF"
				type="primary"
				size="small"
				@click="reject"
				class="iconfont iconbohui"
				>驳回</el-button
			>

			<el-button
				v-if="$route.query.state == 'export'"
				type="primary"
				size="small"
				class="iconfont icondaochu11"
				@click="exportTable"
				>导出</el-button
			>
			<el-button
				type="primary"
				size="small"
				class="iconfont iconfanhui"
				@click="returnList"
				>返回</el-button
			>
		</span>
	</div>
</template>
<script>
import {
	selectInvAdjSummary,
	save,
	updateKcnd,
	selectKcndDetail,
} from '@/api/adjustingReserves/adjustingMonth/index'
import htmlToPdf from '@/utils/htmlToPdf'
export default {
	data() {
		return {
			cFlag: false,
			detailData: {
				tjmxs: [],
				sskdmc: sessionStorage.getItem('orgName'),
			},
			rules: {
				shry: {
					required: true,
					trigger: 'blur',
					message: '请输入',
				},
			},
			detailF: false,
			nowYear: "",
		}
	},
	created() {
		if (
			this.$route.query.state == 'detail' ||
			this.$route.query.state == 'export'
		) {
			this.detailF = true //禁用内容
			this.getDetail()
		} else if (this.$route.query.state == 'audit') {
			this.detailF = false //禁用内容
			this.getDetail()
		}
	},
	methods: {
		exportTable() {
			let _this = this
			setTimeout(function () {
				htmlToPdf.downloadPDF(
					document.querySelector('#tjcbData'),
					'市级储备粮实际库存管理平衡表-调节储备.pdf',
					1,
					'1550px'
				)
			}, 100)
		},
		getDetail() {
			selectKcndDetail({ id: this.$route.query.id }).then((res) => {
				if (res.infoCode == '200') {
					this.nowYear = res.data.sbqs.substring(0, 4)
					this.detailData = res.data
					this.detailData.tjmxs = res.data.tjnfmxList
					if (this.detailData.gz) {
						if (this.detailData.gz.indexOf('newSeal') == -1) {
							this.$nextTick(() => {
								this.$ShowSeal('adjustingMonth', 1)
								this.$SetSealData(
									this.detailData.gz,
									0,
									'lingdao',
									1
								)
							})
						} else {
							this.$nextTick(() => {
								this.$signatureOnload(
									'adjustingMonth',
									this.detailData.gz.substring(7)
								)
							})
						}
					}
					if (this.$route.query.state == 'audit') {
						this.detailData.shry =
							sessionStorage.getItem('userName')
					}
				}
			})
		},
		//驳回
		reject() {
			this.$refs.detailData.validate((valid) => {
				if (valid) {
					this.$confirm('是否确认驳回？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					})
						.then(() => {
							this.doRejectTodo()
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消驳回',
							})
						})
				}
			})
		},
		doRejectTodo() {
			let data = {
				...this.detailData,
				id: this.$route.query.id,
				zt: '91000004',
				ztmc: '上报驳回',
			}
			updateKcnd(data)
				.then((res) => {
					if (res.infoCode == '200') {
						this.$message({
							message: '驳回成功',
							type: 'success',
						})
						this.returnList()
					} else {
						this.$message({
							message: '驳回失败',
							type: 'error',
						})
					}
				})
				.catch((res) => {
					this.$message({
						message: res.msg,
						type: 'error',
					})
				})
		},
		returnList() {
			this.$router.go(-1)
		},
		saveChange() {
			this.$refs.detailData.validate((valid) => {
				if (valid) {
					let data = {
						...this.detailData,
						id: this.$route.query.id,
						zt: '91000005', //审核通过
						ztmc: '审核通过',
					}
					updateKcnd(data).then((res) => {
						if (res.infoCode == '200') {
							this.$message({
								message: '审核成功',
								type: 'success',
							})
							this.returnList()
						} else {
							this.$message({
								message: '审核失败',
								type: 'error',
							})
						}
					})
				}
			})
		},
	},
}
</script>
<style scoped>
.titles {
	width: 100%;
	text-align: center;
	font-size: 18px;
}
.titlesMor {
	font-size: 16px;
	margin-left: 10px;
	margin-bottom: 50px;
}
.inputWid {
	width: 80%;
}
.inputWidBz {
	width: 94.5%;
}
#tjcbData {
	padding: 20px 50px;
	font-size: 18px;
}
.pzmcStyle {
	text-align: right;
}
</style>
<style>
#adjustingMonth {
	position: relative;
}

#adjustingMonth > div {
	top: -20px !important;
	left: 255px !important;
}
</style>