<template>
    <div class="page_container">
        <div class="bg-breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 组织管理 </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/system/organization' }"> 组织管理 </el-breadcrumb-item>
                <el-breadcrumb-item> 新增组织管理员 </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">
                    <orgAccountForm v-show="step === 1" :form-type="route.query.id ? true : false" ref="orgAccountRef" @action="getOrgAccountFormData"></orgAccountForm>
                    <orgPersonForm v-show="step === 2" ref="orgPersonRef" @action="getOrgPersonFormData"></orgPersonForm>
                    <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 orgAccountForm from './org-account-form.vue';
import orgPersonForm from './org-person-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 orgAccountRef = ref(null);
const orgPersonRef = ref(null);
const formData = reactive({
  organization_id: '',
  select_role: '',
  logo: [],
  system_account: '',
  contact_phone: '',
  password: '',
  confirm_password: '',
  state: 1,

  contact_name: '',
  document_type: '',
  document_number: '',
  contact_email: '',
  remark: '',
}); //账号信息表单+个人信息表单

const successFlag = ref(false)

// 下一步
const nextStep = () => {
    orgAccountRef.value.submitForm();
}
//账号信息表单检验触发事件 data为null 校验失败
const getOrgAccountFormData = (data) => {
        if(data) {
            Object.assign(formData,data);
            step.value = 2;
        }else {

        }
}
//个人信息表单检验触发事件 data为null 校验失败
const getOrgPersonFormData = (data) => {
    if(data) {
       if(data) {
        Object.assign(formData,data);
        if(route.query.id) {
            let params = {
                ...formData,
                logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : '',
            }
            $axios.put(`/apaas/system/v5/org/update/user/${route.query.id}`,params)
                .then((res) => {
                if (res.data.code == 200) {
                    successFlag.value = true;
                    step.value = 3;
                }else {
                    $message.error(res.data.msg)
                }
            })

        }else {
            const params = {...formData,
                            // organization_id: orgId.value,
                            logo: formData.logo && formData.logo.length > 0 ? formData.logo[0].url : '',
                            is_admin: 2,
                            password: CryptoJS.AES.encrypt(formData.password,"swuE9cmCZQwrkYRV").toString()
                            };
            $axios.post(`/apaas/system/v5/org/add/user`,params)
                .then((res) => {
                if (res.data.code == 200) {
                    successFlag.value = true;
                    step.value = 3;
                }else {
                    $message.error(res.data.msg)
                }
            })
        }
    }
    }
}
//上一步
const previousStep = () => {
    step.value--;
}
//提交表单
const submit = () => {
    orgPersonRef.value.submitForm();
}
//继续创建 清空表单
const continueCreate = () => {
    orgAccountRef.value.clearForm();
    orgPersonRef.value.clearForm();
    step.value = 1;
    successFlag.value = false;
}
//取消
const cancel = () => {
    router.go(-1);
}
const getDetail = () => {
    $axios.get(`/apaas/system/v5/org/user/${route.query.id}`)
                .then((res) => {
                if (res.data.code == 200) {
                    const form = res.data.data;
                    orgAccountRef.value.setForm({
                        organization_id: form.organization_id,
                        select_role: form.select_role,
                        logo: [{url:form.logo}],
                        system_account: form.system_account,
                        contact_phone: form.contact_phone,
                        state: form.state,
                        
                    })

                    orgPersonRef.value.setForm({
                        contact_name: form.contact_name,
                        document_type: form.document_type,
                        document_number: form.document_number,
                        contact_email: form.contact_email,
                        remark: form.remark,
                    })
                }else {
                    $message.error(res.data.msg)
                }
            })
}

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

onMounted(() => {
    
})

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