<template>
    <div>
        <MOSTY.PageTree :pageTitle="props.zbFrom.title" :searchType="'01'" @getDeptId="getDeptId">
            <template #serach>
                <el-divider />
                <div class="btnBox">
                    <el-button @click="handleAdd" type="primary">
                        <span>新增</span>
                    </el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                        @confirm="handleDelAll">
                        <template #reference>
                            <el-button type="danger">
                                <span>删除整天</span>
                            </el-button>
                        </template>
                    </el-popconfirm>

                    <el-button style="margin-left: 40px;" @click="handleClose" type="primary">
                        <span>关闭</span>
                    </el-button>
                </div>
            </template>
            <template #table>
                <section style="height: calc(100vh - 266px);">
                    <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
                        :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
                        <template #qdzt="{ row }">
                            <dict-tag :options="D_BZ_SF" :value="row.qdzt" :tag="false" />
                        </template>
                        <template #qdsj="{ row }">
                            <span>{{ row.qdsj ? row.qdsj : '--' }}</span>
                        </template>
                        <template #zbqk="{ row }">
                            <span>{{ row.zbqk ? row.zbqk : '--' }}</span>
                        </template>
                        <template #actions="{ row }">
                            <span class="operedit" @click="handleEdit(row)">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                编辑
                            </span>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red"
                                title="确定要删除?" @confirm="handleDel(row)">
                                <template #reference>
                                    <span class="operdel" size="small">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                        删除</span>
                                </template>
                            </el-popconfirm>
                            <span class="operesee" @click="handleSee(row)">
                                <el-icon>
                                    <Compass />
                                </el-icon>查看</span>
                        </template>
                    </MOSTY.Table>
                </section>
                <!-- <div class="fenye">
                    <MOSTY.Pages :pageConfiger="listQuery" @changeSize="handleSizeChange"
                        @changeNo="handleCurrentChange">
                    </MOSTY.Pages>
                </div> -->

            </template>
        </MOSTY.PageTree>
        <Edit v-if="isShowEdit" :id="currRowId" :isDetail="dialogIsDetail" :savebtn="isShowSavebtn" :title="dialogTitle"
            :zbFrom="props.zbFrom" :rowItem="rowItem" @closeDetail="closeDetail" @ok="dialogOk" />
    </div>
</template>

<script setup>
// 引入
import {
    ref,
    onMounted,
    defineProps,
    defineEmits,
    getCurrentInstance
} from "vue";
import { getItem } from "@/utils/storage";
import { timeValidate, weekValidate } from "@/utils/tools.js";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import Edit from "./components/edit.vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const tableloading = ref(false);
const emits = defineEmits(["changeclose"]);
const saveloading = ref(false);
const props = defineProps({
    zbFrom: Object,
    xqobj: Object
});
const tableData = ref([])
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 20,
    total: 0
});
const isShowEdit = ref(false);
const dialogTitle = ref("新增值班人员");
const currRowId = ref();
const isShowSavebtn = ref();
const dialogIsDetail = ref(false);
/** 当前选中行 */
const rowItem = ref({});
const tableColumn = ref([
    {
        title: "所属部门",
        prop: "deptname",
        sortable: true
    },
    {
        title: "值班人员姓名",
        prop: "username",
        sortable: true
    },
    // {
    //   title: "是否签到",
    //   prop: "qdzt",
    //   slot: true,
    //   sortable: true
    // },
    // {
    //   title: "签到时间",
    //   prop: "qdsj",
    //   slot: true,
    //   sortable: true
    // },
    // {
    //   title: "值班情况",
    //   prop: "zbqk",
    //   slot: true,
    //   sortable: true
    // }
    {
        title: "操作",
        prop: "actions",
        slot: true
    }
])
//获取详情
onMounted(() => {
    if (props.zbFrom.day) {
        listQuery.value.day = props.zbFrom.day
        listQuery.value.orgid = props.zbFrom.orgid
        getqdqkList()

    }
});
function search(val) {
    // listQuery.value.pageSize = val
    getqdqkList()
}
//排序
function SortChange(prop, order) {
    listQuery.value.sortField = prop
    listQuery.value.sortOrder = order
    getqdqkList()
}
//	某一日的签到情况
function getqdqkList(params) {
    tableloading.value = true

    getApi({ day: props.zbFrom.day,orgid: props.zbFrom.orgid }, `/mosty-jcgl/onDuty/getInfo`).then(res => {
        tableData.value = Array.isArray(res) ? res : []
        listQuery.value.total = res?.total || 0
    }).finally(() => {
        tableloading.value = false
    })
}
const handleAdd = () => {
    isShowEdit.value = true;
    dialogTitle.value = "新增值班人员";
    currRowId.value = "";
    isShowSavebtn.value = true;
    dialogIsDetail.value = false;
};
const handleDelAll = () => {
    postApi({}, `/mosty-jcgl/onDuty/del/${props.zbFrom.day}`).then(res => {
        ElMessage.success("整天值班记录删除成功");
        getqdqkList()
    }).finally(() => {
    })
}
// 修改
const handleEdit = (row) => {
    isShowEdit.value = true;
    dialogTitle.value = "修改值班人员";
    currRowId.value = row.id;
    rowItem.value = row;
    isShowSavebtn.value = true;
    dialogIsDetail.value = false;
};
// 修改
const handleSee = (row) => {
    isShowEdit.value = true;
    dialogTitle.value = "查看值班人员";
    currRowId.value = row.id;
    rowItem.value = row;
    isShowSavebtn.value = false;
    dialogIsDetail.value = true;
};
// 删除
const handleDel = (row) => {
    if (!row.id) return
    postApi({}, `/mosty-jcgl/onDuty/delById/${row.id}`).then(res => {
        ElMessage.success("删除成功");
        getqdqkList()
    }).finally(() => {
    })
};
/** 弹框关闭
 * @param isUpdate 是否更新列表
 */
const closeDetail = (isUpdate) => {
    isShowEdit.value = false;
    if (isUpdate) {
        getqdqkList()
    }
};
const dialogOk = (obj) => {
    isShowEdit.value = false;
};
// 关闭
const handleClose = () => {

    emits("changeclose", false);
};

function saveFrom(obj, url) {
    saveloading.value = true
    postApi(obj, url).then(res => {
        ElMessage.success("提交成功");
        let params = {
            id: props.Fromobj.rwid,
            sfyd: "1",
            clzt: "02"
        };
        postApi(params, "/mosty-jcgl/rw/updateRw")
            .then((res) => {
                emits("changeclose", false);
            });
    }).finally(() => {
        saveloading.value = false
    })
}
</script>

<style lang="scss" scoped>
.btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}
</style>
