<template>

  <el-form label-width="100px" :model="data" :rules="rules" ref="baseFormRef">
    <el-form-item label="单位名称" prop="orgId" required>
      <!-- <el-autocomplete style="width: 300px" v-model="data.orgName" :fetch-suggestions="querySearch" clearable
        class="inline-input w-50" placeholder="请输入" @select="handleSelect" /> -->
      <el-select style="width: 300px" v-model="data.orgId" clearable>
        <el-option :value="Number(id)" :label="value" v-for="{ value, id } in allOrgs" />
      </el-select>
    </el-form-item>

    <el-form-item label="姓名" prop="nickName" required>
      <el-input v-model="data.nickName" style="width: 300px" :maxlength="500" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="账号" prop="userName" required>
      <el-input v-model="data.userName" style="width: 300px" :maxlength="500" placeholder="请输入字母或数字组合" />
    </el-form-item>
    <el-form-item label="密码" prop="password" required>
      <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" v-model="data.password"
        :type="addPassFlag ? 'text' : 'password'" style="width: 300px" :maxlength="500"
        placeholder="请输入8-16位数字、字母大小写组合">
        <template #suffix>
          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer;">
            <el-icon v-if="addPassFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </template>
      </el-input>

    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { QuiskExpose } from "@/helper/mount";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
// import { ElMessage } from "element-plus";
import type { OrganizationType } from '@/request/organization'
import {
  getOrgListFetch,

  UserType
} from "@/request";

import { ref, reactive, unref, onMounted } from "vue";
import { View, Hide } from '@element-plus/icons-vue';
// import { user } from '@/store/user'

const addPassFlag = ref(false)//图标显示标识

const baseFormRef = ref<FormInstance>();

type SelectType = {
  value: string, id: number
}

const allOrgs = ref<SelectType[]>([]);

const rules = reactive<FormRules>({
  orgId: [
    { required: true, message: "请选择单位名称", trigger: "select" },
  ],
  nickName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    // { required: true, pattern: /^1[3456789]\d{9}$/, message: "请输入正确手机号", trigger: "blur" },
  ],
  userName: [
    { required: true, message: "请输入账号", trigger: "blur" },
    // { required: true, pattern: /^1[3456789]\d{9}$/, message: "请输入正确手机号", trigger: "blur" },
  ],
  password: [
    { required: true, pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
    { required: true, min: 8, message: '密码太短！', trigger: "blur" },
  ],
},)

const props = defineProps<{
  submit: (data: OrganizationType) => Promise<any>;
}>();
const data = ref<Partial<OrganizationType> & Partial<UserType>>({
  nickName: "",
  orgId: undefined,
  password: "",
  status: 0,
  // userId: 0,
  userName: ""
});

onMounted(async () => {
  const data = await getOrgListFetch({
    pageNum: 1,
    pageSize: 10000,
  })
  console.log('allOrgs', data.records);
  allOrgs.value = Array.from(data.records).map((item: OrganizationType) => {
    const i: SelectType = { value: item['orgName'], id: item['orgId'] }
    return i
  });

})


defineExpose<QuiskExpose>({
  async submit() {
    if (unref(baseFormRef)) {
      const res = await unref(baseFormRef)?.validate();
      if (res) {
        await props.submit(data.value as any as OrganizationType);
        ElMessage.success('新增成功！');
      }
    } else {
      throw "";
    }
  },
});
</script>