<template>
	<div>
		<el-row>
			<el-form :model="query" label-width="100px" inline="">
				<el-form-item label="客户名称" >
					<el-select v-model="query.customerName" filterable placeholder="请选择订单客户" clearable size="small">
						<el-option v-for="item in optionsCust" :key="item.name" :label="item.name" :value="item.name" >
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="info" @click="search" size="small">查询</el-button>
					<el-button type="primary" @click="handleAdd" size="small">新增</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="id" label="编号" width="60" v-if="isShow"></el-table-column>
			<!-- <el-table-column prop="material.name" label="物料" width="180" show-overflow-tooltip ></el-table-column>
			<el-table-column prop="material.standard" label="钢种" width="180" show-overflow-tooltip ></el-table-column>
			<el-table-column prop="storageType" label="类型" width="180" show-overflow-tooltip align="center" :formatter="typeFormatter"></el-table-column> -->
			<el-table-column prop="customer.name" 		label="客户名称" 	width="180" show-overflow-tooltip ></el-table-column>
			<el-table-column prop="keepDay" 			label="免堆时间（天）" 	width="200" show-overflow-tooltip ></el-table-column>
			<el-table-column prop="ordPrice" 			label="免堆期价格（元/吨）" 	width="200" show-overflow-tooltip align="right"></el-table-column>
			<el-table-column prop="outOrdPrice" 		label="超期价格（元/吨）" 	width="200" show-overflow-tooltip align="right"></el-table-column>
			<el-table-column prop="addUser.userDesc" 	label="添加人" 		width="120" show-overflow-tooltip ></el-table-column>
			<el-table-column prop="addTime" 			label="添加时间" 	width="200" show-overflow-tooltip ></el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<!-- 编辑、删除向后台传参数时，传整行数据row  删除时id=row.id -->
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows"></el-pagination>

		<!-- 弹出框  另起名字  var json = JSON.stringify(this.自己起的名字)
        var url = 后台对应的url 'MaintPrice/save.do' -->
		<el-dialog title="价格明细" :visible.sync="dialogVisible" width="500px">
			<el-form :model="obj" label-width="100px">
				<el-form-item label="id" v-if="isShow">
					<el-input v-model="obj.id"></el-input>
				</el-form-item>
				<el-form-item label="客户名称">
					<el-select v-model="obj.customer.id" filterable placeholder="请选择订单客户" clearable style="width: 300px;">
						<el-option v-for="item in optionsCust" :key="item.name" :label="item.name" :value="item.id" >
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="免堆时间">
					<el-input v-model="obj.keepDay" type="number" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="免堆期价格">
					<el-input v-model="obj.ordPrice" type="number" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="超期价格">
					<el-input v-model="obj.outOrdPrice" type="number" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<popup-material ref="PopupMaterial" @receviceFromChild="receviceFromMaterial"></popup-material>
		<popup-material-dialog ref="PopupMaterialDialog" @receviceFromChild="receviceFromMaterialDialog"></popup-material-dialog>
	</div>
</template>
<script>
	import axios from '@/axios'
	import PopupMaterial from '@/components/PopupMaterial.vue'
	import PopupMaterialDialog from '@/components/PopupMaterial.vue'
	export default {
		components: {
			PopupMaterial,
			PopupMaterialDialog
		},
		data() {
			return {
				options: [{
					value: '0',
					label: '未货权转移'
				}, {
					value: '1',
					label: '已货权转移'
				}],
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50,100,200,500],
				pageSize: 50,
				//查询条件
				query: {
					customerName: '',
				},
				//录入框
				dialogVisible: false,
				isShow: false,
				loading: true,
				obj: {
					id:'',
					customer: {
						id: '',
						name: '',
					},
					keepDay: '',
					ordPrice: '',
					outOrdPrice: '',
				},
				optionsCust: [],

			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
			this.getAllCustomer()
		},
		methods: {
			typeFormatter: function(row, column) {
				switch (row.storageType) {
					case "0":
						return "未货权转移";
						break;
					default:
						return "已货权转移";
						break;
				}
			},

			getAllCustomer() {
				var url = 'MaintCustomer/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.optionsCust = response.data.data
				});
			},
			
			showMaterial() {
				this.$refs.PopupMaterial.show()
			},
			receviceFromMaterial(material) {
				this.query.materialName = material.name
				this.query.standard = material.standard
			},
			showMaterialDialog() {
				this.$refs.PopupMaterialDialog.show()
			},
			receviceFromMaterialDialog(material) {
				this.obj.material.id = material.id
				this.obj.material.name = material.name
				this.obj.material.standard = material.standard
			},
			getTableData() {
				this.loading = true
				var url = 'MaintPrice/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					customerName: this.query.customerName,
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						this.totalRows = response.data.data.total
					} else {
						this.$message({
							type: 'error',
							message: '失败！' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},

			//保存按钮事件
			handleSave(row) {
				var json = JSON.stringify(this.obj)
				var url = 'MaintPrice/save.do'
				var param = {
					json: json
				}
				axios.post(url, param).then(response => {
					console.log(response)
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败:' + response.data.msg,
						});
					}
					// loading.close();
				});

				//         console.log(json)
				//
			},
			//保存取消按钮事件   关闭编辑对话框
			handleCancelSave(row) {
				this.dialogVisible = false
			},
			// 新增按钮事件
			handleAdd() {
				this.dialogVisible = true
				this.obj = {
					id:'',
					customer: {
						id: '',
						name: '',
					},
					keepDay: '',
					ordPrice: '',
					outOrdPrice: '',
				}

			},
			// 编辑按钮事件
			handleEdit(row) {
				this.dialogVisible = true
				this.obj = row
			},

			// 删除按钮事件
			handleDelete(row) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'MaintPrice/remove.do'
					var param = {
						id: row.id
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败;' + response.data.msg
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 查询按钮事件
			search() {
				this.currentPage = 1
				this.getTableData()
			}
		}
	}
</script>
<style>
	.el-table .warning-row {
		background: #F08080;
	}

	.el-select-dropdown .el-scrollbar .el-scrollbar__wrap
    {
        overflow: scroll!important;
    }
	.el-upload-list__item-name{
		background-color: #9f9;
	}
</style>
