<template>
    <el-dialog title="签到情况" width="95%" v-model="dialogVisible" @close="closed">
        <section class="sectabls3">
            <MOSTY.Table :table-columns="columnTable" :tableData="dataTable" :tableloading="tableLoading"
                :isSelect="false" :isSort="true" style="width: 100%;">
                <template #state="{ row }">
                    <el-tag v-if="row.state == 'Y'" type="success" style="border:none">已签到</el-tag>
                    <el-tag v-else type="danger" style="border:none">未签到</el-tag>
                </template>
                <template #actions="{ row }">
                    <el-popconfirm title="你确定要签到吗？" v-if="row.state == 'W'" confirm-button-text="确定"
                        cancel-button-text="取消" @confirm="handleChange(row)">
                        <template #reference>
                            <el-link type="primary">签到</el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </MOSTY.Table>
        </section>
        <div class="fenye">
            <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
            </MOSTY.Pages>
        </div>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const props = defineProps({
    isAuth: Boolean,
    id: String,
});
const emits = defineEmits(["close"]);
const dialogVisible = ref(true);
const columnTable = ref([
    { title: '所属单位', prop: 'ssdwmc' },
    { title: '所属部门', prop: 'ssbmmc' },
    { title: '姓名', prop: 'username' },
    { title: '是否签到', prop: 'state', slot: true },
    { title: '签到时间', prop: 'addtime' },
    { title: "操作", prop: "actions", slot: true, fixed: 'right' }
])

const pageConfiger = reactive({
    pageSize: 20,
    pageCurrent: 1,
    total: 0
})
const dataTable = ref([])
const querySelect = reactive({
    pageCurrent: 1,
    pageSize: 20,
    aqxxId: props.id
})
const tableLoading = ref(false);
onMounted(() => {
    getDataList();
});
// 获取表格数据
const getDataList = () => {
    tableLoading.value = true;
    dataTable.value = []
    getApi(querySelect, `/mosty-jcgl/aqxx/getAqxxUserPage`).then((res) => {

        if (res) {
            dataTable.value = res.records;
            pageConfiger.total = res.total
        }
    }).finally(() => {
        tableLoading.value = false;
    });
};
// 关闭弹窗
const closed = () => {
    emits("close", true);
};
// 点击签到操作
const handleChange = (row) => {
    let { aqxxId, userid } = row
    tableLoading.value = true;
    postApi({}, `/mosty-jcgl/aqxx/pcSignIn/${aqxxId}/${userid}`).then((res) => {
        getDataList()
        ElMessage.success("签到成功");
    }).finally(() => {
        tableLoading.value = false;
    })
}
// 切换条数
const handleSizeChange = (val) => {
    pageConfiger.pageSize = val;
    querySelect.pageSize = val;
    getDataList();
};
// 切换分页
const handleCurrentChange = (val) => {
    pageConfiger.pageCurrent = val;
    querySelect.pageCurrent = val;
    getDataList();
};
</script>

<style lang="scss" scoped>
.sectabls3 {
    height: calc(100vh - 379px);
}
</style>
