<template>
	<div id="app">
		<el-table size="mini" :data="travelingSubAmount.tableData" border show-summary style="width: 100%"
		 highlight-current-row>
			<el-table-column prop="id" label="序号" width="160">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.id">
						</el-input>
					</span>
					<span v-else>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="travelUser" label="人员" width="140">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.travelUser">
						</el-input>
						<el-button icon="el-icon-more" size="mini" circle @click="handleQuery"></el-button>
					</span>
					<span v-else>{{scope.row.travelUser}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="travelDept" label="部门" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.travelDept">
						</el-input>
					</span>
					<span v-else>{{scope.row.travelDept}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="dateFrom" label="预算项" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.dateFrom">
						</el-input>
					</span>
					<span v-else>{{scope.row.dateFrom}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="departure" label="出发地" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.departure">
						</el-input>
					</span>
					<span v-else>{{scope.row.departure}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="dateTo" label="到达时间" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.dateTo">
						</el-input>
					</span>
					<span v-else>{{scope.row.dateTo}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="destination" label="到达地" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.destination">
						</el-input>
					</span>
					<span v-else>{{scope.row.destination}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="vechicle" label="交通工具" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.vechicle">
						</el-input>
					</span>
					<span v-else>{{scope.row.vechicle}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="vechicleAmount" label="申请金额" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.isSet">
						<el-input size="mini" placeholder="请输入内容" v-model="travelingSubAmount.sel.vechicleAmount">
						</el-input>
					</span>
					<span v-else>{{scope.row.vechicleAmount}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
						{{scope.row.isSet?'保存':"修改"}}
					</span>
					<span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
						删除
					</span>
					<span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
						取消
					</span>
				</template>
			</el-table-column>

		</el-table>
		<div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>

		<el-dialog title="添加信息" :visible.sync="dialogVisibleTrave" width="800px">
			<el-row>
				<el-col :span="10">
					<div class="tree-container" style="width: 300px; padding-right: 50px;">
						<el-tree v-loading="loadingTrave" :data="dataTrave" :props="defaultPropsTrave" node-key="id"
						 :expand-on-click-node="false" @check="handleNodeClick" show-checkbox default-expand-all>
						</el-tree>
					</div>
				</el-col>
				<el-col :span="14">
					<div class="dialog-table-container" style="padding-left: 150px;width: 271px;">
						<el-table :data="DialogTableDataTrave" border highlight-current-row @row-click="handleDialogChange">
							<el-table-column prop="id" label="编号" width="60" v-if="isShow">
							</el-table-column>
							<el-table-column prop="userName" label="用户姓名" width="150">
							</el-table-column>
							<el-table-column prop="userDesc" label="姓名" width="120">
							</el-table-column>
						</el-table>
					</div>
				</el-col>
			</el-row>
			<el-button type="success" @click="handleTraveSave" style="width: 200px;">保存</el-button>
			<el-button @click="handleCancelSave" style="width: 200px;margin-left: 330px;">取消</el-button>
		</el-dialog>
	</div>
</template>
<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				travelingSubAmount: {
					sel: null, //选中行   
					tableData: [],
				},
				generateId: {
					_count: 1,
					get() {
						return (this._count++)
					}
				},
				dataTrave: [],
				defaultPropsTrave: {
					children: 'children',
					label: 'text'
				},
				deptId: '',
				addId: '',
				DialogTableDataTrave: [],
				dialogVisibleTrave: false,
				loadingTrave: true,
				isShow: false,
			}
		},
		mounted() {
			this.getDataTrave()
		},
		methods: {
			//添加账号
			addMasterUser() {
				for (let i of this.travelingSubAmount.tableData) {
					if (i.isSet) return this.$message.warning("请先保存当前编辑项");
				}
				let j = {
					"id": this.generateId.get(),
					"travelUser": "",
					"travelDept": "",
					"dateFrom": "",
					"departure": "",
					"dateTo": "",
					"destination": "",
					"vechicle": "",
					"vechicleAmount": "",
					"isSet": true
				};
				this.travelingSubAmount.tableData.push(j);
				this.travelingSubAmount.sel = JSON.parse(JSON.stringify(j));
			},
			//修改
			pwdChange(row, index, cg) {
				//点击修改 判断是否已经保存所有操作
				for (let i of this.travelingSubAmount.tableData) {
					if (i.isSet && i.id != row.id) {
						this.$message.warning("请先保存当前编辑项");
						return false;
					}
				}
				//是否是取消操作
				if (!cg) {
					if (!this.travelingSubAmount.sel.id) this.travelingSubAmount.tableData.splice(index, 1);
					return row.isSet = !row.isSet;
				}
				//提交数据
				if (row.isSet) {
					//项目是模拟请求操作  自己修改下
					let data = JSON.parse(JSON.stringify(this.travelingSubAmount.sel));
					for (let k in data) row[k] = data[k];
					this.$message({
						type: 'success',
						message: "保存成功!"
					});
					//然后这边重新读取表格数据
					console.log(456)
					console.log(data)
					console.log(typeof data)
					row.isSet = false;
				} else {
					this.travelingSubAmount.sel = JSON.parse(JSON.stringify(row));
					row.isSet = true;
				}
			},




			handleQuery(val) {
				this.dialogVisibleTrave = true
				this.getDataTrave()
			},

			getDataTrave() {
				//console.log("获取table数据getDataTree")
				var url = 'SysDepartment/queryTree.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.dataTrave = response.data
					if (response) {
						this.loadingTrave = false
					} else {
						this.loadingTrave = true
					}
				});
			},
			getDialogTableDataTrave() {
				//console.log("获取table数据getTableData")
				var url = '/SysUser/queryByDept.do'
				var param = {
					deptId: this.deptId,
				}
				axios.get(url, param).then(response => {
					this.DialogTableDataTrave = response.data.data
					console.log(this.DialogTableDataTrave)
					if (response) {
						this.loadingTrave = false
					} else {
						this.loadingTrave = true
					}
				});
			},
			handleNodeClick(data) {
				console.log(data)
				this.deptId = data.id
				console.log("树结构" + this.deptId)
				this.getDialogTableDataTrave()
			},
			handleDialogChange(data) {
				this.addId = data.id
				console.log("表格" + this.addId)
			},
			handleTraveSave(row) {
				console.log(row)
			},
			handleCancelSave(row) {
				this.dialogVisibleTrave = false
			},
		}
	}
</script>

<style>
	.el-table-add-row {
		margin-top: 10px;
		width: 100%;
		height: 34px;
		border: 1px dashed #c1c1cd;
		border-radius: 3px;
		cursor: pointer;
		justify-content: center;
		display: flex;
		line-height: 34px;
	}
</style>
