<template>
	<div>
		<div class="updown">
			<el-form>
				<el-form-item label="重命名">
					<el-input v-model="form.param"></el-input>
				</el-form-item>
			</el-form>
			<el-upload class="upload-demo" ref="upload" action="123" :on-change="handleChange" :on-remove="handleRemove"
			 multiple :before-upload="beforeUpload" :auto-upload="false" :before-remove="beforeRemove">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				<el-button style="margin-left: 10px;" size="small" type="" @click="handleSearch">查询</el-button>
			</el-upload>
		</div>

		<div>
			<el-table v-loading="loading" :data="tableData" stripe border style="width: 99%;">
				<el-table-column v-for="item in tableProperty" :key="item.id" :prop="item.tableProp" :label="item.tableLabel"
				 :width="item.tableWidth" v-if="item.attr1==='0'">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleShowDownload(scope.row)">查看下载列表</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</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>
		</div>


		<el-dialog title="下载列表" :visible.sync="dialogVisible" width="800px">
			<el-table v-loading="loading" :data="tableDataPath" stripe border style="width: 99%;">
				<el-table-column v-for="item in tablePropertyPath" :key="item.id" :prop="item.tableProp" :label="item.tableLabel"
				 :width="item.tableWidth" v-if="item.attr1==='0'">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleDownload(scope.row)">下载</el-button>
						<el-button size="mini" type="danger" @click="handleDeletePath(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

	</div>
</template>
<script>
	import axios from '@/axios';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				serverName: state => state.app.serverName
			})
		},
		data() {
			return {
				form: {
					param: ''
				},
				fileListTemp: [],
				formData: new FormData(),

				tableData: [],
				tableProperty: [],
				tableDataPath: [],
				tablePropertyPath: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,

				dialogVisible: false,

			}
		},
		methods: {
			submitUpload() {
				for (let i = 0; i < this.fileListTemp.length; i++) {
					//var file = 'file' + i
					this.formData.append('param', this.form.param)
					this.formData.append('file', this.fileListTemp[i].raw)

				}
				axios.post('DevelopUpDown/uploadDemo.do', this.formData).then(response => {

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

				})

			},
			handleRemove(file, fileList) {
				this.fileListTemp = fileList
			},
			handleChange(file, fileList) {
				this.fileListTemp = fileList
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			// 查询按钮事件
			handleSearch() {
				this.getTableData()
			},
			// 查询按钮事件
			handleShowDownload(row) {
				this.dialogVisible = true;
				this.getTableDataPath(row.id)
			},
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'DevelopUpDown/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total
					if (response) {
						this.loading = false

					} else {
						this.loading = true
					}
				});
			},
			getTableProperty() {
				//console.log("获取table数据getTableData")
				var url = 'CodeMachine/queryTableProperty.do'
				var param = {
					bussinessName: 'DEV_UPDOWN'
				}
				axios.get(url, param).then(response => {
					this.tableProperty = response.data
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				this.currentPage = val
				this.getTableData()
			},
			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'DevelopUpDown/remove.do'
					var param = {
						id: id,
						userId: sessionStorage.getItem('userId'),
					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

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

					var url = 'DevelopUpDown/removePaths.do'
					var param = {
						id: row.id,
						userId: sessionStorage.getItem('userId'),
					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableDataPath(row.fid)
						} else {
							this.$message({
								type: 'error',
								message: '删除失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			getTableDataPath(id) {
				console.log("getTableDataPath" + id)
				var url = 'DevelopUpDown/queryPaths.do'
				var param = {
					id: id,
				}
				axios.get(url, param).then(response => {
					this.tableDataPath = response.data
					//this.totalRows = response.data.total
					if (response) {
						this.loading = false

					} else {
						this.loading = true
					}
				});
			},
			getTablePropertyPath() {
				//console.log("获取table数据getTableData")
				var url = 'CodeMachine/queryTableProperty.do'
				var param = {
					bussinessName: 'DEV_UPDOWN_PATHS'
				}
				axios.get(url, param).then(response => {
					this.tablePropertyPath = response.data
				});
			},

			handleDownload(row) {
				var id = row.id;
				location.href =  this.serverName+"/DevelopUpDown/download.do?id=" + id;
			},
		},
		mounted() {
			this.getTableProperty()
			this.getTableData()
			this.getTablePropertyPath()
		}
	}
</script>
<style>
	.updown {
		width: 500px;
	}
</style>
