<script setup lang="ts">
import { reactive, ref, watch, nextTick } from "vue";
import { httpAdd, httpUpdate } from "/@/api/system/account";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useNav } from "/@/layout/hooks/nav";
import { isMobile } from "/@/utils/validate";
import menuType from "./types";

const { logout } = useNav();
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();

const props = defineProps({
  itemId: {
    type: String,
    default: ""
  },
  showModel: {
    type: Boolean,
    default: false
  },
  isDetails: {
    type: String,
    default: "add"
  },
  sitem: {
    type: Object as PropType<menuType>
  }
});
const showModelThis = ref(false);
const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "refresh"): void;
}>();
const editType = ref("add");
const formModel = {
  id: "", //账户id
  nickname: "", //真实姓名
  mobile: "" //手机号
};

const ruleForm = reactive<menuType>({ ...formModel });
const rules = reactive<FormRules>({
  nickname: [
    { required: true, message: "请输入真实姓名", trigger: "blur" },
    { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" }
  ],
  mobile: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("手机号不能为空！"));
        } else if (!isMobile(value)) {
          callback(new Error("手机号格式不正确！"));
        } else {
          callback();
        }
      },

      trigger: "blur"
    }
  ],
  email: [
    {
      required: false,
      message: "请输入邮箱",
      trigger: "change"
    }
  ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  const { id, ...rest } = Object.assign({}, ruleForm);

  await formEl.validate(async (valid, fields) => {
    console.log(valid);

    if (valid) {
      const model = Object.assign({}, ruleForm);
      const { code, message } =
        editType.value === "add"
          ? await httpAdd(rest)
          : await httpUpdate(model);
      loading.value = false;
      if (code === 0) {
        ElMessage.success(title.value + "成功！");
        showModelThis.value = false;
        emit("refresh");
      } else if (code > 100 && code < 140) {
        showModelThis.value = false;
        logout();
      } else {
        ElMessage.error(message);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const closeDialog = () => {
  showModelThis.value = false;
  loading.value = false;
  emit("cancel");
};

const loading = ref(false);
const title = ref("");

watch(
  () => {
    return props.showModel;
  },
  () => {
    const { showModel, isDetails, sitem } = props;
    editType.value = isDetails;

    if (editType.value === "add") {
      title.value = "新建运营账号";
    } else if (editType.value === "view") {
      title.value = "运营账号详情";
    } else {
      title.value = "修改运营账号";
    }

    showModelThis.value = showModel;

    ruleForm.nickname = sitem.nickname;
    ruleForm.mobile = sitem.mobile;
    ruleForm.id = sitem.id;

    nextTick(() =>
      Object.keys(ruleForm).forEach(prop =>
        ruleFormRef.value.clearValidate(prop)
      )
    );
  }
);
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-model="showModelThis"
    append-to-body
    :width="'900px'"
    center
    :title="title"
    v-loading="loading"
    @close="closeDialog"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="真实姓名" prop="nickname">
            <el-input
              v-model="ruleForm.nickname"
              :disabled="editType === 'view'"
              placeholder="真实姓名"
            /> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="ruleForm.mobile"
              :disabled="editType === 'view'"
              :maxlength="11"
              placeholder="手机号"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-col :span="24" class="clear">
        <el-button
          v-if="editType === 'add' || editType === 'edit'"
          type="primary"
          class="fr"
          :loading="loading"
          style="margin: 0 0 0 16px"
          @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button class="fr" style="margin: 0 0 0 16px" @click="closeDialog"
          >关闭</el-button
        >
      </el-col>
    </el-form>
  </el-dialog>
</template>
