<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main panel">
      <ContentWrap title="账户信息" expandSwicth style="margin-top: 15px">
        <Form ref="formItem1" :itemList="schemaParam1" :rules="schemaParamRules" formId="model-select-edit"
          col="col3" />
      </ContentWrap>
      <ContentWrap title="入职部门" expandSwicth style="margin-top: 15px">
        <EntryOrgList ref="entryOrgListRef" :organisationJson="organisationInfo"></EntryOrgList>
      </ContentWrap>
    </div>
    <div class="submit_btn_wrap">
      <template v-for="(item, index) in schemaBtns" :key="index">
        <ElButton v-if="item.visible" :type="item.type" @click="() => { if (item.event) item.event(item.param) }">
          {{ item.label }}
        </ElButton>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts" name="addUser">
import EntryOrgList from './components/EntryOrgList.vue'
import { unref, ref, computed, onBeforeMount, onMounted, onUnmounted } from 'vue'
import { useValidator } from '@/hooks/useValidator'
import useGetData from '@/hooks/useGetData';
import useUserStore from "@/store/modules/user";
import { getStaffDetail, getOrganisationTree, addorUpdateStaff } from '@/api/modules/dataBasic'
import useDataBasicStore from '@/store/modules/dataBasic';

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData)
const dataBasicStore = useDataBasicStore();

// 全局状态和工具
const { getPermissionTemplateList } = useGetData()
const { proxy } = getCurrentInstance() as any;
const { required, phone, minChineseCount } = useValidator()
const route = useRoute()
const router = useRouter()

const fullPath = route.fullPath;

// 加载状态
const fullscreenLoading = ref(false)

// 响应式数据
const formItem1 = ref() // 账户信息表单引用
const password = ref('')
const detailData = ref<any>({}) // 员工详情数据
const organisationInfo = ref<any[]>([]) // 入职部门信息
const templateList = ref<any[]>([])

// 提交状态计算属性
const isDetail = computed((): boolean => route.query.isDetail === 'isDetail')
const isEdit = computed((): boolean => route.query.isEdit === 'isEdit')

const tenantGuid = computed((): string => userData.tenantGuid)

// 业务GUID计算属性
const bizGuid = computed((): string => route.query.guid as string)

/** 选择人员上级的列表 */
const schemaSatffTreeList: any = ref([]);

// 表单配置
const schemaParam1 = ref([
  {
    label: '员工编号',
    type: 'input',
    placeholder: '请输入',
    field: 'staffNo',
    maxlength: 50,
    default: '',
    required: false,
    clearable: true,
    visible: true,
  },
  {
    label: '人员姓名',
    type: 'input',
    placeholder: '请输入',
    field: 'staffName',
    maxlength: 50,
    default: '',
    required: true,
    clearable: true,
    visible: true,
  },
  {
    field: 'mobileNo',
    label: '手机号',
    type: 'input',
    placeholder: '请输入',
    maxlength: 50,
    default: '',
    required: true,
    clearable: true,
    visible: true,
  },
  {
    label: '密码',
    type: 'password-len-meter',
    placeholder: '请输入',
    field: 'password',
    default: '',
    clearable: true,
    required: true,
    autocompleteSetting: {
      autocomplete: "one-time-code",
    },
  },
  {
    label: "功能权限",
    type: "select",
    placeholder: "请选择",
    field: "funcPermissionTemplateJson",
    options: templateList.value,
    props: {
      label: 'templateName',
      value: 'guid'
    },
    default: [],
    multiple: true,
    collapse: true,
    tagsTooltip: true,
    filterable: true,
    clearable: true,
    required: true,
  },
  {
    label: '账号状态',
    type: 'switch',
    field: 'bizState',
    default: 'Y',
    placeholder: '请选择',
    activeValue: 'Y',
    inactiveValue: 'S',
    switchWidth: 32,
    required: true,
  },
  {
    label: '直接上级',
    type: 'tree-select',
    placeholder: '请选择',
    field: 'leaderGuid',
    nodeKey: 'value',
    options: schemaSatffTreeList.value,
    checkStrictly: false,//只能选择叶子节点。
    lazy: false,
    multiple: false,
    props: {
      label: "name",
      value: "guid",
      children: 'children'
    },
    customInfo: {
      type: 'prefixIcon'
    },
    filterable: true,
    clearable: true,
    default: '',
    required: false,
  },
  // {
  //   field: 'leaderName',
  //   label: '直接上级:',
  //   type: 'input',
  //   placeholder: '请选择',
  //   required: false,
  //   clearable: true,
  //   // componentProps: {
  //   //   readonly: true,
  //   //   on: {
  //   //     click: (val: any) => {
  //   //       schemaSatff.value.visible = true
  //   //       operate.value = '直接上级'
  //   //     }
  //   //   },
  //   //   formItemProps: {}
  //   // }
  // },
  // {
  //   field: 'leaderGuid',
  //   label: '直接上级:',
  //   type: 'input',
  //   visible: false
  // }
])

