<script setup>
import { ref, computed, reactive, onMounted, onActivated, watch, getCurrentInstance } from "vue";
import { getProjListData } from "@/api/mock.js";
import { useTableList } from "@/composables/useTableList.js";
import { useRouter, useRoute } from 'vue-router';
import defaultAvatar from "@/assets/img/avatar-1.png";  // 修改这行

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const dict = proxy.$vtk.filters.dict;
const date = proxy.$vtk.filters.date;
const user = JSON.parse(proxy.$vtk.storage.get("_mis_acis_users"));

const breadcrumbItems = [
	{ title: "首页", to: "#" },
	{ title: "服务事项" },
];

const projType = ref(0);

const add = () => {
	// router.push({ path: "/fwzx/proj/input" });
}
const type = ref('A');
const cataList = ref([
	{ bizType: "A", bizName: "全部" },
	{ bizType: "0", bizName: "残疾人证" },
	{ bizType: "1", bizName: "教育" },
	{ bizType: "2", bizName: "康复" },
	{ bizType: "3", bizName: "就业" },
])

// 使用 composable 管理列表
const {
	loading,
	desserts,
	queryParam,
	pageData,
	headers,
	loadPage,
	handlePageChange,
	handleSearch,
} = useTableList({
	fetchApi: getProjListData,
	defaultQuery: {
		areaLeve: null,
		bizType: null,
		areaCode: user?.areacode,
		condition: "",
	},
	headers: [
		{ title: "序", key: "index", width: 40 }, // 新增序号列
		{ title: "任务名称", key: "projName" },
		{ title: "状态", key: "state", width: 100 },
		{ title: "类型", key: "bizName", width: 100 },
		{ title: "创建时间", key: "btime", width: 150 },
		{ title: "操作", key: "actions", sortable: false, width: 160 },
	]
})

// 搜索查询
const searchQuery = () => {
	handleSearch()
};

const change = async (item) => {
	type.value = item.bizType;
	queryParam.value.bizType = item.bizType;
	searchQuery();
}

const viewItem = (item) => {
	selectedItem.value = item;
	dialogView.value = true;
};

const editItem = (item) => {
	console.log("编辑项目:", item);
};

const deleteItem = (item) => {
	console.log("删除项目:", item);
};

const handleStatusChange = async(id) => {
    proxy.$vtk.message.toast("操作成功", { color: 'success' })
}

onMounted(() => {
	// 初始化数据
	loadPage();
});


// 监听路由 query 参数变化，刷新列表
watch(() => route.query.refresh, (newVal) => {
	if (newVal) {
		loadPage();
	}
});

</script>
<template>
	<div class="config-page-shell px-4 px-md-4 d-flex flex-column pt-1">
		<div class=" d-flex justify-space-between ">
			<VtkBreadcrumb :items="breadcrumbItems" :show-back="false" />
		</div>
		<v-card rounded="xl" elevation="0" class="surface-card detail-card d-flex flex-column flex-grow-1 mt-0">
			<v-card-item class="px-4 pt-4 pb-2">
				<div class="d-flex align-center">
				<v-btn-toggle v-model="type" color="primary" density="compact">
					<v-btn v-for="(item, i) in cataList" :key="i" :value="item.bizType" @click="change(item)">
						{{ item.bizName }}
					</v-btn>
				</v-btn-toggle>
				<v-spacer />
				<vtk-search :value="queryParam" @update:value="(val) => queryParam = val" @search="searchQuery">
					<template #default="{ queryParam: searchForm }">
						<vtk-select @change="searchQuery" v-model="searchForm.state0" placeholder="上级状态" list="0:未发布/1:已发布"
							density="compact" variant="outlined" clearable hide-details></vtk-select>
						<vtk-select @change="searchQuery" class="mt-3" v-model="searchForm.state" placeholder="本级状态"
							:list="user.areacode && user.areacode.length > 4 ? '0:未上线/1:已上线' : '0:未发布/1:已发布'"
							density="compact" variant="outlined" clearable hide-details></vtk-select>
						<vtk-select @change="searchQuery" class="mt-3" v-model="searchForm.projType" placeholder="服务类型"
							list="A:公共服务/B:政策服务/C:社会服务" density="compact" variant="outlined" clearable
							hide-details></vtk-select>
					</template>
				</vtk-search>
        <v-btn @click="add" color="primary" class="ml-3">
						新增
					</v-btn>
				</div>
			</v-card-item>
			<v-divider class="mt-2 mx-4"></v-divider>
			<v-card-text class="table-scroll px-4 pb-0">
				<v-data-table :headers="headers" show-select :items="desserts" :loading="loading" disable-pagination
					:items-per-page="pageData.limit" loading-text="数据加载中..." class="elevation-0" hide-default-footer>
					<template v-slot:item.index="{ index }">
						{{ index + 1 }}
					</template>
					<template v-slot:item.btime="{ item }">
						{{ date(item.btime, "yyyy年MM月dd日") }}
					</template>
					<template v-slot:[`item.state`]="{ item }">
                        <v-switch  inset v-model="item.state" :loading="item.updating" color="primary" 
                            @change="handleStatusChange(item.id)" true-value="1" false-value="0" density="compact" hide-details></v-switch>
                    </template>
					<template v-slot:item.actions="{ item }">
						<v-btn variant="text"  color="primary" icon size="small" @click="viewItem(item)">
							查看
						</v-btn>
						<v-btn variant="text"  color="blue" icon size="small" @click="editItem(item)">
							编辑
						</v-btn>
						<v-btn variant="text" icon size="small" color="error" @click="deleteItem(item)">
							删除
						</v-btn>
					</template>

					<template v-slot:no-data>
						<VtkEmpty style="border: unset !important;" />
					</template>
				</v-data-table>

				<!-- 分页组件 -->
			</v-card-text>
			<div class="px-4 py-3">
				<vtk-page :page-data="pageData" :page-sizes="[10, 20, 50]" @page-change="handlePageChange" />
			</div>
		</v-card>
	</div>
</template>

<style scoped>
.config-page-shell {
  height: calc(100vh - 64px - 45px);
  padding-bottom: 12px !important;
  overflow: hidden;
}

.surface-card {
  border: 1px solid rgba(13, 37, 62, 0.06);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.04);
}

.detail-card {
  min-height: 0;
}

.table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 960px) {
  .config-page-shell {
    padding-bottom: 24px !important;
    overflow: visible;
  }
}
</style>
