<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-input   v-model="searchInfo.info"   placeholder="名称 / AppId"
						style="  margin: auto 20px;" />
				</el-form-item>
				<el-form-item>
					    <el-select
						clearable
						  placeholder="状态"
					      v-model="searchInfo.status"
					      style="width: 240px"
					    >
					      <el-option
					        label="关闭"
					        :value="0"
					      />
						  <el-option
						    label="正常"
						    :value="1"
						  />
					    </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="GetList()">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="AddClick()">添加</el-button>
				</el-form-item>
			</el-row>
		</div>
		<el-table border :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="80" />
			<el-table-column prop="app_name" label="名称" />
			<el-table-column prop="app_id" label="AppId" />
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag v-if="scope.row.status==1" class="ml-2" type="success">正常</el-tag>
					<el-tag v-if="scope.row.status==0" class="ml-2" type="danger">关闭</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" width="180" />
			<el-table-column prop="status" label="操作" width="180">
				<template #default="scope">
					<el-button type="primary" size="small" round @click="DoClick(scope.row)">操作</el-button>
					<el-button type="danger" size="small" round @click="Del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>
		<el-dialog v-model="dialogVisible" title="接入app信息" width="30%">
			<el-form :model="AppInfo" label-width="80px" v-loading="loading">

				<el-form-item label="App名称">
					<el-input v-model="AppInfo.app_name" />
				</el-form-item>
				<el-form-item label="AppID">
					<el-input v-model="AppInfo.app_id" />
				</el-form-item>
				<el-form-item label="状态">
					<el-switch :active-value="1" :inactive-value="0" v-model="AppInfo.status" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="Save">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		AppGetList,
		AppSave,AppDel
	} from '@/api/api.js'
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
let searchInfo = ref({
		status: null,
		info:''
	})
	//获取列表
	const GetList = () => {
		loading.value = true
		AppGetList({searchInfo:searchInfo.value}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data
			}
		})
	}
	let dialogVisible = ref(false);
	let AppInfo = ref({
		id: 0,
		app_name: '',
		app_id: '',
		status: 1,
	})
	//点击添加
	const AddClick = () => {
		dialogVisible.value = true
		AppInfo.value={
			id: 0,
			app_name: '',
			app_id: '',
			status: 1,
		}
		searchInfo.value={
			status: null,
			info:''
		}
	}
	const DoClick = (row) => {
		dialogVisible.value = true
		AppInfo.value=row
		
	}
	const Del = (id) => {
		ElMessageBox.confirm('确认删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				AppDel({
					id: id
				}).then(res => {
					loading.value = false
					if (res.status) {
						ElMessage({
							message: '操作成功',
							type: 'success',
						})
						GetList()
					} else {
						ElMessage.error(res.msg)
					}
				})
			})

	}
	const Save = () => {
		loading.value = true
		AppSave({
			info: AppInfo.value
		}).then(res => {
			loading.value = false
			dialogVisible.value = false
			if (res.status) {
				ElMessage({
					message: '修改成功',
					type: 'success',
				})
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		GetList()
	})
</script>

<style scoped>
	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>