<!--framework-->
<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :model="query" label-position="right" label-width="80px" :inline="true">
				<el-form-item label="版本名" class="no-show-error-message">
					<el-input v-model="query.name" size="small" clearable style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="版本号" class="no-show-error-message">
					<el-input v-model="query.code" size="small" clearable style="width: 200px;"></el-input>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-button type="success" @click="handleSearch">查询</el-button>
			<el-button type="success" @click="handleAdd">新增</el-button>
		</el-card>


		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row>

				<el-table-column v-for="item in cols" :key="item.id" :prop="item.prop" :label="item.label"
					:width="item.width" show-overflow-tooltip :header-align="item.headerAlign" :align="item.align"
					:sortable="item.sortable=='1'" class-name="canDrag" :formatter="formatter">
				</el-table-column>
				<el-table-column label="操作" header-align="center" align="center" width="320px" fixed="right">
					<template #default="scope">
						<el-button size="small" plain type="info" @click="handleAttachment(scope.row)">上传</el-button>
						<el-button size="small" plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="small" plain type="danger" @click="handleRemove(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" background layout="total, sizes, prev, pager, next" :total="totalRows">
			</el-pagination>
		</el-card>
		<el-dialog title="上传apk" v-model="dialogVisibleUpload" width="1000px" :close-on-click-modal="false"
			v-dialogDrag>
			<el-card :body-style="cardBodyStyle">
				<!-- 				<el-upload action="" :on-change="handleChange" :on-remove="handleFileRemove" ref="uploadRef"
					:auto-upload="false" :before-remove="beforeRemove" multiple>
					 -->
				<el-upload ref="uploadRef" class="upload-demo" v-model:file-list="fileListTemp" :data="formData"
					:action="uploadAction" :auto-upload="false" :on-success="uploadSuccess" :on-error="uploadError"> 
					<template #trigger>
						<el-button type="primary">选择文件</el-button>
					</template>
					<el-button type="success" @click="handleUpload">上传</el-button>
				</el-upload>
			</el-card>
		</el-dialog>
		<el-dialog title="操作" v-model="dialogVisible" width="500px" :close-on-click-modal="false" v-dialogDrag>
			<el-form :model="form" label-position="right" label-width="80px" :inline="true">
				<el-form-item label="版本名" prop="name">
					<el-input v-model="form.name" size="small" style="width: 200px; "></el-input>
				</el-form-item>
				<el-form-item label="版本号" prop="code">
					<el-input v-model="form.code" size="small" style="width: 200px;"></el-input>
				</el-form-item>
				<el-form-item label="启用标志" prop="useFlag">
					<el-switch v-model="form.useFlag" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
						inactive-value="0" size="small" style="width: 200px;">
					</el-switch>
				</el-form-item>
				<el-form-item label="更新内容" prop="detail">
					<el-input v-model="form.detail" size="small" style="width: 300px;" type="textarea"
						:rows="2"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="memo">
					<el-input v-model="form.memo" size="small" style="width: 300px;" type="textarea"
						:rows="2"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="()=>dialogVisible=false">取消</el-button>
					<el-button type="success" @click="handleSave ">保存</el-button>
				</div>
			</template>
		</el-dialog>


	</div>
</template>

