<template>
    <div>
        <MOSTY.PageTree :pageTitle="'培训上报'" :isShowLeftTree="false">
            <template #serach>
                <el-divider />
                <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
            </template>
            <template #table>
                <section class="eltab7">
                    <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
                        :isSelect="false" style="width: 100%;">
                        <template #type="{ row }">
                            <dict-tag :options="D_TB_PXJHLX" :value="row.type" :tag="false" />
                        </template>
                        <template #state="{ row }">
                            <dict-tag :options="D_TB_PXZT" :value="row.state" :tag="false" />
                        </template>
                        <template #actions="{ row }">
                            <span class="operesee" @click="handleChange(row, 'see')"><el-icon>
                                    <Compass />
                                </el-icon>详情</span>
                        </template>
                    </MOSTY.Table>
                </section>
                <div class="fenye">
                    <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange"
                        @changeNo="handleCurrentChange">
                    </MOSTY.Pages>
                </div>
            </template>
        </MOSTY.PageTree>
    </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, watch } from "vue";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const { D_TB_PXZT, D_TB_PXJHLX } = proxy.$dict("D_TB_PXZT", 'D_TB_PXJHLX');
const router = useRouter()
const tableData = ref([]);
const tableloading = ref(false)
const searchArr = reactive([
    {
        showType: "select",
        prop: "year",
        width: '250px',
        defaultVal: new Date().getFullYear().toString(),
        options: filterYear(7),
    }
]);
const tableColumn = ref([
    {
        title: "开始时间",
        prop: "startDate",
        sortable: true
    },
    {
        title: "结束时间",
        prop: "finshDate",
        sortable: true,
    },
    {
        title: "培训项目",
        prop: "planName",
        sortable: true,
    },
    {
        title: "负责人",
        prop: "planChargePersonName",
        sortable: true,
    },
    {
        title: "联系人",
        prop: "contactorName",
        sortable: true,
    },
    {
        title: "主办部门",
        prop: "planHostsDeptName",
        sortable: true,
    },
    {
        title: "计划类型",
        prop: "type",
        sortable: true,
        slot: true
    },
    {
        title: "状态",
        prop: "state",
        sortable: true,
        slot: true
    },
    {
        title: "操作",
        prop: "actions",
        slot: true
    }
])
const pageConfiger = reactive({
    pageSize: 20,
    pageCurrent: 1,
    total: 0
})
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 20,
    type: '1',
    state: "0201"
});

function onSearch(obj) {
    listQuery.value.year = obj.year
    pageConfiger.pageCurrent = 1;
    listQuery.value.pageCurrent = 1;
    getTableData();
}

//详情
function handleChange(row) {
    router.push({
        path: '/pxjhcoms/Trainingreport', query
            : {
            id: row.id
        }
    })
}

// 获取表格数据
const getTableData = () => {
    tableloading.value = true
    postApi(listQuery.value, "/mosty-jcgl/training/getListPxss").then((res) => {
        if (res.records) {
            tableloading.value = false;
            tableData.value = res.records;
            pageConfiger.total = res.total;
        }
    }).catch((err) => {
        tableData.value = []
        tableloading.value = false;
    }).finally(() => {
        tableloading.value = false;
    })
};


//页码发生变化
const handleCurrentChange = (val) => {
    pageConfiger.pageCurrent = val;
    listQuery.value.pageCurrent = val;
    getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
    pageConfiger.pageSize = val;
    listQuery.value.pageSize = val;
    getTableData();
};

onMounted(() => {
    getTableData();
});
</script>

<style lang="scss" scoped></style>