<script setup lang="ts">
import { ref, watch } from "vue"
import { useVModel } from "@vueuse/core"
import { httpUsers } from "/@/api/interest/handover";
import { ElForm } from "element-plus"

const formRef = ref<InstanceType<typeof ElForm>>(null)

const emit = defineEmits(['submit'])

const props = withDefaults(
  defineProps<{ data: any, modal?: boolean, companyNo: string }>(),
  { modal: false }
)

const data = useVModel(props, 'data')
const users = ref<any[]>([])

async function requestUsers() {
  const { data } = await httpUsers({ size: 100, companyNo: props.companyNo })
  users.value = data.list
}

const rules = {
  resign_uid: [
    {
      required: true,
      message: "请选择离职人",
      trigger: "change",
    },
  ],
  hand_uid: [
    {
      required: true,
      message: "请选择接受人",
      trigger: "change",
    },
  ],
  resign_date: [
    {
      required: true,
      message: "请选择离职时间",
      trigger: "blur",
    },
  ],
  expire_date: [
    {
      required: true,
      message: "请选择生效时间",
      trigger: "blur",
    },
  ],
}


watch(() => props.companyNo, () => {
  // if (!props.companyNo) return
  requestUsers()
}, {
  immediate: true
})

async function onSubmit(){
  try {
    await formRef.value.validate();
    emit("submit");
  } catch (err) {
    console.log(err);
  }
}
</script>

<template>
  <ElForm label-width="80px" :model="data" :rules="rules" ref="formRef" size="small">
    <ElRow>
      <ElCol :span="modal ? 24 : 12">
        <ElFormItem label="离职人" prop="resign_uid">
          <ElSelect v-model="data.resign_uid" style="width:100%" placeholder="离职人">
            <ElOption v-for="({ id, nickname }) in users" :key="id" :label="nickname" :value="id" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="modal ? 24 : 12">
        <ElFormItem label="接受人" prop="hand_uid">
          <ElSelect v-model="data.hand_uid" style="width:100%" placeholder="接收人">
            <ElOption v-for="({ id, nickname }) in users" :key="id" :label="nickname" :value="id" />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="modal ? 24 : 12">
        <ElFormItem label="离职日期" prop="resign_date">
          <ElDatePicker v-model="data.resign_date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" placeholder="离职日期" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="modal ? 24 : 12">
        <ElFormItem label="生效日期" prop="expire_date">
          <ElDatePicker v-model="data.expire_date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" placeholder="生效日期" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="modal ? 24 : 12">
        <ElFormItem label="审核备注" prop="remark">
          <ElInput v-model="data.remark" type="textarea" style="width:100%" placeholder="审核备注" />
        </ElFormItem>
      </ElCol>
    </ElRow>

    <div class="w-full flex justify-end">
      <ElButton type="primary" @click="onSubmit">保存</ElButton>
    </div>
  </ElForm>
</template>
