<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> {{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" v-if="!route.query.id">
                    <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">
                    <platformAccountForm v-show="step === 1" :form-type="route.query.id ? true : false" :id="route.query.id" ref="platformAccountFormRef" @action="getPlatformAccountFormData"></platformAccountForm>
                    <platformPersonForm v-show="step === 2" ref="plplatformPersonFormRef" @action="getPlatformPersonFormData"></platformPersonForm>
                    <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="!route.query.id && 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 v-show="route.query.id">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="nextStep">保存</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import platformAccountForm from './platform-account-form.vue';
import platformPersonForm from './platform-person-form.vue';
import CryptoJS from "crypto-js"; 
import { reactive, ref,onBeforeMount,toRefs,computed, onMounted, getCurrentInstance  } from 'vue';
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const route = useRoute();
const router = useRouter();
const step = ref(1);
const platformAccountFormRef = ref(null);
const plplatformPersonFormRef = ref(null);
const formData = reactive({
  logo: '',
  system_account: '',
  contact_phone: '',
  password: '',
  confirm_password: '',
  select_role: '',
  state: '',

  contact_name: '',
  contact_email: '',
  remark: '',

}); //账号信息表单+个人信息表单
const orgId = ref(null);
const successFlag = ref(false)


// 下一步
const nextStep = () => {
    platformAccountFormRef.value.submitForm();
}
//账号信息表单检验触发事件 data为null 校验失败
const getPlatformAccountFormData = (data) => {
        if(data) {
            if(route.query.id) {
                Object.assign(formData,data);
                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.data)
                    }
                })
            }else {
                Object.assign(formData,data);
                step.value = 2;
            }
            
        }else {

        }
}
//个人信息表单检验触发事件 data为null 校验失败
const getPlatformPersonFormData = (data) => {
       if(data) {
        Object.assign(formData,data);
        if(route.query.id) {
            console.log(formData)
            // let params = {
                
            // }
            // $axios.post(`/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: 3,
                            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.data)
                }
            })
        }
    }
}
//上一步
const previousStep = () => {
    step.value--;
}
//提交表单
const submit = () => {
    plplatformPersonFormRef.value.submitForm();
}
//继续创建 清空表单
const continueCreate = () => {
    platformAccountFormRef.value.clearForm();
    plplatformPersonFormRef.value.clearForm();
    step.value = 1;
    successFlag.value = false;
}
//取消
const cancel = () => {
    router.go(-1);
}

const  getOrgTree = () => {
    $axios.get(`/apaas/system/v5/org/tree`)
      .then((res) => {
      if (res.data.code == 200) {
          orgId.value = res.data.data[0].organization_id;
      }else {
          $message.error(res.data.data)
      }
      })
  }

const getDetail = () => {
    $axios.get(`/apaas/system/v5/org/user/${route.query.id}`)
                .then((res) => {
                if (res.data.code == 200) {
                    const form = res.data.data;
                    platformAccountFormRef.value.setForm({
                        logo: form.logo ? [{url:form.logo}] : [],
                        system_account: form.system_account,
                        contact_phone: form.contact_phone,
                        state: form.state,
                        contact_name: form.contact_name,
                        contact_email: form.contact_email,
                        remark: form.remark,
                    })
                }else {
                    $message.error(res.data.data)
                }
            })
}

onBeforeMount(() => {
    getOrgTree()
    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>
