<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.id ? '编辑' : '新建'}} </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" :form-type="route.query.id ? true : false" :id="route.query.id" @action="getSystemFormData"></systemForm>
                    <contactForm v-show="step === 2" ref="contactFormRef" :id="route.query.id" @action="getContactFormData"></contactForm>
                    <div class="process_end" v-show="step === 3">
                        <div>
                            <div>
                                <img v-if="successFlag" src="@/assets/imgs/img_data-complete.png" alt="">
                                <img v-else src="@/assets/imgs/img_data-fail.png" alt="">
                            </div>
                            <div class="font_bold">{{route.query.id ? (successFlag ? '业务系统编辑成功' : '业务系统编辑失败') : (successFlag ? '业务系统新建成功' : '业务系统新建失败')}}</div>
                            <el-button  @click="cancel">返回列表</el-button>
                            <el-button v-if="!route.query.id" 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, getCurrentInstance  } from 'vue';
import CryptoJS from "crypto-js"; 
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const route = useRoute();
const router = useRouter();
const step = ref(1);
const systemFormRef = ref(null);
const contactFormRef = ref(null);
const formData = reactive({
  organization_id: '',
  business_code: '',
  business_name: '',
  business_desc: '',
  logo: '',
  system_role_id: '',
  system_account: '',
  password: '',
  confirm_password: '',
  access_address: '',
  develop_id: '',
  state: 1,

  contact_name: '',
  contact_phone: '',
  contact_email: '',
  remark: '',
}); //业务系统表单+联系人表单
const successFlag = ref(false)

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

        }
}
//联系人表单检验触发事件 data为null 校验失败 
const getContactFormData = (data) => {

    if(data) {
        Object.assign(formData,data);
        if(route.query.id) {
            console.log(formData)
            let params = {
                ...formData,
                id: parseInt(route.query.id),
                logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : '',
            }
            $axios.post(`/apaas/system/v5/user/update`,params)
                .then((res) => {
                if (res.data.code == 200) {
                    successFlag.value = true;
                    step.value = 3;
                }else {
                    $message.error(res.data.data)
                }
            })
        }else {
            let params = {
                ...formData,
                logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : '',
                password: CryptoJS.AES.encrypt(formData.password,"swuE9cmCZQwrkYRV").toString(),
            }
            $axios.put(`/apaas/system/v5/user/create`,params)
                .then((res) => {
                if (res.data.code == 200) {
                    successFlag.value = true;
                    step.value = 3;
                }else {
                    $message.error(res.data.data)
                }
            })
        }
    }
}
//上一步
const previousStep = () => {
    step.value--;
}
//提交表单
const submit = () => {
    contactFormRef.value.submitForm();
}
//继续创建 清空表单
const continueCreate = () => {
    systemFormRef.value.clearForm();
    contactFormRef.value.clearForm();
    step.value = 1;
    successFlag.value = false;
}
//取消
const cancel = () => {
    router.go(-1);
}

const getDetail = () => {
    $axios.get(`/apaas/system/v5/user/detail/${route.query.id}`)
        .then((res) => {
            if (res.data.code == 200) {
                const form = res.data.data;
                systemFormRef.value.setForm({
                    organization_id: form.organization_id,
                    system_role_id: form.system_role_id,
                    logo: [{url:form.logo}],
                    business_code: form.business_code,
                    business_name: form.business_name,
                    business_desc: form.business_desc,
                    system_account: form.system_account,
                    access_address: form.access_address,
                    develop_id: form.develop_id,
                    state: form.state,
                    appid: form.app_id,
                    appsecret: form.app_secret
                    
                })

            contactFormRef.value.setForm({
                contact_name: form.contact_name,
                contact_phone: form.contact_phone,
                contact_email: form.contact_email,
                remark: form.remark,
            })
            }else {
                $message.error(res.data.data)
            }
        })
    }

    onBeforeUnmount(()=>{
       
    })
    onMounted(() => {
        if(route.query.id) {
            getDetail()
        }
    })

</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>
