<template>
    <!-- 新增楼层文件 -->
    <div id="addFloorDialog">
        <el-dialog title="新增楼层" :visible.sync="addFloorFileVisible" width="900px" :before-close="handleClose">
            <el-form ref="addfloorform" :model="form" label-width="120px" style="overflow: hidden">
                <el-form-item label="模型文件:">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="/modelapi/model-file/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :auto-upload="false"
                        :on-change="onChangeUpLoad"
                        :limit="1"
                    >
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="revit版本:">
                    <el-select v-model="form.revitVersion" placeholder="请选择">
                        <el-option v-for="item in revitVersionList" :key="`revit-${item.value}`" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模型所属楼层:">
                    <div class="floorModle">
                        <el-select v-model="form.floorTypeVal" placeholder="请选择">
                            <el-option v-for="item in floorType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <!-- 计数 -->
                        <el-input-number
                            style="margin-left: 10px"
                            v-model="form.floorNum"
                            :min="1"
                            :disabled="form.floorTypeVal === 'RF'"
                        ></el-input-number>
                        <!-- 是否夹层 -->
                        <el-checkbox style="margin: 0 10px" v-model="form.haveInterlayer">是否夹层</el-checkbox>
                        <!-- 夹层选择 -->
                        <el-select v-model="form.interlayerTypeVal" :disabled="!form.haveInterlayer" placeholder="请选择">
                            <el-option v-for="item in interlayerType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="备注信息:">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </el-form-item>
            </el-form>
            <div style="float: right; margin-top: -10px; color: #aaaaaa">目前只可识别标准字典定义的设备、部件</div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit, Ref, Watch } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import { modelFileUpload } from "@/api/modelapi";
import { ElUpload } from "element-ui/types/upload";

@Component({
    name: "AddFloorDialog",
    components: {},
})
export default class extends Vue {
    @Prop() private addFloorFileVisible!: boolean;
    @Prop() private FolderName!: string;
    @Prop() private floorList!: any[];
    @Prop() private FolderId!: string;

    @Ref("upload") readonly upload!: ElUpload;

    /**
     * 关闭添加楼层模型文件弹窗
     */
    @Emit("closeAddFloorDia")
    handleClose() {
        return;
    }

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

    private get username(): string {
        return UserModule.username;
    }

    private get userId(): string {
        return UserModule.userId;
    }

    mounted() {
        this.fileList = [];
        this.form.file = null;
    }

    // 创建楼层信息
    private form: any = {
        desc: "", //描述
        revitVersion: "2017", //revit默认版本
        floorTypeVal: "F", //楼层类型得值
        interlayerTypeVal: "M1", //夹层类型得值
        haveInterlayer: false, //是否有夹层
        file: null, //上传文件
        floorNum: 1, //楼层
    };
    // 上传楼层列表
    private fileList = [];
    // revit版本选项
    private revitVersionList = [
        {
            value: "2016",
            label: "2016",
        },
        {
            value: "2017",
            label: "2017",
        },
        {
            value: "2018",
            label: "2018",
        },
    ];
    // 楼层类型
    private floorType = [
        {
            value: "F",
            label: "正常层(F)",
        },
        {
            value: "RF",
            label: "屋顶(RF)",
        },
        {
            value: "B",
            label: "地下(B)",
        },
    ];
    // 夹层类型
    interlayerType = [
        {
            value: "M1",
            label: "夹层M1",
        },
        {
            value: "M2",
            label: "夹层M2",
        },
        {
            value: "M3",
            label: "夹层M3",
        },
    ];

    /**
     * 提交表单创建楼层并发出上传指令
     */
    private async onSubmit() {
        if (this.form.file == null) {
            this.$message.error("模型文件不能为空！");
        } else if (!this.form.revitVersion) {
            this.$message.error("revit版本不能为空！");
        } else {
            let FloorName: string | null = null;
            // 根据是否有夹层拼接楼层名
            if (this.form.haveInterlayer) {
                if (this.form.floorTypeVal === "RF") {
                    FloorName = this.form.floorTypeVal + this.form.interlayerTypeVal;
                } else {
                    FloorName = this.form.floorTypeVal + this.form.floorNum + this.form.interlayerTypeVal;
                }
            } else {
                if (this.form.floorTypeVal === "RF") {
                    FloorName = this.form.floorTypeVal;
                } else {
                    FloorName = this.form.floorTypeVal + this.form.floorNum;
                }
            }
            let FloorObj = this.floorList.find((item) => {
                return item.FloorName == FloorName;
            });
            if (FloorObj && FloorObj.Status !== 0) {
                this.$message.error("该楼层名称已存在，请勿重复创建！");
            } else {
                let data = {
                    FileName: this.form.file.name,
                    FloorName: FloorName,
                    FolderId: this.FolderId,
                    RevitVersion: this.form.revitVersion,
                    Note: this.form.desc,
                    ProjectId: this.projectId,
                    ReplaceReason: null,
                    Size: this.form.file.size,
                    UserName: this.username,
                    UserId: this.userId,
                };
                const res = await modelFileUpload(data);
                //  创建成功
                if (res.ModelId && res.UploadId) {
                    this.$emit("uploadModelFile", {
                        modelId: res.ModelId,
                        uploadId: res.UploadId,
                        file: this.form.file,
                    });
                    this.handleClose();
                } else {
                    this.$message.info("准备分片上传模型文件接口失败！");
                }
            }
        }
    }

    /**
     * 上传到服务器
     */
    private submitUpload(FloorModelId: string) {
        console.log(FloorModelId);
        debugger;
        this.upload.submit();
    }

    /**
     * 文件列表移除文件时的钩子
     * @info 删除上传文件
     */
    private handleRemove() {
        this.fileList = [];
        this.form.file = null;
    }

    /**
     * 点击文件列表中已上传的文件时的钩子
     */
    private handlePreview(file: File, fileList: FileList) {
        console.log(file, fileList);
    }

    /**
     * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     * @info 获取上传文件
     */
    private onChangeUpLoad(file: File, fileList: FileList) {
        if (fileList.length) {
            this.form.file = file;
        }
    }

    @Watch("addFloorFileVisible")
    onVisibleChanged(val: boolean) {
        if (val) {
            this.handleRemove();
            this.form = {
                revitVersion: "2017", //revit默认版本
                desc: "", //描述
                floorTypeVal: "F", //楼层类型得值
                interlayerTypeVal: "M1", //夹层类型得值
                haveInterlayer: false, //是否有夹层
                file: null, //上传文件
                floorNum: 1, //楼层
            };
        }
    }
}
</script>
<style lang="scss">
#addFloorDialog {
    .floorModle {
        display: flex;
        justify-content: left;
    }
}
</style>
