<template>
    <el-dialog title="" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
        :before-close="handleClose" width="450px" center>
        <div class="auditDocumentDetail">
            <div class="header">
                <div class="file_icon">
                    <i class="name_folder" v-if="!rowData.AuditDocumentTypeEnum"></i>
                    <img v-else-if="['png', 'jpg', 'jpeg'].includes(rowData.FileFormat.toLowerCase())"
                        :src="OSSclientConfig.basePath + rowData.FilePath" alt="" class="name_image">
                    <i :class="`name_${rowData.FileFormat}`" v-else></i>
                </div>
                <div class="file_name">
                    <div class="name">
                        <span class="name-text">{{ rowData.Name }}</span>
                    </div>
                    <div class="desc">
                        <span class="size">{{ formatFileSize(rowData) }}</span>
                        <span v-if="rowData.AuditDocumentTypeEnum">, </span>
                        <span class="time">{{ rowData.UpdateTime }}</span>
                    </div>
                </div>
            </div>
            <div class="main">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="$t('trials:trials-workbench:auditDocument:detail:tabs:versions')"
                        name="versions" v-if="rowData.AuditDocumentTypeEnum === 1">
                        <div class="versions_top">
                            <div class="title">{{
                                $t('trials:trials-workbench:auditDocument:detail:title:historicalVersion') }}
                            </div>
                            <div class="btnBox">
                                <el-button icon="el-icon-refresh" circle size="small"
                                    @click.stop="getHistoricalVersion" />
                                <el-button icon="el-icon-upload2" plain size="small" @click.stop="openFile">{{
                                    $t('trials:trials-workbench:auditDocument:detail:title:uploadNewVersion')
                                }}</el-button>
                            </div>
                        </div>
                        <div class="versions_content" v-loading="loading">
                            <div class="item" v-for="item of versionList" :key="item.Id">
                                <div class="item_line">
                                    <div class="version current_version" v-if="item.IsCurrentVersion">
                                        <span>{{
                                            $t('trials:trials-workbench:auditDocument:detail:title:currentVersion')
                                            }}</span>
                                    </div>
                                    <div class="version" v-else>
                                        <span>v{{ item.Version }}</span>
                                    </div>
                                    <div class="mtime">{{ item.CreateTime }}</div>
                                    <div class="size">{{ formatFileSize(item) }}</div>
                                    <div class="add_desc" @click.stop="openMenu($event, item, 'c_version')"
                                        v-if="item.IsCurrentVersion">
                                        <i class="el-icon-more" />
                                    </div>
                                    <div class="add_desc" @click.stop="openMenu($event, item, 'version')" v-else>
                                        <i class="el-icon-more" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('trials:trials-workbench:auditDocument:detail:tabs:Stats')" name="Stats"
                        v-if="false">
                        <div class="p">
                            <div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:path') }}</div>
                            <div class="content">{shareItem:8}/周会/20250324-工作总结及后续工作.pptx</div>
                        </div>
                        <div class="p" v-if="!rowData.AuditDocumentTypeEnum">
                            <div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:contain') }}
                            </div>
                            <div class="content">4项 (2文件, 2文件夹)</div>
                        </div>
                        <div class="p" v-else>
                            <div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:size') }}</div>
                            <div class="content">{{ formatFileSize(rowData) }}</div>
                        </div>
                        <div class="p">
                            <div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:updateTime') }}
                            </div>
                            <div class="content">{{ rowData.UpdateTime }}</div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { getHistoricalVersion } from '@/api/trials'
