<template>
	<div id="app">
		<el-table size="mini" :data="listVechicle.tableData" border show-summary style="width: 100%" highlight-current-row
		 :header-cell-style="tableHeaderColor">
			<el-table-column label="车船费">
				<el-table-column prop="id" label="序号" width="400" v-if="isShow">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.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 === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.sel.travelUser" style="width:80px">
							</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 === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.sel.travelDept">
							</el-input>
						</span>
						<span v-else>{{scope.row.travelDept}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="dateFrom" label="开始时间" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet === '0'">
							<el-date-picker type="date" size="mini" placeholder="选择日期" v-model="listVechicle.sel.dateFrom" value-format="yyyy-MM-dd"
							 style="width: 400px;">
							</el-date-picker>
						</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 === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.sel.departure">
							</el-input>
						</span>
						<span v-else>{{scope.row.departure}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="dateTo" label="到达时间" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet === '0'">
							<el-date-picker type="date" size="mini" placeholder="选择日期" v-model="listVechicle.sel.dateTo" value-format="yyyy-MM-dd"
							 style="width: 400px;">
							</el-date-picker>
						</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 === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.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 === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.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 === '0'">
							<el-input size="mini" placeholder="请输入内容" v-model="listVechicle.sel.vechicleAmount">
							</el-input>
						</span>
						<span v-else>{{scope.row.vechicleAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" :render-header="renderHeader">
					<template slot-scope="scope">
						<span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,'1')">
							{{scope.row.isSet === '0'?'保存':"修改"}}
						</span>
						<span v-if="scope.row.isSet === '1'" 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,'0')">
							取消
						</span>
						<span class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click="showUpload">
							上传
						</span>
						<span class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click="showImage(scope.row)">
							查看
						</span>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>

		<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>

		<el-dialog title="添加图片" :visible.sync="dialogTravePic" width="500px">
			<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
			<el-upload action="234" ref="upload" :auto-upload="false" :on-change="handleChange" list-type="picture-card"
			 :on-preview="handlePictureCardPreview" multiple :on-remove="handleRemove">
				<i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogTraveImg">
				<img width="100%" :src="dialogTraveImageUrl" alt="">
			</el-dialog>
		</el-dialog>
	</div>
</template>
<script>
	import axios from '@/axios';
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState({
				serverName: state => state.app.serverName
			})
		},
		data() {
			return {
				fid: '',
				fileListTemp: [],
				formData: new FormData(),
				uploadUrl: this.serverName + "/Common/uploadImage",
				listVechicle: {
					sel: null, //选中行   
					tableData: [],
				},
				dataTrave: [],
				defaultPropsTrave: {
					children: 'children',
					label: 'text'
				},
				deptId: '',
				deptName: '',
				addName: '',
				primaryKeyId: '',
				DialogTableDataTrave: [],
				dialogVisibleTrave: false,
				loadingTrave: true,
				isShow: false,
				dialogTravePic: false,
				dialogTraveImageUrl: '',
				dialogTraveImg: false,
			}
		},
		mounted() {
			this.getDataTrave()
		},
		methods: {
			renderHeader(h, params) {
				let a = [h('el-button', {
					props: {
						size: "mini",
						type: "success",
						icon: "el-icon-plus",
						circle: "true",

					},
					on: {
						click: () => {
							this.getByTravePrimaryKeyId();
						}
					}
				})];
				return h('div', a)
			},
			getByTravePrimaryKeyId() {
				var url = 'Common/queryPrimaryKey.do'
				var param = {}
				axios.get(url, param).then(response => {
					if (response.data.code == '0') {
						this.primaryKeyId = response.data.data
						this.addMasterUser(this.primaryKeyId, this.fid)
					} else {
						this.$message({
							type: 'error',
							message: '查询失败' + response.data.msg
						});
					}
				});
			},
			//添加账号
			addMasterUser(id, fid) {
				//this.getByTravePrimaryKeyId()
				for (let i of this.listVechicle.tableData) {
					if (i.isSet === '0') return this.$message.warning("请先保存当前编辑项");
				}
				let j = {
					"id": id,
					"city": "",
					"departure": "",
					"destination": "",
					"invoiceNo": "",
					"invoiceType": "",
					"province": "",
					"detailType": "",
					"summary": "",
					"travelDept": "",
					"travelExpenseId": fid,
					"travelUser": "",
					"vechicle": "",
					"dateFrom": "",
					"dateTo": "",
					"excludeTaxAmount": "",
					"standardTotalAmount": "",
					"taxAmount": "",
					"taxRate": "",
					"totalAmount": "",
					"vechicleAmount": "",
					"isSet": "0"

				};
				this.listVechicle.tableData.push(j);
				this.listVechicle.sel = j;
			},
			//修改
			pwdChange(row, index, cg) {
				//点击修改 判断是否已经保存所有操作
				for (let i of this.listVechicle.tableData) {
					if (i.isSet === '0' && i.id != row.id) {
						this.$message.warning("请先保存当前编辑项");
						return false;
					}
				}
				//是否是取消操作
				console.log("cg:" + cg)
				console.log("row.isSet:" + row.isSet)
				if (!cg) {
					this.listVechicle.tableData.splice(index, 1);
					return row.isSet = !row.isSet;
				}
				//提交数据
				if (row.isSet === '0') {
					//项目是模拟请求操作  自己修改下
					let data = this.listVechicle.sel;
					for (let k in data) row[k] = data[k];
					this.$message({
						type: 'success',
						message: "保存成功!"
					});
					//然后这边重新读取表格数据
					row.isSet = '1';
				} else {
					this.listVechicle.sel = row;
					row.isSet = '0';
				}
			},
			// 			click(){
			// 					this.$emit("childTraveling",this.travelingSubAmount.tableData)
			// 			},
			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) {
				this.deptId = data.id
				this.deptName = data.text
				this.getDialogTableDataTrave()
			},
			handleDialogChange(data) {
				this.addName = data.userDesc
			},
			handleTraveSave(row) {
				this.listVechicle.sel.travelUser = this.addName
				this.listVechicle.sel.travelDept = this.deptName
				this.dialogVisibleTrave = false
			},
			handleCancelSave(row) {
				this.dialogVisibleTrave = false
			},
			showUpload() {
				this.dialogTravePic = true
			},

			handlePictureCardPreview(file) {
				this.dialogTraveImageUrl = file.url;
				this.dialogTraveImg = true;
			},
			handleRemove(file, fileList) {
				this.fileListTemp = fileList
			},
			handleChange(file, fileList) {
				this.fileListTemp = fileList
			},
			showImage(row) {
				this.$emit('ee', row.id)
			},
			submitUpload() {
				if (this.fileListTemp.length < 1) {
					this.$message({
						type: 'warn',
						message: '请添加图片！！！'
					});
					return;
				}
				this.formData.append('param', '1')
				for (let i = 0; i < this.fileListTemp.length; i++) {
					this.formData.append('file', this.fileListTemp[i].raw)
				}
				axios.post('Common/uploadImage.do', this.formData).then(response => {

					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '导入成功!',
						});
						this.formData = new FormData()
						this.fileListTemp = []
						this.$refs.upload.submit()
					} else {
						this.$message({
							type: 'error',
							message: '导入失败' + response.data
						});
						this.fileListTemp = []
						this.formData = new FormData()
						this.$refs.upload.submit()
					}

				})

			},
			tableHeaderColor({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (rowIndex <=1  ) {
					return 'background-color:  #DCDFE6;color: #000;font-weight: 500;padding:0px;'
				} 
			}

		}
	}
</script>
