<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <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 } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
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 {
          ElMessage.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 {
      //         ElMessage.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 {
          ElMessage.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(`/v1/api/org/tree`).then((res) => {
    if (res.data.code == 200) {
      orgId.value = res.data.data[0].organization_id;
    } else {
      ElMessage.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;
      console.log(form);
      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,
        select_role: form.select_role,
      });
    } else {
      ElMessage.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>
