<template>
	<div style="text-align: left;">
		<div style="width:600px;float: left; margin-left: 10px;margin-bottom: 10px;">
			<el-input v-model="query" size="small" placeholder="请输入查询条件" style="width :300px;float: left;"></el-input>
			<el-button type="info" size="small"  @click="search">查询</el-button>
			<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
		</div>

		<div style="padding-right: 30px;">
			<el-table v-loading="loading" :data="tableData" border size="small">
				<el-table-column prop="id" size="small" label="编号" width="60" v-if="isShow">
				</el-table-column>
				<el-table-column prop="name" size="small" label="客户名称" width="450" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="code" size="small" label="客户名称(简称)" width="250" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="contact" size="small" label="联系人" width="120" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template slot-scope="scope">
						<el-button size="small"  @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
						<el-button size="small" @click="showAddress(scope.row)">地址</el-button>
					</template>
				</el-table-column>
				
			</el-table>
		</div>
		<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>
		



		<el-dialog title="客户明细" :visible.sync="dialogVisible" width="500px" >
			<el-form :model="customer" label-width="100px">
				<el-form-item label="用户编码" v-if="isShow">
					<el-input v-model="customer.id"></el-input>
				</el-form-item>
				<el-form-item label="客户名称">
					<el-input v-model="customer.name"></el-input>
				</el-form-item>
				<el-form-item label="客户名称(简称)">
					<el-input v-model="customer.code"></el-input>
				</el-form-item>
				<el-form-item label="联系人">
					<el-input v-model="customer.contact"></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="customer.phone"></el-input>
				</el-form-item>
			<!-- 	<el-form-item label="收货地址">
					<el-input v-model="customer.address" type="textarea"></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>


		<el-dialog title="客户明细" :visible.sync="addressDialogVisible" width="600px" @close="close">
			<el-form :model="address" label-width="80px">
				<el-form-item label="收货地址">
					<el-input v-model="address.address" type="textarea" style="width: 400px;"></el-input>
					<el-button type="success" @click="handleAddressSave">保存</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="addressTableData" border>
				<el-table-column prop="address" label="客户名称" width="350" show-overflow-tooltip>
				</el-table-column>
				 
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" @click="handleDefault(scope.row)" v-if="scope.row.defaultFlag == '0'">默认</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import axios from '@/axios'
	export default {
		components: {

		},
		data() {
			return {
				addressDialogVisible: false,
				addressTableData: [],
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,
				//查询条件
				query: '',
				//录入框
				dialogVisible: false,
				customer: {
					id: '',
					name: '',
					code: '',
					contact: '',
					phone: '',
					address: '',
				},
				isShow: false,
				loading: true,
				address: {
					id: '',
					fId: '',
					address: '',
					defaultFlag: ''
				}
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				this.loading = true
				var url = 'MaintCustomer/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					query: this.query
				}
				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()
			},
			//+++++++弹出选择窗口
			handleSearchStore() {
				console.log('-------0000');
				this.$refs.popupStore.show()
			},
			//获取项目信息  赋值
			receviceFromStore(store) {
				console.log(JSON.stringify(store))
				console.log(store.agentCd)
				this.user.attr1 = store.agentCd
			},
			//保存按钮事件
			handleSave(row) {
				var json = JSON.stringify(this.customer)
				var url = 'MaintCustomer/save.do'
				var param = {
					json: json
				}
				axios.post(url, param).then(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();
				});



			},
			//保存取消按钮事件   关闭编辑对话框
			handleCancelSave(row) {
				this.dialogVisible = false
			},
			// 新增按钮事件
			handleAdd() {
				this.dialogVisible = true
				this.customer = {
					id: '',
					name: '',
					code: '',
					contact: '',
					phone: '',
					address: '',
				}
			},
			// 编辑按钮事件
			handleEdit(row) {
				this.dialogVisible = true
				this.customer = row
			},

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

					var url = 'MaintCustomer/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()
			},
			showAddress(row) {
				this.addressDialogVisible = true
				this.address.fId = row.id
				this.getAddressTableData()
			},
			getAddressTableData() {
				var url = 'MaintCustomer/queryAddress.do'
				var param = {
					fId:this.address.fId
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.addressTableData = response.data.data

					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
			handleAddressSave(){
				var json = JSON.stringify(this.address)
				var url = 'MaintCustomer/saveAddress.do'
				var param = {
					json: json
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getAddressTableData()
			
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			handleDefault(row){
				var json = JSON.stringify(row)
				var url = 'MaintCustomer/defaultAddress.do'
				var param = {
					json: json
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getAddressTableData()
			
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			close(){
					this.getTableData()
			}
		}
	}
</script>
