<template>
    <div class="page_container">
        <div class="bg-breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/develop/account' }"> 系统账号管理 </el-breadcrumb-item>
                <el-breadcrumb-item> {{ route.query.type === "0" ? '新建' : '编辑'}} </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="page_content flex_cloumn">
            <div class="content_top apaas_scroll">
                <div class="content_process">
                    <div>
                        <el-steps :active="step" >
                            <el-step title="" :class="{'process_complete': step > 1}">
                                <template #icon>
                                    <span class="process_desc">
                                        <span class="icon_box" v-if="step > 0"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 
                                        <span class="circle" v-else></span>
                                    业务系统信息
                                    </span>
                                </template>
                            </el-step>
                            <el-step title="" :class="{'process_complete': step > 2}">
                                <template #icon>
                                    <span class="process_desc">
                                        <span class="icon_box" v-if="step > 1"><bg-icon class="step_icon" icon="#bg-ic-file-staff"></bg-icon></span> 
                                        <span class="circle" v-else></span>
                                        联系人信息
                                    </span>
                                </template>
                            </el-step>
                            <el-step title="">
                                <template #icon>
                                    <span class="process_desc">
                                    <span class="icon_box" v-if="step > 2"><bg-icon class="step_icon" icon="#bg-ic-file-success"></bg-icon></span> 
                                        <span class="circle" v-else></span>
                                        完成
                                    </span>
                                </template>
                            </el-step>
                        </el-steps> 
                    </div>
                     
                </div>
                <div class="content_main">
                    <systemForm v-show="step === 1" ref="systemFormRef" @action="getSystemFormData"></systemForm>
                    <contactForm v-show="step === 2" ref="contactFormRef" @action="getContactFormData"></contactForm>
                    <div class="process_end" v-show="step === 3">
                        <div>
                            <div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
                            <div class="font_bold">业务系统新增成功</div>
                            <el-button  @click="cancel">返回列表</el-button>
                            <el-button type="primary" @click="continueCreate">继续创建</el-button>
                        </div>
                            
                    </div>
                </div>
            </div>
            <div class="content_bottom" v-if="step !== 3">
                <div v-show="step === 1">
                    <el-button  @click="cancel">取消</el-button>
                    <el-button type="primary" @click="nextStep">下一步</el-button>
                </div>
                <div v-show="step === 2">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="previousStep">上一步</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </div>
                
            </div>
        </div>

    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import systemForm from './system-form.vue';
import contactForm from './contact-form.vue';
import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted  } from 'vue';

const route = useRoute();
const router = useRouter();
const step = ref(1);
const systemFormRef = ref(null);
const contactFormRef = ref(null);
const formData = reactive({
  org: '',
  code: '',
  name: '',
  desc: '',
  logo: '',
  role: '',
  account: '',
  password: '',
  url: '',
  firm_name: '',
  is_use: '',
  contact_user: '',
  phone: '',
  email: '',
  remark: '',
}); //业务系统表单+联系人表单

// 下一步
const nextStep = () => {
    systemFormRef.value.submitForm();
}
//业务系统表单检验触发事件 data为null 校验失败
const getSystemFormData = (data) => {
        if(data) {
            formData.value = Object.assign(formData,data);
            step.value = 2;
        }else {

        }
}
//联系人表单检验触发事件 data为null 校验失败
const getContactFormData = (data) => {
    if(data) {
        formData.value = Object.assign(formData,data);
        console.log(formData);
        step.value = 3;
    }
}
//上一步
const previousStep = () => {
    step.value--;
}
//提交表单
const submit = () => {
    contactFormRef.value.submitForm();
}
//继续创建 清空表单
const continueCreate = () => {
    systemFormRef.value.clearForm();
    contactFormRef.value.clearForm();
    step.value = 1;
}
//取消
const cancel = () => {
    router.go(-1);
}

onBeforeUnmount(()=>{
    
})
onMounted(() => {
    if(route.query.type === "1") {
        setTimeout(()=> {
            systemFormRef.value.setForm({
                org: 'a',
                code: 'b',
                name: 'b',
                desc: 'b',
                logo: ['b'],
                role: 'b',
                account: 'b',
                password: 'b',
                confirm_password: 'b',
                url: 'b',
                firm_name: 'b',
                is_use: 'b',
               
            })
            contactFormRef.value.setForm({
                contact_user: 'c',
                phone: 'c',
                email: 'c',
                remark: 'c',
            })
        },500)
    }
})

</script>

<style scoped>
.flex_cloumn {
    display: flex;
    flex-direction: column;
}
.content_top {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
/* .content_top::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}
.content_top::-webkit-scrollbar-thumb {
  background: #dedede;
  border-radius: 10px;
  height: 0px;
}
.content_top::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2px;
} */

.content_bottom {
    height: 68px;
    line-height: 68px;
    text-align: right;
    padding: 0 20px;
    border-top: 1px solid #e6e9ef;
}
.content_process {
    border-bottom: 1px solid #e6e9ef;
    padding: 38px 16%;
}
.content_main {
    flex: 1;
    padding: 30px;
    box-sizing: border-box;
}
.process_desc {
    background-color: #fff;
    display: inline-block;
    position: absolute;
    padding: 0 5px;
    font-size: 18px;
    color: #202531;
    font-weight: bold;
}
.process_desc img {
    height: 25px;
    width: 25px;
    vertical-align: middle;
}
.process_end {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.process_end div {
    text-align: center;
}
.step_icon {
    color: #fff;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.icon_box {
    display: inline-block;
    background-color: #2b4695;
    width: 48px;
    height: 48px;
    border-radius: 99px;
    position: relative;
    border: 3px solid #b0bee8;
    vertical-align: middle;
}
.circle {
    display: inline-block;
    background-color: #a9b1c7;
    width: 24px;
    height: 24px;
    border-radius: 99px;
    position: relative;
    border: 4px solid #e6e9ef;
    vertical-align: middle;
}
.content_process :deep() .el-step.is-horizontal .el-step__line {
    height: 4px;
}
.content_process :deep() .el-step__head.is-finish .el-step__line {
    background: linear-gradient(to right,#2b4695 50%,#e6e9ef 50%);
}
.process_complete :deep() .el-step__head.is-finish .el-step__line {
    background: linear-gradient(to right,#2b4695 100%,#e6e9ef 0%);
}
</style>
