<template>
	<div id="app">
		<el-table size="mini" :data="listLive.tableData" border show-summary style="width: 100%" highlight-current-row>
			<el-table-column label="住宿费">
				<el-table-column prop="id" label="序号" width="160" v-if="isShow">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.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="listLive.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">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.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-date-picker type="date" size="mini" placeholder="选择日期" v-model="listLive.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="dateTo" label="到达时间" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-date-picker type="date" size="mini" placeholder="选择日期" v-model="listLive.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="province" label="省份" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.sel.province">
							</el-input>
						</span>
						<span v-else>{{scope.row.province}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="city" label="地区" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.sel.city">
							</el-input>
						</span>
						<span v-else>{{scope.row.city}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="standardTotalAmount" label="标准金额" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.sel.standardTotalAmount">
							</el-input>
						</span>
						<span v-else>{{scope.row.standardTotalAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="invoiceType" label="发票类型" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-select v-model="listLive.sel.invoiceType" placeholder="请选择" size="mini" @change="typeChange">
								<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</span>
						<span v-else>{{scope.row.invoiceType}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="taxRate" label="税率" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-select v-model="listLive.sel.taxRate" placeholder="请选择" size="mini" :disabled="typeShow">
								<el-option v-for="item in optionsTaxRate" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</span>
						<span v-else>{{scope.row.taxRate}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="totalAmount" label="价税合计" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.sel.totalAmount">
							</el-input>
						</span>
						<span v-else>{{scope.row.totalAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="excludeTaxAmount" label="金额" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.sel.excludeTaxAmount">
							</el-input>
						</span>
						<span v-else>{{scope.row.excludeTaxAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="taxAmount" label="税额" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.isSet">
							<el-input size="mini" placeholder="请输入内容" v-model="listLive.sel.taxAmount">
							</el-input>
						</span>
						<span v-else>{{scope.row.taxAmount}}</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,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>
						<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="dialogVisibleAccommod" width="800px">
			<el-row>
				<el-col :span="10">
					<div class="tree-container" style="width: 300px; padding-right: 50px;">
						<el-tree v-loading="loadingAccommod" :data="dataAccommod" :props="defaultPropsAccommod" 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="DialogTableDataAccommod" 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="handleAccommodSave" style="width: 200px;">确定</el-button>
			<el-button @click="handleCancelSave" style="width: 200px;margin-left: 330px;">取消</el-button>
		</el-dialog>

		<el-dialog title="添加图片" :visible.sync="dialogAccommodPic" 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="dialogAccommodImg">
				<img width="100%" :src="dialogAccommodImageUrl" 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",
				optionsTaxRate: [{
					value: '3',
					label: '3%'
				}, {
					value: '6',
					label: '6%'
				}, {
					value: '10',
					label: '10%'
				}, {
					value: '11',
					label: '11%'
				}, {
					value: '16',
					label: '16%'
				}, {
					value: '17',
					label: '17%'
				}],
				optionsType: [{
					value: '专票',
					label: '专票'
				}, {
					value: '普票',
					label: '普票'
				}],
				listLive: {
					sel: null, //选中行 
					tableData: [],
				},
				dataAccommod: [],
				defaultPropsAccommod: {
					children: 'children',
					label: 'text'
				},
				isShow: false,
				deptId: '',
				deptName: '',
				addName: '',
				primaryKeyId: '',
				DialogTableDataAccommod: [],
				dialogVisibleAccommod: false,
				loadingAccommod: true,
				typeShow: false,
				dialogAccommodPic: false,
				dialogAccommodImageUrl: '',
				dialogAccommodImg: false,
			}
		},
		mounted() {
			this.getDataAccommod()
		},
		methods: {
			typeChange(row) {
				if (row === '普票') {
					this.typeShow = true
					this.listLive.sel.taxRate = null
				} else {
					this.typeShow = false
				}
			},
			renderHeader(h, params) {
				let a = [h('el-button', {
					props: {
						size: "mini",
						type: "success",
						icon: "el-icon-plus",
						circle: "true",
					},
					on: {
						click: () => {
							this.getByAccommodPrimaryKeyId();
						}
					}
				})];
				return h('div', a)
			},
			getByAccommodPrimaryKeyId() {
				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.getByAccommodPrimaryKeyId()
				for (let i of this.listLive.tableData) {
					if (i.isSet) 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": true
				};
				this.listLive.tableData.push(j);
				this.listLive.sel = JSON.parse(JSON.stringify(j));
			},
			//修改
			pwdChange(row, index, cg) {
				//点击修改 判断是否已经保存所有操作
				for (let i of this.listLive.tableData) {
					if (i.isSet && i.id != row.id) {
						this.$message.warning("请先保存当前编辑项");
						return false;
					}
				}
				//是否是取消操作
				if (!cg) {
					if (!this.listLive.sel.id) this.listLive.tableData.splice(index, 1);
					return row.isSet = !row.isSet;
				}
				//提交数据
				if (row.isSet) {
					//项目是模拟请求操作  自己修改下
					let data = this.listLive.sel;
					for (let k in data) row[k] = data[k];
					this.$message({
						type: 'success',
						message: "保存成功!"
					});
					//然后这边重新读取表格数据
					console.log(data)
					console.log(typeof data)
					row.isSet = false;
				} else {
					this.listLive.sel = row;
					row.isSet = true;
				}
			},
			// 			click(){
			// 					this.$emit("childAccommod",this.accommodSubAmount.tableData)
			// 			},			
			handleQuery(val) {
				this.dialogVisibleAccommod = true
				this.getDataAccommod()
			},

			getDataAccommod() {
				//console.log("获取table数据getDataTree")
				var url = 'SysDepartment/queryTree.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.dataAccommod = response.data
					if (response) {
						this.loadingAccommod = false
					} else {
						this.loadingAccommod = true
					}
				});
			},
			getDialogTableDataAccommod() {
				//console.log("获取table数据getTableData")
				var url = '/SysUser/queryByDept.do'
				var param = {
					deptId: this.deptId,
				}
				axios.get(url, param).then(response => {
					this.DialogTableDataAccommod = response.data.data
					if (response) {
						this.loadingAccommod = false
					} else {
						this.loadingAccommod = true
					}
				});
			},
			handleNodeClick(data) {
				this.deptId = data.id
				this.deptName = data.text
				this.getDialogTableDataAccommod()
			},
			handleDialogChange(data) {
				this.addName = data.userDesc
			},
			handleAccommodSave(row) {
				this.listLive.sel.travelUser = this.addName
				this.listLive.sel.travelDept = this.deptName
				this.dialogVisibleAccommod = false
			},
			handleCancelSave(row) {
				this.dialogVisibleAccommod = false
			},
			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()
					}

				})

			},
			handleRemove(file, fileList) {
				this.fileListTemp = fileList
			},
			handleChange(file, fileList) {
				this.fileListTemp = fileList
			},
			handlePictureCardPreview(file) {
				this.dialogAccommodImageUrl = file.url;
				this.dialogAccommodImg = true;
			},
			showUpload() {
				this.dialogAccommodPic = true
			}
		}
	}
</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> -->
