<template>
    <div>
        <!-- 查询 -->
        <div class='tabox'>
            <div class="headBox" v-if='props.isEdit'>
                <span style="color: red;line-height: 32px;">请上传pdf,ofd, doc, docx附件类型</span>
                <MOSTY.Upload :width="'100%'" :limit="1" :nopicer="true" :isImg="false" :ShowfileList="false"
                    v-model="fileid" :nameshow='false' :gsgfList="['docx', 'pdf', 'ofd', 'doc', 'pdf']"
                    @filehandleChange="changeFiles">
                </MOSTY.Upload>
            </div>
            <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :key="keys"
                :tableloading="tableloading" :tableHeight="'40vh'">
                <template #filename="{ row }">
                    <el-link style="color: var(--el-color-primary);" @click="onloagqdb(row)">{{ row.filename
                        }}</el-link>
                </template>
                <template #actions="{ row, $index }">
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                        @confirm="handledelete(row, $index)">
                        <template #reference>
                            <span class="operdel" size="small">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                                删除</span>
                        </template>
                    </el-popconfirm>
                </template>
            </MOSTY.Table>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
                    @changeSize="handleSizeChange" />
            </div>
        </div>
    </div>

</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { postApi, getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { createAndClickLink } from "@/utils/tools.js";
const fileid = ref(null)
const emits = defineEmits(["handleChange", 'searchChange']);
const props = defineProps({
    obj: {
        default: () => { },
        type: Object
    },
    // 是否可以编辑
    isEdit: {
        type: Boolean,
        default: true
    },
    filetype: {
        type: String,
        default: () => ''

    }
});
const tableloading = ref(false);
const keys = ref(0)
const pageData = reactive({
    listQuery: {
        pageCurrent: 1,
        pageSize: 5,
        relatedid: props.obj.id,
        type: props.filetype
    },
    pageConfiger: {
        pageSize: 5,
        pageCurrent: 1,
        total: 0
    },
    tableColumns: [
        {
            title: "上传人",
            prop: "username"
        },
        {
            title: "上传时间",
            prop: "addtime"
        },
        {
            title: "附件名称",
            prop: "filename",
            slot: true
        }
    ],
    tableData: []
})
const fileObj = ref({
    type: props.filetype,
    relatedid: props.obj.id,
    fileid: null,
    filename: null
})
onMounted(() => {
    if (!props.isEdit && pageData.tableColumns.at(-1).prop == 'actions') {
        pageData.tableColumns.pop()
        keys.value++
    } else {
        pageData.tableColumns.push({
            title: "操作",
            prop: "actions",
            slot: true
        })
        keys.value++
    }
    //获取子表
    getzblist()
});
function changeFiles(file) {
    fileObj.value.fileid = file[0].id
    fileObj.value.filename = file[0].name
    savefile()
}
//获取列表
function getzblist() {
    getApi(pageData.listQuery, '/mosty-jcgl/relatedAtta/getAttaPage').then(res => {
        pageData.tableData = res.records
            ? res.records : [];
        pageData.pageConfiger.total = res.total
    })
}
//删除
function handledelete(row) {
    postApi({}, `/mosty-jcgl/relatedAtta/del/${row.id}`).then(res => {
        ElMessage.success("删除成功");
        getzblist()
    })
}
//新增相关方人员
function savefile() {
    postApi(fileObj.value, '/mosty-jcgl/relatedAtta/add').then(res => {
        ElMessage.success("新增成功");
        fileid.value = null
        getzblist()
    }).finally(() => {
        fileid.value = null
    })
}
//下载
function onloagqdb(row) {
    getApi({}, `/mosty-base/minio/file/download/${row.fileid}`).then((res) => {
        if (res) {
            createAndClickLink(res.url, res.originalName)
        }
    });
}
//页码发生变化
const handleCurrentChange = (val) => {
    pageData.pageConfiger.pageCurrent = val;
    pageData.listQuery.pageCurrent = val;
    getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
    pageData.pageConfiger.pageSize = val;
    pageData.listQuery.pageSize = val;
    getzblist()
};
</script>

<style lang="scss" scoped>
.headBox {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-bottom: 10px;
}

.top_ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;

    >li {
        width: 15%;
        height: 83px;
        margin: 6px 32px;
    }
}
</style>