<template>
	<div class="page">
		<el-card shadow="never">
			<div class="search">
				<el-form inline>
					<el-form-item>
						<el-input
							v-model="params.keyWord"
							style="width: 200px; margin-left: 20px"
							class="search-input"
							placeholder="请输入搜索关键字"
							@keyup.enter.native="getList(1)"
							clearable
						>
						</el-input>
						<el-button type="primary" class="ml10" @click="getList(1)">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							新增
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column prop="name" v-col="'name'" label="名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="ext01" v-col="'ext01'" label="说明" show-overflow-tooltip></el-table-column>
				<el-table-column prop="menuId" v-col="'menuId'" label="绑定菜单" width="100" align="center">
					<template #default="{ row }">
						<el-tag :type="row.menuId ? 'success' : 'info'" size="small">{{ row.menuId ? '已绑定' : '未绑定' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" v-col="'status'" label="发布状态" width="100" align="center">
					<template #default="{ row }">
						<el-tag :type="row.status ? 'success' : 'info'" size="small">{{ row.status ? '已发布' : '未发布' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createdAt" v-col="'createdAt'" label="创建时间" width="170" align="center"></el-table-column>
				<el-table-column prop="updatedAt" v-col="'updatedAt'" label="更新时间" width="170" align="center"></el-table-column>
				<el-table-column label="操作" width="280" align="center" v-col="'handle'">
					<template #default="scope">
						<el-button size="small" text type="primary" v-auth="'detail'" v-if="!scope.row.folderName" @click="view(scope.row)">预览</el-button>
						<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
						<el-button size="small" text type="warning" v-auth="'design'" @click="edit(scope.row)">设计</el-button>
						<el-button size="small" text type="success" v-auth="'edit_menu'" v-if="scope.row.menuId" @click="bindMenu(scope.row)">编辑菜单</el-button>
						<el-button size="small" text type="success" v-auth="'publish'" v-if="scope.row.status === 0" @click="publish(scope.row, 1)">发布</el-button>
						<el-button size="small" text type="info" v-auth="'cancel_publish'" v-if="scope.row.status === 1" @click="publish(scope.row, 0)">取消发布</el-button>
						<el-button size="small" text type="info" v-auth="'del'" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
			<EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
			<MenuForm ref="menuFormRef" @getList="getList(1)"></MenuForm>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import api from '/@/api/modules/designer'
import { useSearch } from '/@/hooks/useCommon'
import { ElMessageBox, ElMessage } from 'element-plus'
import EditForm from './edit.vue'
import MenuForm from './menu.vue'
import { ref } from 'vue'

const editFormRef = ref()
const menuFormRef = ref()

const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { keyWord: '' })

getList()

const view = (row: any) => {
	window.open('/designer/' + row.code)
}

const addOrEdit = async (row?: any) => {
	editFormRef.value.open(row)
}

const edit = (row: any) => {
	window.open(import.meta.env.VITE_DESIGN_URL + '#' + row.code, row.name, 'noopener')
}

const bindMenu = (row: any) => {
	menuFormRef.value.open(row)
}

const publish = (row: any, status: number) => {
	if (!row.menuId) {
		ElMessageBox.confirm('第一次发布需要绑定菜单，绑定之后自动发布成功', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			bindMenu(row)
		})
		return
	}
	ElMessageBox.confirm(`此操作将${status === 1 ? '发布' : '取消发布'}：“${row.name}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		await api.publish({ id: row.id, status})
		ElMessage.success(`${status === 1 ? '发布' : '取消发布'}成功`)
		getList(1)
	})
}

const del = (row: any) => {
	ElMessageBox.confirm(`此操作将删除：“${row.name}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		await api.del(row.id)
		ElMessage.success('删除成功')
		getList(1)
	})
}
</script>
