<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-tree-select   :check-strictly="true" :props="{
        value: 'orgId',
        label: (data: any) => data.orgName,
      }" style="width: 300px" v-model="data.orgId" :data="allOrgs" node-key="orgId" @node-click="handleNodeClick"
        clearable>
        <!-- <el-option :value="Number(id)" :label="value" v-for="{ value, id } in allOrgs" /> -->
      </el-tree-select>
    </el-form-item>

    <el-form-item label="姓名" prop="nickName" required>
      <el-input v-model="data.nickName" style="width: 300px" :maxlength="15" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="账号" prop="userName" required>
      <el-input v-model="data.userName" style="width: 300px" :maxlength="11" 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 {
  getOrgListFetchList,
  UserType
} from "@/request";

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

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

const baseFormRef = ref<FormInstance>();

type SelectType = {
  orgName: string,
  orgId: number
  children: SelectType[]
}

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

const rules = reactive<FormRules>({
  orgId: [
    { required: true, message: "请选择单位名称", trigger: "select" },
  ],
  nickName: [
    { required: true, 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: ""
});
watch(data, (newValue) => {
  // data.value.userName = newValue.userName.replace(/[^A-Za-z0-9]/g, '');
  data.value.userName = newValue.userName.replace(/[^0-9]/g, '');
}, {
  immediate: true,
  deep: true
});
onMounted(async () => {
  const data = await getOrgListFetchList()

  // console.log('allOrgs', data);
  allOrgs.value = data as any as SelectType[]
  // allOrgs.value = Array.from(data.records).map((item: OrganizationType) => {
  //   const i: SelectType = { value: item['orgName'], id: item['orgId'] }
  //   return i
  // });

})

const handleNodeClick = (node: SelectType) => {
  data.value.orgId = node.orgId
  console.log('handleNodeClick', node.orgId, data.value)
}


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>