<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
    <el-form-item label="用户名称" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入用户名称" />
    </el-form-item>
    <el-form-item label="电话号码" prop="phone">
      <el-input :maxlength="11" v-model="ruleForm.phone" placeholder="请输入电话号码" />
    </el-form-item>
    <el-form-item label="警员号" prop="username">
      <el-input :maxlength="20" v-model="ruleForm.username" placeholder="请输入警员号" />
    </el-form-item>
    <el-form-item label="类型" prop="roleId">
      <el-select v-model="ruleForm.roleId" placeholder="请选择人员">
        <el-option v-for="item in comm.roleList" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="辖区" prop="orgId">
      <el-select v-model="ruleForm.orgId" placeholder="请选择辖区">
        <el-option v-for="item in orgAllData" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <el-form-item class="footr">
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
      <el-button @click="emit('close')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, PropType, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { TDevice, TOrg } from "@/api/index.d";
import { useCommonStore } from "@/store/common";
import { TAccount } from "@/api/index.d";

const comm = useCommonStore();
const ruleFormRef = ref<FormInstance>();

const { orgAllData, formData, api } = defineProps({
  orgAllData: {
    type: Array as PropType<TOrg.IOrgRecordRes[]>,
    dfault: () => {},
  },
  formData: {
    type: Object,
    required: true,
  },
  api: {
    type: Function,
  },
});
const emit = defineEmits(["close"]);

const ruleForm = reactive(
  formData
    ? { ...formData }
    : {
        name: "",
        phone: "",
        username: "",
        roleId: "",
        orgId: "",
        status: 1,
      }
);

onMounted(() => {});
const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入电话号码", trigger: "blur" },
    { min: 11, message: "请输入11位手机号", trigger: "blur" },
  ],
  username: [
    { required: true, message: "请输入警员号", trigger: "blur" },
    { min: 5, message: "警员号长度不能小于5位", trigger: "blur" },
  ],
  roleId: [{ required: true, message: "请选择人员", trigger: "blur" }],
  orgId: [{ required: true, message: "请选择辖区", trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      api(ruleForm);
    }
  });
};
</script>
<style scoped lang="less">
.footr {
  margin-top: 20px;
}
.footr :deep(.el-form-item__content) {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 20px;
}
</style>
