<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
     					   type="index"
     					   label="序号"
     					   align="center"
     					   width="60"
     					>
						<template slot-scope="scope">
							<div>
								{{ scope.row.sxh?scope.row.sxh:'' }}
							</div>
						</template>
						</el-table-column>
						<el-table-column
							prop="sskdmc"
							align="center"
							label="储存库点"
						>
						</el-table-column>
						<el-table-column
							prop="zylzj"
							align="center"
							label="折原粮总计"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.zylzj).indexOf(".") > -1
          					    	  ? Number(scope.row.zylzj).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.zylzj).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column
							prop="hj"
							align="center"
							label="合计"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.hj).indexOf(".") > -1
          					    	  ? Number(scope.row.hj).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.hj).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column
							prop="xmhj"
							align="center"
							label="小麦合计"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.xmhj).indexOf(".") > -1
          					    	  ? Number(scope.row.xmhj).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.xmhj).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column align="center" label="进口小麦">
							<el-table-column
								prop="jkxmxj"
								align="center"
								label="小计"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.jkxmxj).indexOf(".") > -1
          						    	  ? Number(scope.row.jkxmxj).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.jkxmxj).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="jkxmjm"
								align="center"
								label="加麦"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.jkxmjm).indexOf(".") > -1
          						    	  ? Number(scope.row.jkxmjm).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.jkxmjm).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="jkxmaom"
								align="center"
								label="澳麦"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.jkxmaom).indexOf(".") > -1
          						    	  ? Number(scope.row.jkxmaom).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.jkxmaom).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
						</el-table-column>
						<el-table-column align="center" label="国产小麦">
							<el-table-column
								prop="gcxmxj"
								align="center"
								label="小计"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.gcxmxj).indexOf(".") > -1
          						    	  ? Number(scope.row.gcxmxj).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.gcxmxj).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="gcxmhm"
								align="center"
								label="红麦"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.gcxmhm).indexOf(".") > -1
          						    	  ? Number(scope.row.gcxmhm).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.gcxmhm).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="gcxmbm"
								align="center"
								label="白麦"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.gcxmbm).indexOf(".") > -1
          						    	  ? Number(scope.row.gcxmbm).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.gcxmbm).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
						</el-table-column>
						<el-table-column
							prop="dg"
							align="center"
							label="稻谷"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.dg).indexOf(".") > -1
          					    	  ? Number(scope.row.dg).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.dg).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column
							prop="mf"
							align="center"
							label="面粉"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.mf).indexOf(".") > -1
          					    	  ? Number(scope.row.mf).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.mf).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column
							prop="dm"
							align="center"
							label="大米"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.dm).indexOf(".") > -1
          					    	  ? Number(scope.row.dm).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.dm).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column
							prop="ddyy"
							align="center"
							label="大豆原油"
						>
							<template slot-scope="scope">
								{{
							    	String(scope.row.ddyy).indexOf(".") > -1
							    	  ? Number(scope.row.ddyy).toLocaleString(undefined, {
							    	      minimumFractionDigits: 3,
							    	      maximumFractionDigits: 3,
							    	    })
							    	  : Number(scope.row.ddyy).toLocaleString()
							  	}}
							</template>
						</el-table-column>
						<el-table-column
							prop="cpddy"
							align="center"
							label="成品大豆油"
						>
							<template slot-scope="scope">
								{{
							    	String(scope.row.cpddy).indexOf(".") > -1
							    	  ? Number(scope.row.cpddy).toLocaleString(undefined, {
							    	      minimumFractionDigits: 3,
							    	      maximumFractionDigits: 3,
							    	    })
							    	  : Number(scope.row.cpddy).toLocaleString()
							  	}}
							</template>
						</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 {
	selectKcfbDetail,
	selectKcfbDetailByHzqs,
	insertKcfb,
} 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,
		}
	},
	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) {
			selectKcfbDetailByHzqs(data).then((res) => {
				if (res.infoCode == '200') {
					if (res.data) {
						this.detailData = res.data 
						this.detailData.tjmxs = res.data.tjbbKcfbmxList 
					}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() {
			selectKcfbDetail(this.$route.query.hzqs).then((res) => {
				if (res.infoCode == '200') {
					this.detailData = res.data
					this.detailData.tjmxs = res.data.tjbbKcfbmxList
				}
			})
		},
		returnList() {
			// this.$router.go(-1)
			this.$router.push({
				name: 'reportSummary',
				query: {
					activeName: 'distribution',
				},
			})
		},
		saveChange() {
			this.$refs.detailData.validate((valid) => {
				if (valid) {
					let data = {
						...this.detailData,
					}
				insertKcfb(data)
					.then((res) => {
						if (res.infoCode == 200) {
							this.$message.success('保存成功')
							this.$router.push({
								name: 'reportSummary',
								query: {
									activeName: 'distribution',
								},
							})
						}
					})
					.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;
}
</style>
<style>
#adjustingMonth {
	position: relative;
}

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