<template>
    <awsui-layout>
        <awsui-header id="header">
            <el-steps :active="active" align-center>
                <el-step title="筛选条件" icon="el-icon-search"></el-step>
                <el-step title="替换规则" icon="el-icon-edit-outline"></el-step>
                <el-step title="执行结果" icon="el-icon-success"></el-step>
            </el-steps>
        </awsui-header>
        <awsui-main :style="{height: mainHeight, padding: '0'}">
            <!-- 筛选条件 用v-show，点击下一步再返回数据不会销毁 -->
            <div v-show="this.active == 1" class="step" :style="{height: mainHeight}">
                <condition-filter ref="conditionFilter"/>
            </div>
            <!-- 替换规则 -->
            <div v-if="this.active == 2" class="step" :style="{height: mainHeight}">
                <replace-rule ref="replaceRule" :condition-data="conditionData"/>
            </div>
            <!-- 执行结果 -->
            <div v-if="this.active == 3" class="step" :style="{height: mainHeight}">
                <save ref="save" :param="replaceRuleInfo" :totalHeight="mainHeight"/>
            </div>
        </awsui-main>
        <awsui-footer>
            <div style="float: right;">
                <awsui-button v-if="this.active == 2" style="margin-top: 12px;" @click="prev">上一步</awsui-button>
                <awsui-button v-if="this.active == 1 || this.active == 2" style="margin-top: 12px;" @click="next">下一步</awsui-button>
                <template v-if="this.active == 3">
                    <awsui-button style="margin-top: 12px;" @click="downloadLog">导出报告</awsui-button>
                    <awsui-button style="margin-top: 12px;" @click="success">完成</awsui-button>
                </template>
            </div>
        </awsui-footer>
    </awsui-layout>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import ConditionFilter from "./condition-filter";
    import ReplaceRule from "./replace-rule";
    import save from "./save";

    export default {
        name: "replace",
        components: {ConditionFilter, ReplaceRule, save},
        data() {
            return {
                active: 1,
                wsId: wsId,
                teamId: teamId,
                conditionData: {},// 第一步得到的结果值
                replaceRuleInfo: {},// 第二步得到的结果值
                methodCategory: methodCategory,
                appId: appId,
                repositoryName: repositoryName,
                groupValue: groupValue,
                processFileValue: processFileValue,
                shapeFileValue: shapeFileValue,
                mainHeight: (document.documentElement.clientHeight) - 60 - 40 + 'px',
                uploadStep: {
                    activeName: 'processList',
                    loading: false,
                    processUpload: {// 模型清单批量上传
                        status: 0,
                        fileList: [],// 组件上传列表
                        data: {},// 自定义数据展示数据源
                    },
                    shapeUpload: {// 模型结构批量上传
                        status: 0,
                        fileList: [],
                        data: {},
                        createTree : {
                            visible: false,
                            title: '请选择流程'
                        }
                    }
                },
                checkStep: {
                    type: ''
                },
                fileList: [],
                saveData: {// 待保存的数据
                    wsId: wsId,
                    teamId: teamId,
                    type: '',
                    fileValue: '',
                    fileName: '',
                    data: {
                        okData: []
                    }
                },



            };
        },
        mounted() {
            const that = this;
            that.resize();
        },
        methods: {
            prev() {// 上一步
                if (this.active == 2) {
                    this.checkStep.type = '';
                }
                this.active--;
            },
            next() {// 下一步
                if (this.active == 1) {// 上传文件页面点击下一页
                    const conditionFilter = this.$refs.conditionFilter.getResults();
                    if (conditionFilter.methodId == '') {
                        this.$message({message: '请选择文件类型', type: 'warning'});
                        return false;
                    }
                    this.conditionData = conditionFilter;
                } else if (this.active == 2) {
                    const replaceRuleInfo = this.$refs.replaceRule.getResults();
                    if (!replaceRuleInfo.isOk) {
                        this.$message({message: replaceRuleInfo.msg, type: 'warning'});
                        return false;
                    }
                    this.replaceRuleInfo = replaceRuleInfo;
                }
                this.active++;
            },
            success() {// 完成，关闭窗口
                parent.closeBatchReplaceFn([]);
            },
            downloadLog() {// 下载日志
                this.$refs.save.downloadLog();
            },
            checkUploadFile() {// 上传模板之后下一步
                if (this.uploadStep.activeName == 'processList') {
                    if (this.uploadStep.processUpload.status == 1) {
                        return true;
                    }
                } else if (this.uploadStep.activeName == 'shapeList') {
                    if (this.uploadStep.shapeUpload.status == 1) {
                        return true;
                    }
                }
                return false;
            },
            uploadFile(type) {// 上传模板
                if (type == 'process') {// 批量上传流程清单模板
                    this.$refs.processUpload.clearFiles();
                    document.getElementById("selectProcessFileButton").click();
                } else {// 模型结构清单模板
                    this.$refs.shapeUpload.clearFiles();
                    document.getElementById("selectShapeFileButton").click();
                }
            },
            downloadTemplate(type, versionIds) { // 下载模板
                const that = this;
                that.uploadStep.loading = true;
                const data = {
                    url:'jd',
                    data:{
                        cmd : "com.actionsoft.apps.coe.pal.batch_create_download_template",
                        wsId : that.wsId,
                        type : type,
                        versionIds : versionIds
                    }
                };
                awsuiAxios.post(data).then(function (ro) {
                    that.uploadStep.loading = false;
                    if (ro.result == 'ok') {
                        window.open(ro.data.url);
                    } else if (ro.result == 'warning') {
                        that.$message({message: ro.msg, type: 'warning'});
                    } else {
                        that.$message.error(ro.msg);
                    }

                }).catch(error=>{
                    console.log(error);
                })
            },
            downLoadUploaded(fileValue, name) {// 下载已经上传的
                const that = this;
                that.uploadStep.loading = true;
                const data = {
                    url:'jd',
                    data:{
                        cmd : "com.actionsoft.apps.coe.pal.batch_create_uploaded_file_download",
                        fileValue : fileValue,
                        fileName : name
                    }
                };
                awsuiAxios.post(data).then(function (ro) {
                    that.uploadStep.loading = false;
                    if (ro.result == 'ok') {
                        window.location.href = ro.data.url;
                    } else if (ro.result == 'warning') {
                        that.$message({message: ro.msg, type: 'warning'});
                    } else {
                        that.$message.error(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            deleteUploaded(fileValue, name) {// 删除已经上传的
                const that = this;
                that.uploadStep.loading = true;
                const data = {
                    url:'jd',
                    data:{
                        cmd : "com.actionsoft.apps.coe.pal.batch_create_uploaded_file_delete",
                        fileValue : fileValue,
                        fileName : name
                    }
                };
                awsuiAxios.post(data).then(function (ro) {
                    that.uploadStep.loading = false;
                    if (ro.result == 'ok') {
                        if (that.uploadStep.activeName == 'processList') {// 删除已上传流程清单模板
                            that.$refs.processUpload.clearFiles();
                            that.uploadStep.processUpload.status = 0;
                            that.uploadStep.processUpload.data = {};
                        } else {// 删除已上传模型结构清单模板
                            that.$refs.shapeUpload.clearFiles();
                            that.uploadStep.shapeUpload.status = 0;
                            that.uploadStep.shapeUpload.data = {};
                        }
                    } else if (ro.result == 'warning') {
                        that.$message({message: ro.msg, type: 'warning'});
                    } else {
                        that.$message.error(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            /******模型结构模板下载start*******/
            openRepositoryTreeDlg () {// 打开模型选择框
                this.uploadStep.shapeUpload.createTree.visible = true;
            },
            saveCreateTreeResult(data) {// 模型选择完成后，获取选中的数据
                if (data.length == 0) {
                    this.$message({message: '未选择任何模型，下载模板被取消', type: 'warning'});
                } else {
                    this.downloadTemplate('shapeList', data.join(','));
                }
            },
            /******模型结构模板下载end*******/
            /******模型清单模板上传start*********/
            handleProcessRemove(file, fileList) {
                this.uploadStep.processUpload.status = 0;
            },
            handleProcessPreview(file) {
            },
            handleProcessExceed(files, fileList) {
            },
            handleProcessError(err, file, fileList) {
            },
            beforeProcessUpload(file) {
                // 上传之前校验判断大小
                if (file.size / 1024 / 1024 > 10) {  //文件大于10M
                    this.$message.warning('文件不允许超过10M');
                    return false;
                }
            },
            handleProcessSuccess(response, file, fileList) {
                const that = this;
                that.uploadStep.processUpload.status = 1;
                that.uploadStep.processUpload.data = {
                    name: file.name,
                    size: file.size
                };
            },
            beforeProcessRemove(file, fileList) {
            },
            /******模型清单模板上传end*********/
            /******模型结构模板上传start*********/
            handleShapeRemove(file, fileList) {
                this.uploadStep.shapeUpload.status = 0;
            },
            handleShapePreview(file) {
            },
            handleShapeExceed(files, fileList) {
            },
            handleShapeError(err, file, fileList) {
            },
            beforeShapeUpload(file) {
                // 上传之前校验判断大小
                if (file.size / 1024 / 1024 > 10) {  //文件大于10M
                    this.$message.warning('文件不允许超过10M');
                    return false;
                }
            },
            handleShapeSuccess(response, file, fileList) {
                const that = this;
                that.uploadStep.shapeUpload.status = 1;
                that.uploadStep.shapeUpload.data = {
                    name: file.name,
                    size: file.size
                };

            },
            beforeShapeRemove(file, fileList) {
            },
            /******模型结构模板上传end*********/

            resize() {// 窗口监听window.resize
                const that = this
                let resizeTimer = null;
                window.onresize = () => {
                    return (() => {
                        if (resizeTimer) clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function(){
                            that.mainHeight = (document.documentElement.clientHeight) - 60 - 40 + 'px';
                        } , 400);
                    })()
                }
            },

        }
    }
</script>

<style scoped>
    #header >>> .el-step__title {
        font-size: 14px;
    }
    .step {
        overflow: auto;
        width: 100%;
    }

</style>