<template>
    <div class="exportAlgorithmsPanel">
        <el-row>
            <el-col :span="16" :offset="4">
                <el-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    label-width="160px"
                >
                    <el-form-item label="算法名称:" prop="algorithmName">
                        <el-input
                            placeholder="请输入"
                            maxlength="60"
                            v-autoTrim="{ obj: form, key: 'algorithmName' }"
                            v-model="form.algorithmName"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="算法描述:" prop="description">
                        <el-input
                            placeholder="请输入"
                            maxlength="200"
                            v-autoTrim="{ obj: form, key: 'description' }"
                            v-model="form.description"
                        >
                        </el-input>
                    </el-form-item>

                    <el-form-item label="导入算法:" prop="minioPath">
                        <el-input
                            placeholder="请输入"
                            maxlength="200"
                            disabled
                            v-autoTrim="{ obj: form, key: 'minioPath' }"
                            v-model="form.minioPath"
                        >
                        </el-input>
                        <upload
                            class="upload"
                            ref="upload"
                            :limit="1"
                            type="algorithmFile"
                            :objectPath="objectPath"
                            :needInstance="true"
                            :uploadUrl="uploadUrl"
                            @attachmentChange="attachmentChange"
                            @willUpload="willUpload"
                            @didUpload="didUpload"
                        ></upload>
                    </el-form-item>
                </el-form>

                <div class="btns">
                    <el-button
                        v-if="form.share === '0' || form.share === ''"
                        type="primary"
                        @click="save(false)"
                        >保存</el-button
                    >
                    <el-button
                        v-if="form.share === '0' || form.share === '1'"
                        type="primary"
                        @click="save(true)"
                        >另存为</el-button
                    >
                    <el-button type="primary" plain @click="cancel"
                        >取消</el-button
                    >
                </div>
            </el-col>
        </el-row>

        <div class="progressBox" v-if="isUploading">
            <div class="progress">
                <el-progress
                    type="circle"
                    :width="120"
                    :percentage="percentage"
                    :color="customColor"
                ></el-progress>
            </div>
        </div>
    </div>
</template>

<script>
import upload from "@/components/upload/upload";
import { mapState } from "vuex";

export default {
    name: "exportAlgorithms", // 导入算法详情
    components: { upload },
    data() {
        return {
            form: {
                id: "",
                algorithmName: "", // 算法名称
                description: "", // 算法描述
                uploadMode: "1", // 方式
                minioPath: "", // 上传文件地址
                share: "",
            },
            rules: {
                algorithmName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                description: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                minioPath: [
                    { required: true, message: "请上传", trigger: "change" },
                ],
            },
            objectPath: "", // 用于上传文件的传参
            isUploading: false,
            uploadUrl: this.$api.common.uploadProcessBar,
            timer: "", // 用来接收进度条的定时器
            percentage: 0, // 进度条数据
            customColor: "", // 进度条颜色
        };
    },

    computed: {
        ...mapState(["themeColor"]),
    },

    methods: {
        attachmentChange(obj) {
            // console.log(obj);
            if (obj.length > 0) {
                this.form.minioPath = obj[0].fileName;
                this.$refs.form.clearValidate("minioPath");
            } else {
                this.form.minioPath = "";
            }
        },
        save(isAdd) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (isAdd) {
                        this.form.id = "";
                    }

                    this.$axios({
                        method: "post",
                        url: this.$api.algorithmsLibrary.addOrUpdate,
                        data: {
                            ...this.form,
                        },
                    }).then((res) => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.cancel();
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        cancel() {
            this.$router.replace({ path: "/algorithmsLibraryList" });
        },
        onProgress() {
            this.$axios({
                method: "post",
                url: this.$api.algorithmsLibrary.getProgress,
                data: {
                    objectPath: this.objectPath,
                },
            }).then((res) => {
                // console.log(res);
                if (res.code == 200 && res.info) {
                    console.log(res.info);
                    
                    if (this.percentage >= res.info * 100) {
                        if (this.percentage < 99) {
                            ++this.percentage;
                        }
                    } else {
                        this.percentage = res.info * 100;
                    }

                    this.percentage = Math.round(this.percentage);

                    if (this.percentage > 100) {
                        this.percentage = 100;
                    }

                    if (!this.isUploading) {
                        clearInterval(this.timer);
                        this.percentage = 0;
                    }
                } else {
                    this.$message.error(res.message || "获取进度信息失败");
                }
            });
        },
        willUpload() {
            this.isUploading = true;

            // let timer = setTimeout(() => {
            //     this.isUploading = true;
            //     this.onProgress();
            //     clearTimeout(timer);
            // }, 100);

            this.timer = setInterval(() => {
                this.onProgress();
                if (!this.isUploading) {
                    clearInterval(this.timer);
                    this.percentage = 0;
                }
            }, 3000);
        },
        didUpload(state) {
            this.isUploading = false;
            clearInterval(this.timer);
            this.percentage = 0;
        },
    },

    mounted() {
        this.objectPath = this.$getObjectPathByRandom();
        this.customColor = this.themeColor;

        let id = this.$route.query.id;
        if (id) {
            this.form.id = id;
            this.form.share = this.$route.query.share;

            this.$axios({
                method: "post",
                url: this.$api.algorithmsLibrary.selectDetailsById,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.form = res.info;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        }
    },
};
</script>

<style lang='less' scoped>
.exportAlgorithmsPanel {
    padding: 45px 30px 0;

    .el-form {
        /deep/ .el-input,
        .el-select {
            width: 100%;
        }
    }

    .testLinkPanel {
        margin-left: 160px;
    }

    .btns {
        padding-top: 90px;
        text-align: center;
    }

    .upload {
        margin-top: 15px;
    }

    .progressBox {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3000;
        background-color: rgba(0, 0, 0, 0.2);

        .progress {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 120px;
            margin-top: -60px;
            margin-left: -60px;
        }
    }
}
</style>