<template>
    <div class="filterTable-container">
        <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%"
            size="small"
            height="100%"
            :header-cell-style="{ background: '#d9d9d9', color: '#2b2b2b', height: '41px' }"
        >
            <el-table-column prop="FloorName" align="center" label="楼层本地名" width="100"></el-table-column>
            <el-table-column prop="Version" label="版本号" align="center"></el-table-column>
            <!-- <el-table-column label="版本号">
                <template slot-scope="scope">
                    <span style="margin-right: 5px">{{ scope.row.Version }}</span>
                    <i
                        v-show="scope.row.Version && scope.row.Status === 4"
                        class="iconfont icon-warn"
                        style="cursor: pointer; position: relative; top: 1px"
                        title="查看版本更新信息"
                        @click="handleClickVersion(scope.row)"
                    ></i>
                </template>
            </el-table-column> -->
            <el-table-column prop="AcceptTime" label="时间" width="240" align="center"></el-table-column>
            <el-table-column prop="UserName" label="上传人"></el-table-column>
            <el-table-column prop="address" align="center" label="操作" width="240">
                <template slot-scope="scope">
                    <div class="operate" v-show="scope.row.Status === 4">
                        <el-button
                            title="下载模型"
                            type="primary"
                            size="mini"
                            class="el-icon-download"
                            @click="downloadModel(scope.row)"
                        ></el-button>
                        <el-button
                            title="替换模型"
                            type="primary"
                            size="mini"
                            class="el-icon-refresh"
                            @click="replaceModel(scope.row)"
                        ></el-button>
                        <el-button
                            title="查看版本日志"
                            type="primary"
                            size="mini"
                            class="el-icon-bank-card"
                            @click="queryModelLog(scope.row)"
                        ></el-button>
                        <el-button
                            title="下载BIMID模型"
                            type="primary"
                            size="mini"
                            class="el-icon-download"
                            @click="downloadModelBIMID(scope.row)"
                        ></el-button>
                    </div>
                    <div :class="['upLoad-loading']" v-show="scope.row.Status !== 4">
                        <div class="progress">
                            <el-progress
                                :text-inside="false"
                                :stroke-width="20"
                                :percentage="100"
                                :color="scope.row.Status ? '#909399' : '#67C23A'"
                            ></el-progress>
                        </div>
                        <div class="progress-right">
                            <span v-if="!scope.row.Status">上传中...</span>
                            <span v-else-if="scope.row.Status === 1">等待检查...</span>
                            <span v-else>模型检查中...</span>

                            <!-- <span v-show="!scope.row.Status">上传中...</span>
                            <span v-show="scope.row.Status == 1">等待检查...</span>
                            <span v-show="scope.row.Status == 10">模型检查中...</span>
                            <span v-show="scope.row.Status == 11">未通过检查</span>
                            <span v-show="scope.row.Status == 2 || scope.row.Status == 20">等待数据导出...</span>
                            <span v-show="scope.row.Status == 21">模型数据导出失败</span>
                            <span v-show="scope.row.Status == 3">处理导出数据中...</span>
                            <span v-show="scope.row.Status == 31">同步到数据中心失败</span> -->
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit, Ref } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import { ElTable } from "element-ui/types/table";
@Component({
    name: "FloorTable",
    components: {},
})
export default class extends Vue {
    @Prop({ default: [] }) private tableData!: any[];
    @Prop({ default: "" }) private modelFolderName!: string;

    @Ref("filterTable") readonly filterTable!: ElTable;

    private get projectId() {
        return UserModule.projectId;
    }

    /**
     * 查看日志
     */
    @Emit("openModelLog")
    private queryModelLog(item: any) {
        return item;
    }

    /**
     * 替换模型
     */
    private replaceModel(item: any) {
        if (item.Status !== 4) {
            this.$alert("正在识别模型对象，请稍后再替换。", "替换模型", { confirmButtonText: "确定" });
        } else {
            this.$emit("replaceModel", item);
        }
    }

    /**
     * 下载模型文件
     */
    private downloadModel(item: any) {
        let url = item.Url.match(/(\/image-service\S*)$/g) ? item.Url.match(/(\/image-service\S*)$/g)[0] : "";
        if (url) {
            let a = document.createElement("a");
            a.href = url;
            a.download = `${this.modelFolderName}${item.FloorName}模型文件v${item.Version}.rvt`;
            a.click();
            document.body.removeChild(a);
        } else {
            this.$message({
                message: "该文件夹下没有资源",
                type: "error",
            });
        }
    }

    /**
     * 下载BIMID模型文件
     */
    private downloadModelBIMID(item: any) {
        let url = item.Url.match(/(\/image-service\S*)$/g) ? item.Url.match(/(\/image-service\S*)$/g)[0] : "";
        if (url) {
            let a = document.createElement("a");
            a.href = url;
            a.download = `${this.projectId}${item.FolderId}${item.FloorName}.rvt`;
            a.click();
            document.body.removeChild(a);
        } else {
            this.$message({
                message: "该文件夹下没有资源",
                type: "error",
            });
        }
    }
}
</script>
<style scoped lang="scss">
.box-card {
    height: 100%;
    .filterTable-container {
        height: calc(100% - 51px);
    }
    .operate {
        .iconfont {
            font-size: 12px;
            padding: 7px 12px;
        }
    }
    .icon-termination {
        color: #f56c6c;
        background: #fff;
        padding: 0;
        border: 0;
        font-size: 20px;
        margin-left: 5px;
    }
    .upLoad {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px 0;
        .progress {
            // width: 150px;
            width: 175px;
            height: 20px;
        }
        .progress-right {
            height: 20px;
            line-height: 20px;
        }
    }
    .upLoad-loading {
        position: relative;
        justify-content: center;
        .progress {
            width: 220px;
            height: 20px;
        }
        .progress-right {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }
    }
}
::v-deep .el-icon-warning {
    display: none;
    // color: transparent;
}
::v-deep .el-progress__text {
    display: none;
}
::v-deep .upLoad-loading .el-progress-bar {
    padding-right: 44px;
    margin-right: -44px;
}
::v-deep .el-progress-bar__inner {
    text-align: center;
}
</style>