<template>
	<div class="content-main">
		<el-form label-width="80px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="入仓时间:">
						<el-date-picker clearable type="date" placeholder="选择日期" v-model="value1"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="粮权单位:">
						<el-input clearable placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="粮食品种:">
						<el-select clearable placeholder="请选择" v-model="value">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label>
						<el-button type="primary" size="small" class="iconfont iconchaxun">&nbsp;查询</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-table border :data="tableData">
					<el-table-column align="center" label="序号" width="80">
						<template slot-scope="scope">
							<span>{{scope.$index+1}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" show-overflow-tooltip label="入仓时间" prop="value1"></el-table-column>
					<el-table-column align="center" show-overflow-tooltip label="权粮单位">
						<template slot-scope="scope">
							<el-button
								type="text"
								size="small"
								class="iconfont"
								@click="showInventory()"
							>{{tableData[scope.$index].value2}}</el-button>
						</template>
					</el-table-column>
					<el-table-column align="center" show-overflow-tooltip label="粮食品种" prop="value3"></el-table-column>
					<el-table-column align="center" show-overflow-tooltip label="等级" prop="value4"></el-table-column>
					<el-table-column align="center" show-overflow-tooltip label="数量(吨)" prop="value5"></el-table-column>
				</el-table>
			</el-row>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		return {
			tableData: [
				{
					value1: "假值1",
					value2: "假值2",
					value3: "假值3",
					value4: "假值4",
					value5: "假值5"
				}
			],
			options: [
				{
					value: "选项1",
					label: "黄金糕"
				},
				{
					value: "选项2",
					label: "双皮奶"
				},
				{
					value: "选项3",
					label: "蚵仔煎"
				},
				{
					value: "选项4",
					label: "龙须面"
				},
				{
					value: "选项5",
					label: "北京烤鸭"
				}
			],
			value: "",
			value1: ""
		};
	},
	methods: {
		showInventory() {
			this.$router.push({
				name: "inventoryTable"
			});
		}
	}
};
</script>
<style scoped lang="scss">
.el-col {
	.el-date-editor {
		width: auto;
	}
	.el-table {
		.iconfont {
			font-size: 13px;
		}
	}
}
</style>