const schemaParamRules = ref({
  staffName: [required(), minChineseCount()],
  mobileNo: [required(), phone()],
  funcPermissionTemplateJson: [{ type: 'array', required: true, trigger: 'change', message: "请选择功能权限" }],
  password: [{
    required: true,
    message: "该项为必填项",
    trigger: "blur",
  },
  {
    validator: (rule: any, value: any, callback: any) => {
      let getStorage = (key) => {
        const value = window['sessionStorage'].getItem(key);
        if (value) {
          const { value: val } = JSON.parse(value);
          return val;
        } else {
          return value;
        }
      };
      if (!value) {
        callback();
        //  callback(new Error('该项为必填项'));
      } else if (getStorage('passwordLenMeter' + 'pwd')) {
        callback(new Error(getStorage('passwordLenMeter' + 'pwd')));
      } else {
        callback();
      }
    },
    trigger: ['change', 'blur']
  }],
});

// 页面按钮配置
const schemaBtns = computed(() => {
  return <any>[
    { visible: true, type: "", label: "关闭", value: "cancel", event: cancel, param: "" },
    // { type: "primary", visible: !unref(isEdit) && !unref(isDetail), label: "提交并添加下一个", value: "cancel", event: submitForm, param: "submitNext" },
    { type: "primary", visible: !unref(isDetail), label: "提交", value: "cancel", event: submitHandle, param: "submit" }
  ]
})

const entryOrgListRef = ref();

const submitHandle = async () => {
  formItem1.value.ruleFormRef?.validate((valid, errorItem) => {
    if (valid) {
      let resultForm1 = formItem1.value.formInline;
      let orgOne = organisationInfo.value.find(item => item.isMainOrg == 'Y')

      if (!orgOne) {
        proxy.$message.warning('请选择主责部门')
        return
      }

      let result = entryOrgListRef.value.validateData();
      if (!result) {
        return;
      }

      let submitParam: any = {
        staffName: resultForm1.staffName,
        leaderGuid: resultForm1.leaderGuid,
        staffMain: {
          ...resultForm1,
          staffNo: resultForm1.staffNo || null,
          userGuid: detailData.value.userGuid,
          guid: unref(bizGuid) || '',
          tenantGuid: tenantGuid.value,
        },
        organisationInfo: organisationInfo.value
      }

      let message = '提交成功'
      let param = {
        guid: unref(bizGuid) || '',
        ...submitParam
      }

      addorUpdateStaff(param).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          proxy.$ElMessage({
            type: "success",
            message: message,
          });
          userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
          router.push({
            name: "userManagement",
          });
          dataBasicStore.setIsUpdate(true);
        } else {
          res?.msg && proxy.$ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      })
    } else {
    }
  });
}

const cancel = () => {
  if (isDetail.value) {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'userManagement'
    });
    return;
  }
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'userManagement'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

// 获取详情
async function getDetail() {
  if (!unref(bizGuid)) return

  fullscreenLoading.value = true
  try {
    let res: any = await getStaffDetail(unref(bizGuid))
    if (res?.code == proxy.$passCode) {
      detailData.value = res.data || {}
      setDetail()
    }
  } catch (error) {
    console.error('获取详情失败:', error)
    proxy.$ElMessage.error('获取详情失败')
  } finally {
    fullscreenLoading.value = false
  }
}

function setDetail() {
  let funcPermissionTemplateJson = detailData.value.funcPermissionTemplateJson
  let formData = {
    funcPermissionTemplateJson,
    mobileNo: detailData.value.mobileNo,
    staffName: detailData.value.staffName,
    staffNo: detailData.value.staffNo,
    bizState: detailData.value.bizState,
    leaderGuid: detailData.value.leaderGuid,
    leaderName: detailData.value.leaderName,
  }

  nextTick(() => {
    formItem1.value.setValue(formData)
    organisationInfo.value = detailData.value.staffOrgRelRSVOList || []
  })
}

// 初始化权限模板列表
const initPermissionTemplates = async () => {
  try {
    const res = await getPermissionTemplateList({
      useCache: false,
      customParam: {
        tenantGuid: tenantGuid.value
      }
    })

    templateList.value = res || [];
    let item = schemaParam1.value.find(item => item.field === 'funcPermissionTemplateJson');
    item && (item.options = templateList.value);
  } catch (error) {
    console.error('获取权限模板失败:', error)
  }
}

// 生命周期钩子
onBeforeMount(() => {
  initPermissionTemplates()

  if (unref(bizGuid)) {
    getDetail()
  }
  // 组件挂载前的初始化逻辑
  getOrganisationTree(tenantGuid.value).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      schemaSatffTreeList.value = res.data || [];
      let item = schemaParam1.value.at(-1);
      item && (item.options = schemaSatffTreeList.value);
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res?.msg || '获取组织人员树列表失败',
      })
    }
  })
})

onMounted(() => {

})

onUnmounted(() => {
  // 组件销毁时的清理工作
})

</script>

<style lang="scss" scoped>
.add-bank-item {
  height: 40px;
  width: 100%;
  background-color: #FAFAFA;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 2px;
  text-align: center;
  line-height: 40px;
  color: #999999;
  padding-bottom: 10px;
  margin-top: 5px;
}

.add-bank-item:hover {
  background: #EBF6F7;
  border: 1px solid rgba(79, 161, 164, 1);
}

.container_wrap {
  overflow: hidden;

  .content_main {
    height: calc(100% - 45px);
    overflow: hidden auto;

    &.panel {
      padding: 0 16px 16px;
    }
  }
}

.submit_btn_wrap {
  height: 44px;
  margin: 0 -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #d9d9d9;
}
</style>