<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">
				{{ sskdmc }}

				<span style="float: right">
					汇总期数:
					<span v-if="detailF">{{ detailData.hzqs }}</span>
					<span v-else>
						<el-date-picker
							v-model="hzqs"
							@change="handleChange"
							type="month"
							clearable
							value-format="yyyy-MM"
							placeholder="请选择汇总期数"
						></el-date-picker>
					</span>
					<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).toLocaleString(
												undefined,
												{
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
												}
										  )
										: Number(
												scope.row.qmkc
										  ).toLocaleString()
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="按 生 产 年 度 划 分"
						>
							<el-table-column
								prop="fiveqmkc"
								align="center"
								:label="nowYear - 5 + '年'"
							>
								<template slot-scope="scope">
									{{
										String(scope.row.fiveqmkc).indexOf(
											'.'
										) > -1
											? Number(
													scope.row.fiveqmkc
											  ).toLocaleString(undefined, {
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
											  })
											: Number(
													scope.row.fiveqmkc
											  ).toLocaleString()
									}}
								</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
											  ).toLocaleString(undefined, {
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
											  })
											: Number(
													scope.row.fourqmkc
											  ).toLocaleString()
									}}
								</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
											  ).toLocaleString(undefined, {
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
											  })
											: Number(
													scope.row.threeqmkc
											  ).toLocaleString()
									}}
								</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
											  ).toLocaleString(undefined, {
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
											  })
											: Number(
													scope.row.twoqmkc
											  ).toLocaleString()
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="oneqmkc"
								align="center"
								:label="nowYear - 1 + '年'"
								width="120"
							>
								<template slot-scope="scope">
									{{
										String(scope.row.oneqmkc).indexOf('.') >
										-1
											? Number(
													scope.row.oneqmkc
											  ).toLocaleString(undefined, {
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
											  })
											: Number(
													scope.row.oneqmkc
											  ).toLocaleString()
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="dqmkc"
								align="center"
								:label="nowYear + '年'"
								width="120"
							>
								<template slot-scope="scope">
									{{
										String(scope.row.dqmkc).indexOf('.') >
										-1
											? Number(
													scope.row.dqmkc
											  ).toLocaleString(undefined, {
													minimumFractionDigits: 3,
													maximumFractionDigits: 3,
											  })
											: Number(
													scope.row.dqmkc
											  ).toLocaleString()
									}}
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
					<el-row style="margin-top: 10px">
						<el-col :span="24">
							<el-form-item
								prop="remark"
								label="备注"
								label-width="100px"
							>
								<el-input
									class="inputWidBz"
									:disabled="detailF"
									placeholder="请输入"
									type="textarea"
									rows="4"
									v-model="detailData.remark"
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item
								prop="zb"
								label="制表"
								label-width="100px"
							>
								<el-input
									class="inputWid"
									:disabled="detailF"
									placeholder="请输入"
									v-model="detailData.zb"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="汇总日期:" prop="hzrq">
								<el-date-picker
									class="dateInputCompatible"
									v-model="detailData.hzrq"
									:disabled="detailF"
									type="date"
									placeholder="汇总日期"
									value-format="yyyy-MM-dd"
								></el-date-picker>
							</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 {
	selectKcnfbDetail,
	selectKcnfbDetailByHzqs,
	insertKcnfb,
} from '@/api/unregulatedReserves/reportSummary/index'
import htmlToPdf from '@/utils/htmlToPdf'
import { getNowDate1, getNowDate } from '@/utils'
export default {
	data() {
		return {
			cFlag: false,
			hzqs: this.$route.query.hzqs,
			detailData: {
				tjmxs: [],
				hzqs: '',
				hzrq: '',
				zb: '',
				remark: '',
			},
			sskdmc: sessionStorage.getItem('orgName'),
			rules: {
				shry: {
					required: true,
					trigger: 'blur',
					message: '请输入',
				},
				zb: {
					required: true,
					trigger: 'blur',
					message: '请输入制表',
				},
				hzrq: {
					required: true,
					trigger: 'change',
					message: '请选择汇总日期',
				},
			},
			detailF: false,
			nowYear: new Date().getFullYear(),
		}
	},
	created() {
		if (
			this.$route.query.state == 'detail' ||
			this.$route.query.state == 'export'
		) {
			this.detailF = true //禁用内容
			this.getDetail()
		} else if (this.$route.query.state == 'add') {
			this.detailF = false //禁用内容
			// this.$set(this.detailData, "hzqs", getNowDate1())
			this.addDetail(this.hzqs)
		}
	},
	methods: {
		exportTable() {
			let _this = this
			setTimeout(function () {
				htmlToPdf.downloadPDF(
					document.querySelector('#tjcbData'),
					'市级储备粮实际库存管理平衡表-调节储备.pdf',
					1,
					'1550px'
				)
			}, 100)
		},
		addDetail(data) {
			this.nowYear = data.substring(0, 4)
			selectKcnfbDetailByHzqs(data).then((res) => {
				if (res.infoCode == '200') {
					if (res.data) {
						this.detailData = res.data
						this.detailData.tjmxs = res.data.tjbbKcnfbmxList
					} else {
						this.detailData = {}
						this.$set(this.detailData, 'tjmxs', [])
					}
					if (!this.detailData.hzrq) {
						// this.detailData.hzrq = getNowDate()
						this.$set(this.detailData, 'hzrq', getNowDate())
					}
					// this.$set(this.detailData, "hzqs", getNowDate1())
					// this.$set(this.detailData, "zb", sessionStorage.getItem('userName'))
					// this.$set(this.detailData, "hzrq", getNowDate())
				}
			})
		},
		handleChange(val) {
			// console.log(val,"val-------");
			this.addDetail(val)
		},
		getDetail() {
			this.nowYear = this.$route.query.hzqs.substring(0, 4)
			selectKcnfbDetail(this.$route.query.hzqs).then((res) => {
				if (res.infoCode == '200') {
					this.detailData = res.data
					this.detailData.tjmxs = res.data.tjbbKcnfbmxList
				}
			})
		},
		returnList() {
			// this.$router.go(-1)
			this.$router.push({
				name: 'reportSummary',
				query: {
					activeName: 'age',
				},
			})
		},
		saveChange() {
			this.$refs.detailData.validate((valid) => {
				if (valid) {
					let data = {
						...this.detailData,
					}
					insertKcnfb(data)
						.then((res) => {
							if (res.infoCode == 200) {
								this.$message.success('保存成功')
								this.$router.push({
									name: 'reportSummary',
									query: {
										activeName: 'age',
									},
								})
							}
						})
						.catch((err) => {
							console.log(err)
						})
				}
			})
		},
	},
}
</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>