export default {
    name: "auditDocumentDetail",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            activeName: 'versions',
            versionList: [],
            loading: false
        }
    },
    // mounted() {
    //     this.getHistoricalVersion()
    // },
    watch: {
        rowData: {
            handler() {
                this.getHistoricalVersion()
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        handleClick() { },
        openMenu(e, row, type) {
            this.$emit('openContextmenu', { e, row, type, zIndex: 3000 })
        },
        handleClose() {
            this.$emit("update:visible", false)
        },
        delAll() {
            let ids = []
            this.versionList.forEach(item => {
                if (!item.IsCurrentVersion) {
                    ids.push(item.Id)
                }
            })
            this.$emit('delData', ids)
        },
        // 获取历史版本
        async getHistoricalVersion() {
            if (!this.rowData || !this.rowData.Id) return false
            try {
                let data = {
                    Id: this.rowData.Id
                }
                this.loading = true
                let res = await getHistoricalVersion(data)
                this.loading = false
                if (res.IsSuccess) {
                    this.versionList = res.Result
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        openFile() {
            let faccept = `.${this.rowData.FileFormat}`
            this.$emit('openFileNewVersion', faccept)
        },
        // 格式化文件大小
        formatFileSize(row) {
            if (!row.FileSize) return ''
            if (row.FileSize < 1000) {
                return row.FileSize + "B"
            }
            if (row.FileSize < 1000 * 1024) {
                return (row.FileSize / 1024).toFixed(2) + "KB"
            }
            if (row.FileSize < 1000 * 1000 * 1024) {
                return (row.FileSize / 1000 / 1024).toFixed(2) + "MB"
            }
            if (row.FileSize < 1000 * 1000 * 1000 * 1024) {
                return (row.FileSize / 1000 / 1000 / 1024).toFixed(2) + "GB"
            }
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
    padding: 0;
}

::v-deep .el-dialog__body {
    padding: 20px 0;
}

::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
}

.auditDocumentDetail {
    .header {
        padding: 0 10px 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f6f8ff;

        .file_icon {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;

            i {
                display: inline-block;
                width: 100%;
                height: 100%;
                font-size: 42px;
                line-height: 60px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                border-radius: 5px;
                font-style: normal;
                pointer-events: none;
            }

            .name_image {
                max-width: 90%;
                max-height: 100%;

            }

            .name_pdf {
                background-image: url(@/assets/file_icon/pdf.png);
            }

            .name_docx {
                background-image: url(@/assets/file_icon/docx.png);
            }

            .name_doc {
                background-image: url(@/assets/file_icon/doc.png);
            }

            .name_zip {
                background-image: url(@/assets/file_icon/zip.png);
            }

            .name_pptx {
                background-image: url(@/assets/file_icon/pptx.png);
            }

            .name_ppt {
                background-image: url(@/assets/file_icon/ppt.png);
            }

            .name_xlsx {
                background-image: url(@/assets/file_icon/xlsx.png);
            }

            .name_xls {
                background-image: url(@/assets/file_icon/xls.png);
            }

            .name_folder {
                background-image: url(@/assets/file_icon/folder.png);
            }
        }

        .file_name {
            font-size: 14px;
            color: #666;
            word-break: break-word;
            display: table-cell;
            vertical-align: middle;
            max-height: 60px;
            line-height: 18px;
            margin-top: 7px;
            width: calc(100% - 170px);
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .name {
                max-height: 35px;
                width: 100%;
                line-height: 18px;
                overflow: hidden;
                text-overflow: ellipsis;

                .name-text {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
            }

            .desc {
                font-size: 13px;
                color: #aaa;
                padding-top: 1px;
                white-space: nowrap;
            }
        }
    }

    .main {
        padding: 10px;
        font-size: 14px;
        max-height: 500px;

        .p {
            width: 100%;
            display: flex;

            .title {
                color: #999;
                text-align: left;
                padding: 0;
                margin: 0;
                line-height: 25px;
                width: 27%;
                margin-right: 1%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .content {
                word-break: break-word;
                color: #444;
                width: 72%;
                margin: 0;
                padding: 5px 0 0 0;
                position: relative;
            }
        }

        .versions_top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            border-bottom: 1px solid #f3f3f3;
            margin-bottom: 10px;

            .title {
                width: 30%;
            }

            .btnBox {
                flex: 1 0 0%;
                text-align: right;
            }

        }

        .versions_content {
            max-height: calc(100% - 50px);

            .item {
                padding: 0;
                border: 1px solid #eee;
                margin-bottom: 4px;
                border-radius: 4px;
                position: relative;
                overflow: hidden;
                transition: all .2s;
                cursor: pointer;

                &:hover {
                    border-color: #91d5ff;
                }

                .item_line {
                    background: #fafafa;
                    padding: 5px 10px;
                    font-size: 12px;
                    overflow: hidden;
                    white-space: nowrap;
                    transition: all .2s;

                    &:hover {
                        background: #e6f7ff;
                        border-color: #e6f7ff;
                    }

                    .version {
                        display: inline-block;
                        margin-right: 5px;
                        width: auto;

                        span {
                            background: #22b66c;
                            border-color: #1c9458;
                            color: #fff;
                            padding: 3px 4px;
                            min-width: 25px;
                        }
                    }

                    .current_version {
                        span {
                            background: #1890ff;
                            border-color: #007cee;
                            color: #fff;
                        }
                    }

                    .mtime {
                        color: #999;
                        margin-right: 0;
                        line-height: 22px;
                        display: inline-block;
                    }

                    .size {
                        border-radius: 20px;
                        padding: 1px 1px 1px 5px;
                        font-size: 12px;
                        display: inline-block;
                        margin-right: 5px;
                    }

                    .add_desc {
                        position: absolute;
                        right: 5px;
                        top: 3px;
                        width: 25px;
                        height: 25px;
                        line-height: 25px;
                        color: #666;
                        background: #77777715;
                        border-radius: 2px;
                        text-align: center;
                        cursor: pointer;

                        &:hover {
                            background: #c3e2ff;
                            color: #1890ff;
                        }
                    }
                }
            }
        }
    }
}
</style>