<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 type = ref('A');
const projType = ref(0);

const add = () => {
    // router.push({ path: "/fwzx/proj/input" });
}

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: "first_col", width: 80, sortable: false },
        { title: "事项", key: "projName", sortable: false },
        { title: "状态", key: "state",width: 100, sortable: false },
    ]
})

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

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


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


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

</script>
<template>
    <div>
        <div class="d-flex justify-space-between">
            <VtkBreadcrumb :items="breadcrumbItems" class="pt-0" :show-back="false" />
            <div><v-btn @click="add" color="primary"><v-icon>mdi-plus</v-icon>新增</v-btn></div>
        </div>
        <v-card elevation="0">
            <v-card-title 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">
                    <vtk-select @change="searchQuery" v-model="queryParam.state0" placeholder="上级状态" list="0:未发布/1:已发布"
                        density="compact" variant="outlined" clearable hide-details></vtk-select>
                    <vtk-select @change="searchQuery" class="mt-3" v-model="queryParam.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="queryParam.projType" placeholder="服务类型"
                        list="A:公共服务/B:政策服务/C:社会服务" density="compact" variant="outlined" clearable
                        hide-details></vtk-select>
                </vtk-search>
            </v-card-title>
            <v-divider class="mt-2 mx-4"></v-divider>
			<v-card-text class="pt-0">
                <v-data-table :headers="headers" :items="desserts" :loading="loading" disable-pagination
                    :items-per-page="pageData.limit" loading-text="数据加载中..." class="elevation-0" hide-default-footer>
                    <template v-slot:[`item.first_col`]="{ item }">
                        <v-avatar class="mt-n1 rounded imgBg" size="64">
                            <v-img :src="item.projIcon || defaultAvatar" :alt="item.name || '项目图标'">
                                <template v-slot:error>
                                    <v-img :src="defaultAvatar" cover />
                                </template>
                            </v-img>
                        </v-avatar>
                    </template>
                    <template v-slot:[`item.projName`]="{ item }">
                        <div @click="$router.push({ path: '/fwzx/proj/view', query: { projId: item.id } })"
                            class="py-3" style="cursor: pointer;">
                            <span :title="item.projName" class="text-body-1 font-weight-bold" style="cursor: pointer;">
                                <v-chip class="ml-1"
                                    :class="dict(item.areaLeve, '1:bg-green-lighten-5  text-green/2:bg-blue-lighten-5  text-blue/4:bg-cyan-lighten-5  text-cyan/6:bg-orange-lighten-5  text-orange')"
                                    size="small" label>
                                    {{ dict(item.areaLeve, "0:国家/2:省级/4:市级/6:区县") }}
                                </v-chip>
                                <v-chip class="ml-2 text-blue"
                                    :class="dict(item.projType, 'A:bg-green-lighten-5  text-green/B:blue:bg-blue-lighten-5  text-blue/C:bg-cyan-lighten-5  text-cyan')"
                                    size="small" label>
                                    {{ dict(item.projType, "A:公共服务/B:政策服务/C:社会服务") }}
                                </v-chip>
                                {{ item.projName }}
                            </span>
                            <v-row class="py-2" style="color: #979797c2">
                                <v-col style="max-width: 300px">行政区划：{{ item.areaName }}</v-col>
                                <v-col>事项编码：{{ item.projCode }}</v-col>
                            </v-row>
                            <span :title="item.name" class="d-block text-truncate"
                                style="color: #979797c2; ">概要说明：{{ item.projNote }}</span>
                        </div>
                    </template>
                    <template v-slot:[`item.state`]="{ item }">
                        <v-chip v-if="item.state0"
                            :class="dict(item.state0, '0:text-white bg-red/1:text-white bg-green')" size="small">上级{{
                                dict(item.state0, "0:未发布/1:已发布") }}</v-chip>
                        <v-chip :class="dict(item.state, '0:text-white bg-red/1:text-white bg-green')" class="mt-3"
                            size="small">本级{{ dict(item.state, "0:未上线/1:已上线") }}</v-chip>
                    </template>

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

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

<style scoped></style>