<template>
  <div class="main">
    <div class="bg">
        <div class="steps">
            <div :class="index==active?'step active':'step'" 
            v-for="(item,index) in tabList" :key="item">{{item}}</div>
        </div>
        <!-- 第一步 -->
        <div v-if="active==0">
            <div class="label">
                上传
            </div>
            <div class="line"></div>
            <div class="upload">
                <el-upload
                    ref="nowupload"
                    :limit="1"
                    accept=".zip,.tar.gz"
                    :headers="upload.headers"
                    :action="upload.url"
                    :disabled="upload.isUploading"
                    :on-progress="handleFileUploadProgress"
                    :on-success="handleFileSuccess"
                    :auto-upload="false"
                    :file-list="fileList"
                    drag
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <div class="el-upload_tip" style="color: red" slot="tip">
                    提示：仅允许导入“zip”或“.tar.gz”格式压缩文件！
                </div>
                </el-upload>
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="submitFileForm" :loading="loading">下一步</el-button>
        </div>
        <!-- 第二步 -->
        <div v-if="active==1">
            <div class="label">创建站点</div>
            <div class="line"></div>
            <div class="elinput">
                <el-input placeholder="请输入内容" v-model="siteName">
                    <template slot="prepend">站点名称</template>
                </el-input>
            </div>
            <div style="margin:20px 0;">
                <span style="font-size: 14px">
                    <b>当前选择区域:</b>
                    (<el-link 
                    style="margin-left: 10px;margin-bottom: 5px"
                    type="primary"
                    class="addclass"
                    :underline="false">
                        {{ areaName }}
                    </el-link>
                    区域编码：{{ areaCode }} )
                </span>
            </div>
            <div class="tree">
                <el-tree
                    size="mini"
                    ref="areaTree"
                    :data="areaData"
                    id="el-tree"
                    node-key="id"
                    indent="4"
                    :props="treeProps"
                    :load="loadNode"
                    lazy
                    highlight-current
                    :expand-on-click-node="false"
                    :render-content="renderContent"
                    @node-click="handleNodeClick"
                >
                </el-tree>
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="active=0">上一步</el-button>
            <el-button type="primary" @click="updateSiteConform" :loading="loading">下一步</el-button>
        </div>
        <!-- 第三步 -->
        <div v-if="active==2">
            <div class="label">完成</div>
            <div class="line"></div>
            <div class="wancheng">
                <div class="cgtext">
                    欢迎您，模块文件安装成功！站点已创建成功！
                </div>
                <div class="cgtext">
                    请点击下面的按钮进入选中网页进行操作！
                </div>
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="gotoMh">门户网站</el-button>
            <el-button type="primary" @click="gotoSet">项目部署管理</el-button>
        </div>

    </div>
  </div>
</template>

<script>
import tree from "@/assets/mixins/tree";
export default {
    mixins: [tree],
    data() {
        return{
              // 用户导入参数
              upload: {
                // 请求头
                headers:{
                  Authorization:''
                },
                // 是否显示弹出层（设备导入）
                open: false,
                // 弹出层标题（设备导入）
                title: "上传项目工程包",
                // 是否禁用上传
                isUploading: false,
                // 上传的地址
                url: "/m/setup/project/importProjectData",
              },
              areaName: "",
              areaCode: "",
              siteName:"",
              active:0,
              tabList:[
                "1、项目文件包导入",
                "2、创建站点",
                "3、完成"
              ],
              loading:false,
              fileList:[]
        }
    },
    watch:{
        fileList:{
            handler(newval){
                console.log(123,newval);
            },
            immediate:true,
            deep:true
        }
    },
    methods:{
        gotoMh(){
            window.location.href = process.env.VUE_APP_PORTAL_URL
        },
        gotoSet(){
            this.$router.push("/setup/project/list")
        },
        // 以下第二部分
        updateSiteConform() {
            if(this.areaCode===''||this.areaCode==='undefined'){
                this.$message.error("请选择需要创建站点的区域！");
                return;
            }

            if(this.siteName===''||this.siteName==='undefined'){
                this.$message.error("请选择需要创建站点的名称！");
                return;
            }
            this.loading = true;
            this.$post("/setup/project/site/updateSite", {
                areaCode: this.areaCode,
                siteName: this.siteName,
            },{isLoading:true})
            .then((res) => {
                this.loading = false;
                if (res.code == 1) {
                    this.active = 2
                }
            })
            .catch((error) => {
                this.loading = false;
                this.$message.error(error.message);
            });
        },
        async loadNode(node, resolve) {
            if (node.areaLevel === 0) {
                return;
            }
            this.$get("/base/area/getListByParentId", {
                parentId: node.data.id,
            }).then(({ data }) => {
                resolve(data.result);
            });
        },
        handleNodeClick(node) {
            this.currentNode = node;
            this.areaCode=node.areaCode
            this.areaName=node.label
        },
        // 以下第一部分
        /** 提交上传文件 */
        submitFileForm() {
            console.log(111,this.fileList,this.$refs.nowupload.uploadFiles);
            if(this.$refs.nowupload.uploadFiles.length){
                this.loading = true
                this.$refs.upload.submit();
            }else{
                this.$message.error("请上传文件！");
            }
        },
        /** 文件上传中处理 */
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        /** 文件上传成功处理 */
        handleFileSuccess(response, file, fileList) {
            this.loading = false
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            if(response.code==1){
                this.active = 1
            }else{
                this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
            }
        },
    }
}
</script>

<style lang="less" scoped>
.active{
    color: rgb(232, 245, 24);
}
// 第三部分
.wancheng{
    margin-bottom: 350px;
    .cgtext{
        line-height: 30px;
    }
}
// 第二部分
.tree{
    width: 80%;
    height: 300px;
    overflow-y: auto;
    background: #ffffff;
}
.elinput{
    width: 70%;
}
// 第一部分
/deep/ .el-upload__text{
    font-size: 20px !important;
}
/deep/ .el-icon-upload{
    font-size: 97px !important;    
    margin: 80px 0 40px !important;
}
/deep/.el-upload-dragger{
    width: 500px !important;
    height: 280px !important;
}
.upload{
    // width: 365px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 0 80px;
}
.line{
    background: #00b2f5;
    width: 100%;
    height: 1px;
    margin: 20px 0;
}
.label{
    color:#333333;
    font-weight: 600;
    font-size: 14px;
}
.steps{
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    background: linear-gradient(90deg, #029ad6 0%, #00b2f5 50%, #029ad6 100%);
    height: 50px;
    margin-bottom: 30px;
}
.bg{
    border-radius: 8px;
    background: rgba(255, 255, 255,.95);
    box-sizing: border-box;
    padding: 20px 30px;
    width: 100%;
    height: 100%;
}
.main{
    height: 100%;
    background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
    padding: 32px 40px;
}
</style>