<script setup>
	import ButtonBar from '@/components/ButtonBar.vue'
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	onMounted(() => {

	})

	const cols = ref([{
			prop: 'id',
			label: '主键'
		},
		{
			prop: 'name',
			label: '版本名'
		},
		{
			prop: 'code',
			label: '版本号'
		},
		{
			prop: 'useFlag',
			label: '启用'
		},
		{
			prop: 'detail',
			label: '明细'
		}

	])

	const query = ref({
		name: '',
		code: ''
	})


	const form = ref({
		name: '',
		code: '',
		detail: '',
		memo: '',
		useFlag: '',
		id: '',
		processInstanceId: '',
		processInstanceStatus: '',
		addId: '',
		addCode: '',
		addName: '',
		addDeptCode: '',
		addDeptName: '',
		addTime: '',
		modifyId: '',
		modifyCode: '',
		modifyName: '',
		modifyTime: '',
		cancelId: '',
		cancelCode: '',
		cancelName: '',
		cancelTime: '',
		cancelFlag: '',
		belongId: '',
	})

	const formData = ref({})

	const disabled = ref(false)
	const dialogVisible = ref(false)
	const fId = ref('')
	const selectedRow = ref({})

	const fileListTemp = ref([])
	const handleChange = (file, fileList) => {
		fileListTemp.value = fileList
	}
	const handleFileRemove = (file, fileList) => {
		fileListTemp.value = fileList
	}
	const beforeRemove = (file, fileList) => {
		return $confirm(`确定移除 ${ file.name }？`);
	}

	const uploadRef = ref(null)
	const uploadAction = ref('')
	const handleUpload = () => {
		uploadAction.value = import.meta.env.VITE_BASE_API + '/framework/App/uploadAPK' 
		uploadRef.value.submit()

	}

	const uploadSuccess = () => {
		uploadRef.value.clearFiles() 
	}
	const uploadError = (error) => {
		ElMessage({
			type: 'error',
			message: '上传失败:' + error
		})
	}



	/**
	 *   查询
	 */

	const tableData = ref([])
	const handleSearch = () => {
		currentPage.value = 1
		getTableData()
	}

	const getTableData = () => {
		var url = 'framework/App/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			name: query.value.name,
			code: query.value.code,
		}
		var params = {
			params: JSON.stringify(param)
		}
		proxy.$axios.get(url, params).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询
	 */

	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页
	 */

	const handleAdd = () => {
		getNewVersion()
	}

	const getNewVersion = () => {
		var url = 'framework/App/queryNewCode'
		var params = {}
		var param = {
			params: JSON.stringify(params)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				dialogVisible.value = true
				disabled.value = false
				form.value = {
					id: '',
					name: (response.data.data + '').split('').join('.'),
					code: response.data.data,
					useFlag: '1',
					addId: localStorage.getItem('userId'),
					addCode: localStorage.getItem('userCode'),
					addName: localStorage.getItem('userName'),

				}
				// form.code = response.data.data
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})
	}

	const handleCancelSave = () => {
		dialogVisible.value = false
	}

	const handleSave = () => {
		var url = 'framework/App/save'
		var json = JSON.stringify(form.value)
		var param = {
			json: json
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage({
					type: 'success',
					message: '操作成功!',
				});
				getTableData()
				dialogVisible.value = false
			} else {
				ElMessage({
					type: 'error',
					message: '操作失败!' + response.data.msg
				});
			}
		})

	}
	const handleRemove = (row) => {

		if (row.useFlag == '1') {
			ElMessage({
				type: 'error',
				message: '该版本启用状态,不允许删除!'
			});
			return
		}

		$confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var url = 'framework/App/remove'
			var param = {
				id: row.id
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '操作成功!',
					});
					getTableData()
					dialogVisible.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			})
		})
	}

	const handleRemoveBatch = () => {
		if (multipleSelection.length < 1) {
			ElMessage({
				type: 'warning',
				message: '请选择要删除的数据!'
			})
			return
		}
		$confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var ids = []
			multipleSelection.forEach((item, index) => {
				ids.push(item.id)
			})
			var url = 'framework/Version/removeBatch'
			var param = {
				ids: ids
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '操作成功!',
					});
					getTableData()
					dialogVisible.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			})
		})
	}

	const handleEdit = (row) => {
		console.log(JSON.stringify(row))
		form.value = row
		dialogVisible.value = true
		disabled.value = true
	}


	const dialogVisibleUpload = ref(false)
	const handleAttachment = (row) => {

		formData.value.id = row.id
		formData.value.name = row.name
		formData.value.code = row.code


		dialogVisibleUpload.value = true
	}
</script>

<style>
</style>