<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="细目"
						>
						</el-table-column>
						<el-table-column
							prop="qckc"
							align="center"
							label="期初库存"
						>
          					<template slot-scope="scope">
								{{
          					    	String(scope.row.qckc).indexOf(".") > -1
          					    	  ? Number(scope.row.qckc).toLocaleString(undefined, {
          					    	      minimumFractionDigits: 3,
          					    	      maximumFractionDigits: 3,
          					    	    })
          					    	  : Number(scope.row.qckc).toLocaleString()
          					  	}}
          					</template>
						</el-table-column>
						<el-table-column align="center" label="本期收入">
							<el-table-column
								prop="bqsr"
								align="center"
								label="小计"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.bqsr).indexOf(".") > -1
          						    	  ? Number(scope.row.bqsr).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.bqsr).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="grsl"
								align="center"
								label="购入"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.grsl).indexOf(".") > -1
          						    	  ? Number(scope.row.grsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.grsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="bksl"
								align="center"
								label="补库"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.bksl).indexOf(".") > -1
          						    	  ? Number(scope.row.bksl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.bksl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="zrsl"
								align="center"
								label="移入"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.zrsl).indexOf(".") > -1
          						    	  ? Number(scope.row.zrsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.zrsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="lrsl"
								align="center"
								label="轮入"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.lrsl).indexOf(".") > -1
          						    	  ? Number(scope.row.lrsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.lrsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="qtsrsl"
								align="center"
								label="转入"
								width="120"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.qtsrsl).indexOf(".") > -1
          						    	  ? Number(scope.row.qtsrsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.qtsrsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
						</el-table-column>
						<el-table-column align="center" label="本期支出">
							<el-table-column
								prop="bqzc"
								align="center"
								label="小计"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.bqzc).indexOf(".") > -1
          						    	  ? Number(scope.row.bqzc).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.bqzc).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="xssl"
								align="center"
								label="销售"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.xssl).indexOf(".") > -1
          						    	  ? Number(scope.row.xssl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.xssl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="zcsl"
								align="center"
								label="移出"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.zcsl).indexOf(".") > -1
          						    	  ? Number(scope.row.zcsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.zcsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="shsl"
								align="center"
								label="损耗"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.shsl).indexOf(".") > -1
          						    	  ? Number(scope.row.shsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.shsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="lcsl"
								align="center"
								label="轮出"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.lcsl).indexOf(".") > -1
          						    	  ? Number(scope.row.lcsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.lcsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
							<el-table-column
								prop="qtzcsl"
								align="center"
								label="转出"
								width="120"
							>
          						<template slot-scope="scope">
									{{
          						    	String(scope.row.qtzcsl).indexOf(".") > -1
          						    	  ? Number(scope.row.qtzcsl).toLocaleString(undefined, {
          						    	      minimumFractionDigits: 3,
          						    	      maximumFractionDigits: 3,
          						    	    })
          						    	  : Number(scope.row.qtzcsl).toLocaleString()
          						  	}}
          						</template>
							</el-table-column>
						</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>
					<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="$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 {
	selectJxcbbDetail,
	selectJxcbbDetailByHzqs,
	insertJxcbb,
} from '@/api/reportDataSummary//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) {
			selectJxcbbDetailByHzqs(data).then((res) => {
				if (res.infoCode == '200') {
					if (res.data) {
						this.detailData = res.data 
						this.detailData.tjmxs = res.data.tjbbJxchzmxList 
					}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() {
			selectJxcbbDetail(this.$route.query.hzqs).then((res) => {
				if (res.infoCode == '200') {
					this.detailData = res.data
					this.detailData.tjmxs = res.data.tjbbJxchzmxList
					// 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')
					// }
				}
			})
		},
		
		returnList() {
			// this.$router.go(-1)
			this.$router.push({
				name: 'reportDataSummary',
				query: {
					activeName: 'inventory',
				},
			})
		},
		saveChange() {
			this.$refs.detailData.validate((valid) => {
				if (valid) {
					let data = {
						...this.detailData,
					}
				insertJxcbb(data)
					.then((res) => {
						if (res.infoCode == 200) {
							this.$message.success('保存成功')
							this.$router.push({
								name: 'reportDataSummary',
								query: {
									activeName: 'inventory',
								},
							})
						}
					})
					.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>