<template>
  <el-form ref="form" label-width="90px" class="user-from">
    <el-form-item label="用户姓名" class="mandatory">
      <el-input
        maxlength="30"
        v-model="bindUser.nickName"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="所属架构"
      class="mandatory"
      v-if="roleLevel !== RoleLevel.detachment2"
    >
      <com-company
        v-model="bindUser.deptId"
        hide-all
        @update:path="(val) => (deptPath = val)"
        :disabled="disabledChangeDept"
      />
    </el-form-item>
    <el-form-item
      v-if="disabledChangeDept"
      class="tips"
      style="margin-bottom: 0; position: relative; bottom: 10px"
      label=""
    >
      <p class="maker">注：该用户已绑定相机，不可修改所属架构。</p>
    </el-form-item>
    <el-form-item label="用户角色" class="roleName mandatory">
      <el-select placeholder="请选择" v-model="bindUser.roleId" showAll>
        <el-option
          v-for="option in roleOptions"
          :key="option.value"
          :value="option.value"
          :label="option.label"
        />
      </el-select>
    </el-form-item>
    <template v-if="isAdd">
      <el-form-item label="用户账号" class="mandatory">
        <el-input
          v-model.trim="bindUser.userName"
          placeholder="请输入11位手机号码作为用户账号"
          :maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="登录密码" class="mandatory">
        <el-input
          v-model="bindUser.password"
          :maxlength="16"
          placeholder="请输入8-16位数字、英文大小写组合密码"
          :type="plainFlag ? 'text' : 'password'"
        >
          <template v-slot:suffix>
            <img
              v-if="plainFlag"
              @click="plainFlag = !plainFlag"
              style="width: 20px"
              src="@/assets/image/pasword.png"
              alt=""
            />
            <el-icon :size="20" @click="plainFlag = !plainFlag" class="icon-style" v-else>
              <View />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
    </template>
  </el-form>
</template>

<script setup lang="ts">
import comCompany from "@/components/company-select/index.vue";
import { UserInfo, addUser, setUser } from "@/store/user";
import { PHONE, EPSW } from "@/constant/REG";
import { RoleLevel, getRolesByDetpId, roleLevel } from "@/store/role";
import { computed, ref, watchEffect } from "vue";
import { ElMessage } from "element-plus";
import { QuiskExpose } from "@/helper/mount";

const props = defineProps<{ user?: UserInfo }>();

const isAdd = computed(() => !props.user?.id);
const bindUser = ref<UserInfo>(props.user ? { ...props.user } : ({} as UserInfo));
const plainFlag = ref(false);
const disabledChangeDept = ref(false);
const roleOptions = ref<{ label: string; value: string }[]>([]);
watchEffect(async () => {
  if (bindUser.value.deptId) {
    roleOptions.value = (await getRolesByDetpId(bindUser.value.deptId)).map((item) => ({
      label: item.roleName,
      value: item.id,
    }));
  }
});

const deptPath = ref<string[]>([]);

defineExpose<QuiskExpose>({
  async submit() {
    if (!bindUser.value.nickName || !bindUser.value.nickName.trim()) {
      ElMessage.error("请输入用户姓名");
      throw "请输入用户姓名";
    }
    if (!bindUser.value.deptId) {
      ElMessage.error("请选择用户所属架构");
      throw "请选择用户所属架构";
    }
    if (!bindUser.value.roleId) {
      ElMessage.error("请选择用户角色");
      throw "请选择用户角色";
    }
    if (isAdd.value) {
      if (!bindUser.value.userName) {
        ElMessage.error("请输入用户账户");
        throw "请输入用户账户";
      } else if (!PHONE.REG.test(bindUser.value.userName)) {
        ElMessage.error(PHONE.tip);
        throw PHONE.tip;
      }
      if (!bindUser.value.password) {
        ElMessage.error("请输入登录密码");
        throw "请输入登录密码";
      } else if (!EPSW.REG.test(bindUser.value.password)) {
        ElMessage.error(EPSW.tip);
        throw EPSW.tip;
      }
    }
    if (isAdd.value) {
      await addUser(bindUser.value, deptPath.value);
    } else {
      await setUser(bindUser.value, deptPath.value);
    }
  },
});
</script>

<style scoped>
.icon-style {
  font-size: 20px;
  line-height: 50px;
}
</style>
