<template>
    <div class="page-container row-container">

        <section class="list-part-container" style="flex: 2">
            <!-- 搜索区域 -->
            <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item class="section-title" label="公共章管理" />

            </el-form>
            <!-- 列表区域 -->
            <div class="el-table-container">
                <div class="el-table-inner-container">
                    <el-table ref="equipmentTable" v-loading="loading" row-key="id" @row-click="handleRow" :data="sealList"
                        height="100%">
                        <el-table-column label="行号" type="index" width="80" align="center" />
                        <el-table-column label="名称" prop="code" align="center" />
                        <el-table-column label="印章" prop="url" align="center">
                            <template #default="scope">
                                <span>
                                    <el-image :initial-index="1" style="width: 60px; height: 60px;margin-right:8px"
                                        :src="webUrl + webHost + scope.row.url" :preview-src-list="scope.row.pictureList"
                                        :preview-teleported="true" />
                                </span>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="150" align="center">
                            <template #default="scope">
                                <el-upload :action="webHost + '/common/upload'" :headers="headers"
                                    :on-success="handleSuccess" :on-exceed="handleExceed" :before-upload="beforeUpload"
                                    :show-file-list="false">
                                    <el-button type="primary">替换
                                    </el-button>
                                </el-upload>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </section>
        <!-- 设备档案管理表单 -->
    </div>
</template>
  
<script setup name="Equipment">
import { listPublicSeal,addPublicSeal } from '@/api/business/personalSeal'
import { getToken } from '@/utils/auth'
const { proxy } = getCurrentInstance();

const webHost = import.meta.env.VITE_APP_BASE_API
const headers = { Authorization: getToken() }
/**字典数组 */
/** 设备档案管理 */
const selections = ref([]);
const equipmentTable = ref(null);
const total = ref(0);
const sealItem = ref({})
const sealList = ref([]);
const loading = ref(false);
const webUrl = ref("")
/** 设备档案 查询对象 */
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
});
const form = ref({})
const formLoading = ref(false)

/****************************************************  生命周期函数区  ****************************************************/
onMounted(() => {
    getList();
});
/****************************************************  方法区  ****************************************************/




/****************************** 设备档案 事件处理区 ******************************/


/** 获取设备档案列表 */
const getList = () => {
    form.value = {}
    listPublicSeal(queryParams.value).then(res => {
        if (res.code == 200) {
            webUrl.value = document.location.origin
            processImageUrl(res.rows);
            console.log(res.rows, 11)
            sealList.value = res.rows;
            if (sealList.value.length > 0) {
                handleRow(sealList.value[0])
            }
            total.value = res.total;
        }
    })

};

function processImageUrl(data) {
    console.log('processImageUrl')
    for (var i = 0; i < data.length; i++) {
        var item = data[i]
        var urlList = previewImageUrl(item.url)
        item.pictureList = urlList
    }
}
function previewImageUrl(url) {
    var urlList = []
    if (url) {

        var itemUrl = document.location.origin + webHost + url
        console.log(itemUrl)
        urlList.push(itemUrl)
    }
    return urlList
}

function handleRow(row) {
    sealItem.value = row
}
/**上传成功回调 */
function handleSuccess(row) {
    form.value.url = row.fileName
    form.value.id = sealItem.value.id
    form.value.code = sealItem.value.code
    addPublicSeal(form.value).then(res=>{
        if(res.code ==200){
            proxy.$modal.msgSuccess('替换成功');
            getList();
        }
    })

}
/** 文件上传前的 回调事件 */
function beforeUpload(file) {

    formLoading.value = true;
    const allowedTypes = ['image/jpeg', 'image/png']; // 添加或修改为图片的MIME类型
    const isAllowed = allowedTypes.includes(file.type);
    console.log(isAllowed)
    if (!isAllowed) {
        proxy.$modal.msgError('只能上传图片格式的文件!');
        formLoading.value = false;
        return false;
    }

}

/**文件数量超出的回调 */
function handleExceed(files) {
    form.value.url = files[0].url
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
    selections.value = selection;
}

</script>
<style scoped>
:deep(.el-tree-node__label) {
    font-size: 14px !important;
    display: inline-block;
    width: 100%;
}

:deep(.el-tree-node__content) {
    height: 40px;
    border-bottom: 1px solid #ebeef5;
    padding: 8px 0;
    line-height: 23px;
}

.move-handle {
    cursor: move;
    background-color: #eee;
}
</style>
  