<template>
	<div class="content-main">
		<el-row>
			<el-form :inline="true" :model="formInline" class="search-bm-boder">
				<el-form-item label="单位:">
					<el-input clearable v-model="formInline.ssqymc"></el-input>
				</el-form-item>
				<el-form-item label="作业时间:">
					<el-date-picker
						style="width: 100%;"
						v-model="formInline.jhnd"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择日期"
					></el-date-picker>
				</el-form-item>

				<!-- <el-form-item label="地区:">
          <el-input clearable v-model="formInline.ssqymc"></el-input>
				</el-form-item>-->
				<el-form-item>
					<div class="search-button">
						<span class="search-line"></span>
						<!-- <div class="search-select" @click="searchShowMoreBool=!searchShowMoreBool">
              更多条件
              <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i>
              <i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
						</div>-->
						<el-button type="primary" @click="getList" size="small" class="iconfont iconchaxun">查询</el-button>
						<el-button
							type="primary"
							@click="
                formInline = {}
                getList()
              "
							size="small"
							class="iconfont iconzhongzhi"
						>重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table
				:data="tableData"
				stripe
				v-loading="listLoading"
				border
				fit
				highlight-current-row
				style="width: 100%"
			>
				<el-table-column align="center" label="序号" width="70">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" align="center" prop="xzqh" label="地区"></el-table-column>
				<el-table-column align="center" prop="ssyqmc" :show-overflow-tooltip="true" label="单位"></el-table-column>
				<el-table-column align="center" prop="cfbh" :show-overflow-tooltip="true" label="仓号"></el-table-column>
				<el-table-column align="center" prop="pzmc" :show-overflow-tooltip="true" label="粮食种类"></el-table-column>
				<el-table-column align="center" prop="lssl" :show-overflow-tooltip="true" label="粮食数量"></el-table-column>
				<el-table-column align="center" prop="jcclsj" :show-overflow-tooltip="true" label="生虫时间"></el-table-column>
				<el-table-column align="center" prop="hcmd" :show-overflow-tooltip="true" label="害虫密度（头/kg）"></el-table-column>
				<el-table-column align="center" prop="ldscxg" :show-overflow-tooltip="true" label="杀虫率%"></el-table-column>
				<el-table-column align="center" prop="jcclsj" :show-overflow-tooltip="true" label="作业时间"></el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="light" content="查看" placement="top">
							<el-button
								type="primary"
								size="small"
								class="iconfont iconchakan2 operate_show_btn"
								@click="handleClick(scope.row)"
							></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="pageForm.page"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="pageForm.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageForm.total"
			></el-pagination>
		</el-row>
		<el-dialog title="年度轮换计划查看" width="1000px" :visible.sync="dialogTableVisible">
			<div class="title">
				<span class="line">{{ this.detailStr.ssqy }}</span>市级储备粮油
				<span class="line">{{ this.detailStr.jhnd }}</span>年度轮换计划表
			</div>
			<div style="margin-bottom:5px;">
				<span>承储单位(公章):</span>
				<div id="nibansealpostion"></div>
			</div>
			<el-table
				v-loading="detailLoading"
				:data="detailData"
				border
				fit
				highlight-current-row
				show-summary
				:summary-method="getSummaries"
			>
				<el-table-column align="center" label="序号" width="70">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:show-overflow-tooltip="true"
					property="lcpzbmmc"
					label="品种"
					width="150"
				></el-table-column>
				<el-table-column align="center" property="lcds" label="数量(吨)" width="200"></el-table-column>
				<el-table-column align="center" property="scnf" label="生产年限"></el-table-column>
				<el-table-column align="center" property="cfbhmc" label="轮出仓号"></el-table-column>
			</el-table>
			<el-row>
				<el-form>
					<el-form-item label="年度计划文件">
						<el-upload disabled :on-preview="handlePreview" :file-list="fileList"></el-upload>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row style="margin-top:50px;text-align:center">
				<el-col :span="12">
					单位负责人: &nbsp;&nbsp;&nbsp;
					<span
						class="line"
					>&nbsp;&nbsp;&nbsp;{{ this.detailStr.dwfzr }}&nbsp;&nbsp;&nbsp;</span>
				</el-col>
				<el-col :span="12">
					制表: &nbsp;&nbsp;&nbsp;
					<span
						class="line"
					>&nbsp;&nbsp;&nbsp;{{ this.detailStr.bzr }}&nbsp;&nbsp;&nbsp;</span>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
import { fumigationOperationPage } from '@/api/zxbagl/index'
// import { findByIds } from "@/api/grainReserves/outInAcceptanceMan/inAccReport/index";

export default {
	// components: {},
	// name: 'userInfo',
	data() {
		return {
			fileList: [],
			listLoading: true,
			detailLoading: true,
			formInline: {
				jhnd: null,
				ssqy: null
			},
			pageForm: {
				page: 1,
				size: 10,
				total: 0
			},
			tableData: [
				{
					dq: '呼和浩特',
					dw: '呼和浩特直属库',
					ch: '1',
					lszl: '小麦',
					lssl: '2000'
				},
				{
					dq: '兴安盟',
					dw: '乌兰浩特直属库',
					ch: '2',
					lszl: '稻谷',
					lssl: '2000'
				}
			],
			detailData: [],
			detailStr: {},
			currentPage4: 4,
			dialogTableVisible: false
		}
	},
	methods: {
		//跳转页面
		goDetail() {
			// this.$router.push({name:'zxzyjl'})
		},
		getList() {
			let data = {
				pageNum: this.pageForm.page,
				pageSize: this.pageForm.size,
			}
			fumigationOperationPage(data).then((res) => {
				if (res.infoCode == '200') {
					this.listLoading = false
					// console.log(res.data.list);
					this.tableData = res.data.list
					this.pageForm.total = res.data.total
				}
			})
		},
		handleClick(row) {
			this.$router.push({
				name: 'zxbaglDetail',
				query: {
          id:row.xzzyid
        }
			})
		},
		handlePreview(file, fileList) {
			// console.log(file, fileList);
			// console(this.fileList)
			window.open(file.link)
		},
		handleSizeChange(val) {
			this.pageForm.size = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.pageForm.page = val
			this.getList()
		},
		getSummaries(param) {
			console.log(param)
			const { columns, data } = param
			const sums = []
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计'
					return
				}
				const values = data.map((item) => Number(item[column.property]))
				if (!values.every((value) => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr)
						if (!isNaN(value)) {
							return prev + curr
						} else {
							return prev
						}
					}, 0)
					if (column.label == '数量(吨)') {
						sums[index] += ''
					} else {
						sums[index] = ''
					}
				} else {
					sums[index] = ''
				}
			})

			return sums
		}
	},
	created() {
		this.getList()
	},
	mounted() {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.line {
	border-bottom: 1px solid #000;
}

.title {
	margin-bottom: 20px;
	text-align: center;
	font-size: 16px;
}

.text {
	text-align: center;
}
</style>
<style>
#nibansealpostion {
	position: relative;
}

#websignPlan {
	left: 100px !important;
	top: -100px !important;
}
</style>
