<template>
    <div>
        <el-dialog title="操作人员列表" width="1200px" :model-value="true" :before-close="closeDialog">
            <!-- <div class="head">
          <div></div>
        </div> -->
            <div class="config">
                <el-table stripe ref="refTable" @selection-change="handleSelectionChange" :data="tableData" border
                    :row-key="keyid" style="width: 100%">
                    <el-table-column type="selection" width="55" v-if="props.type != 'view'" />
                    <el-table-column label="姓名" property="tcperson"></el-table-column>
                    <el-table-column label="操作类型名称" property="zstype">
                        <template #default="{ row }">
                            <dict-tag :options="D_TB_ZSLB" :value="row.zstype" :tag="false" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作证编号" property="tcno"></el-table-column>
                    <el-table-column label="证件附件">
                        <template #default="{ row }">
                            <span class="operedown" v-if="row.files" @click="doPreviewqd(row)"><el-icon>
                                    <Search />
                                </el-icon>预览</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="fenye">
                    <el-pagination class="pagination" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="listQuery.pageCurrent"
                        :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                        layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">

                    <el-button type="primary" @click="onComfirm"> <el-icon>
                            <DocumentChecked />
                        </el-icon>
                        <span>确定</span></el-button>
                    <el-button @click="closeDialog" type="primary"> <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span></el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <!-- 预览 -->
    <el-dialog v-model="flyldialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
        top="10px" bottom="10px" width="1120px">
        <div style="height: 84vh; text-align: center">
            <Kkfile :files="fileid" @changedialog="changedialog" />
        </div>
    </el-dialog>
</template>

<script setup>
// 引入
import {
    ref,
    onMounted,
    getCurrentInstance,
} from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
const ridioIndex = ref(null);
const { proxy } = getCurrentInstance();
// 数据
const { D_TB_ZSLB } = proxy.$dict("D_TB_ZSLB");
const emits = defineEmits(["changeClose", "changeSelectData"]);
const props = defineProps({
    // 选择
    obj: {
        type: Object,
        default: () => { }
    },
    type: {
        type: String,
        default: ''
    }
});
const tableData = ref(null)
const total = ref(0)
const fileid = ref('')
const flyldialog = ref(false)
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 5,
    tcporgid: props.obj.deptcode,
})
const refTable = ref(null);
const selected = ref([]);
//获取详情
onMounted(() => {
    getTableData()
});
//   预览
const doPreviewqd = (row) => {
    fileid.value = row.files;
    flyldialog.value = true
}
// 保存提交
const onComfirm = () => {
    let _ids = []
    selected.value.forEach(item => {
        _ids.push(item.id)
    })
    postApi({ tzsbId: props.obj.id, certificateIds: _ids }, "/mosty-jcgl/sbglTzsb/saveTzsbOperatorInfo").then((res) => {
        if (res) {
            ElMessage({
                message: "新增成功",
                type: "success"
            });
            emits("changeSelectData");
            refTable.value.clearSelection();
            closeDialog()
        }
    });

};
const keyid = (row) => {
    return row.id;
};
// 选中一行
const handleSelectionChange = (val) => {
    selected.value = val;
};

// 获取特种设备操作列表obj
const getTableData = () => {
    getApi(listQuery.value, "/mosty-jcgl/tcertificate/getCertificatePageList").then(async (res) => {
        if (res) {
            total.value = res.total
            tableData.value = res.records
        }
    });
}
//页码发生变化
const handleCurrentChange = (val) => {
    listQuery.value.pageCurrent = val;
    getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
    listQuery.value.pageSize = val;
    getTableData();
};
// 关闭×
const closeDialog = () => {
    emits("changeClose", false);
};
</script>

<style lang="scss" scoped>
.head {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
}

.config {
    height: 40vh;
    position: relative;

    .fenye {
        position: absolute;
        bottom: 0;
        text-align: right;
    }
}

::v-deep .el-form--inline {
    padding-left: 0 !important;
}

::v-deep .el-radio__label {
    display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
    display: none !important;
}

::v-deep .el-table__cell {
    // 解决el-image 和 el-table冲突层级冲突问题
    position: static !important;
}
</style>