<template>
  <div class="grid full init-name-view">
    <div class="init-name-modal">
      <div class="p-l-large modal-header">首次登录，请填写姓名{{ needEmployer ? '和单位' : '' }}</div>
      <div class="login-modal-content">
        <base-form ref="formRef" :rules="rules" :model="model" :items="items" size="large"></base-form>
        <div class="m-t-super-large">
          <confirm-button ok-text="确定" cancel-text="退出" :loading="loading" @confirm="onSubmit" @cancel="logout()">
          </confirm-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="InitUserName">
import { reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import BaseForm from '@/components/element/BaseForm.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import useFetch from '@/hooks/useFetch'
import useForm from '@/hooks/useForm'
import useMainStore from '@/store/main'
import { logout } from '@/utils/shared'

import type { EpFormItem, EpFormRules } from 'global-type'

const { replace } = useRouter()

const mainStore = useMainStore()
const needEmployer = ref(false)
const model = reactive<{ name: string; employer: string }>({ name: '', employer: '' })

const { formRef, elFormRef } = useForm()

const rules: EpFormRules = {
  name: [
    { required: true, message: '请输入你的姓名' },
    { type: 'string', max: 50, message: '用户姓名限制50字以内' },
  ],
}

const items: any = computed(() => {
  let options = [
    {
      prop: 'name',
      slotType: 'input',
      label: '姓名',
      labelWidth: '60px',
      slot: {
        placeholder: '请输入你的姓名',
        onKeydown(event: any) {
          if (event.keyCode == 13) {
            onSubmit()
          }
        },
      },
    },
  ]
  if (needEmployer.value) {
    options.push({
      prop: 'employer',
      slotType: 'input',
      label: '单位',
      labelWidth: '60px',
      slot: {
        placeholder: '请输入你的单位全称',
        onKeydown(event: any) {
          if (event.keyCode == 13) {
            onSubmit()
          }
        },
      },
    })
  }
  return options
})

const { fetch: getExamInfo } = useFetch('getExamInfo')
getExamInfo({ id: mainStore.loginInfo?.examId as number }).then((result: any) => {
  needEmployer.value = result.employerCollect
})
const { loading, fetch } = useFetch('updateUserName')

async function onSubmit() {
  if (!elFormRef) {
    return
  }
  try {
    await elFormRef.value?.validate()
    await fetch({ name: model.name, employer: needEmployer.value ? model.employer : undefined })
    mainStore.getMyUserInfo()
    replace({ name: mainStore.loginInfo?.role === 'MARKER' ? 'MarkingMark' : 'AnalysisMonitoring' })
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped lang="scss">
.init-name-view {
  place-items: center;
  .init-name-modal {
    width: 640px;
    background: $LoginModalBg;
    border-radius: $LoginModalRadius;
    overflow: hidden;
    .modal-header {
      height: $LoginModalHeaderHeight;
      line-height: $LoginModalHeaderHeight;
      background: $LoginModalHeaderBg;
      font-size: $LoginModalHeaderFontSize;
      font-weight: normal;
      color: $LoginModalHeaderFontColor;
    }
    .login-modal-content {
      padding: 52px 80px;
      padding-left: 50px;
    }
    :deep(button.el-button) {
      width: 120px;
      height: 48px;
    }
  }
}
</style>
