<script setup lang="ts">
import { FormRules, ElForm } from "element-plus";
import { reactive, ref } from "vue";
import { httpUpdate, httpAdd } from "/@/api/system/menuOperator";
import { responseHandle } from "/@/utils/responseHandle";
import { useNav } from "/@/layout/hooks/nav";
import { IMenuTree } from "../types";
import { open_type_list, input_type_list, menuPrivateList } from "../status";
enum FROM_TYPE {
  create = "create",
  edit = "edit",
  view = "view"
}
const { logout } = useNav();
const showModel = ref(false);
const currentMenuId = ref("");
const formRef = ref<InstanceType<typeof ElForm>>(null);
const currentNode = ref<IMenuTree | null>(null);
const loading = ref(false);
const barCodeInput = ref("");
const emit = defineEmits(["reload"]);
interface formtype {
  invNo?: string;
  status?: string;
  open_type?: string;
  remark?: string;
  invCode?: string;
  invNum?: string;
  open_date?: string;
  total_fee?: string;
  subtotal_fee?: string;
}
const initform = {
  invNo: "",
  status: "1",
  open_type: "",
  remark: "",
  invCode: "",
  invNum: "",
  open_date: "",
  total_fee: "",
  input_type: "1",
  subtotal_fee: "1"
};
const ruleForm = reactive<Record<string, any>>({
  ...initform
});
const rules = reactive<FormRules>({
  status: [
    {
      required: true,
      message: "请选择审核状态",
      trigger: "change"
    }
  ],
  open_type: [
    {
      required: true,
      message: "请选择开票类型",
      trigger: "change"
    }
  ],
  remark: [
    {
      required: true,
      message: "请输入审核备注",
      trigger: "blur"
    }
  ],
  input_type: [
    {
      required: true,
      message: "请选择输入类型",
      trigger: "change"
    }
  ],
  type_type: [
    {
      required: true,
      message: "请选择发票类型",
      trigger: "change"
    }
  ],
  invCode: [
    {
      required: true,
      message: "请输入发票编号",
      trigger: "blur"
    }
  ],
  invNum: [
    {
      required: true,
      message: "请输入发票代码",
      trigger: "change"
    }
  ],
  open_date: [
    {
      required: true,
      message: "请选择开票日期",
      trigger: "change"
    }
  ],
  total_fee: [
    {
      required: true,
      message: "请输入税后金额",
      trigger: "blur"
    }
  ],

  subtotal_fee: [
    {
      required: true,
      message: "请输入税前金额",
      trigger: "blur"
    }
  ]
});

function show(node: any, id: string, isCreate: string) {
  console.log(initform);
  currentNode.value = node;
  Object.keys(ruleForm.value).forEach(key => {
    console.log(isCreate === "create");
    if (key == "private") {
      ruleForm.value[key] = isCreate === "create" ? "1" : node["is_private"];
    } else {
      ruleForm.value[key] = isCreate === "create" ? initform[key] : node[key];
    }
  });
  if (id !== "" && isCreate === "create") {
    ruleForm.value.pid = id;
  }

  menu_type_change();
  showModel.value = true;
}

function handleUpdate() {
  const data = {
    ...ruleForm.value
  };

  return {
    data,
    api: httpUpdate
  };
}

function handleCreate() {
  const data = {
    ...ruleForm.value
  };

  return {
    data,
    api: httpAdd
  };
}

function handleSave() {
  formRef.value.validate(async vaild => {
    if (vaild) {
      if (loading.value) return;
      const handler =
        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;

      loading.value = true;
      const { api, data } = handler();
      const { message, code } = await api(data);

      responseHandle({
        code,
        message,
        logout,
        handler: () => {
          showModel.value = false;
          loading.value = false;
          emit("reload");
        }
      });
    }
  });
}
function menu_type_change() {
  // const { menu_type } = ruleForm.value;
  // rules.menu_url[0].required = menu_type === "2";
}
function input_type_change() {
  // const { menu_type } = ruleForm.value;
  // rules.menu_url[0].required = menu_type === "2";
}
function type_type_change() {}
defineExpose({
  show,
  changeCurrentMenuId: (id: string) => (currentMenuId.value = id)
});
</script>

<template>
  <div>
    <el-form
      v-loading="loading"
      ref="formRef"
      :model="ruleForm"
      :rules="rules"
      label-width="90px"
      class="demo-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="审核状态" prop="status">
            <el-input v-model="ruleForm.status" placeholder="菜单名称" />
          </el-form-item>
          <el-form-item label="开票类型" prop="open_type">
            <el-select
              v-model="ruleForm.open_type"
              style="width: 100%"
              @change="menu_type_change"
              placeholder="菜单类型"
            >
              <el-option
                v-for="(si, sii) in open_type_list"
                :key="'type' + si.value + sii"
                :label="si.label"
                :value="si.value"
              />
            </el-select> </el-form-item
        ></el-col>

        <el-col :span="16">
          <el-form-item label="审核备注" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              :rows="3"
              type="textarea"
              maxlength="2000"
              placeholder="申请备注"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-row v-show="ruleForm.open_type !== '1'">
        <el-col :span="8">
          <el-form-item label="输入类型" prop="input_type">
            <el-select
              v-model="ruleForm.input_type"
              style="width: 100%"
              @change="input_type_change"
              placeholder="菜单类型"
            >
              <el-option
                v-for="(si, sii) in input_type_list"
                :key="'type' + si.value + sii"
                :label="si.label"
                :value="si.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col
          :span="16"
          style="padding: 0 0 0 16px"
          v-show="ruleForm.input_type === '1'"
        >
          <el-input
            v-model="barCodeInput"
            :rows="1"
            type="textarea"
            maxlength="30"
            placeholder="扫码枪输入处"
          />
        </el-col>
      </el-row>
      <el-row v-show="ruleForm.open_type !== '1'">
        <el-col :span="8">
          <el-form-item label="发票类型" prop="type_type">
            <el-select
              v-model="ruleForm.type_type"
              style="width: 100%"
              @change="type_type_change"
              :disabled="ruleForm.input_type === '1'"
              placeholder="发票类型"
            >
              <el-option
                v-for="(si, sii) in open_type_list"
                :key="'type' + si.value + sii"
                :label="si.label"
                :value="si.value"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="发票号码" prop="invCode">
            <el-input
              v-model="ruleForm.invCode"
              placeholder="发票号码"
              :disabled="ruleForm.input_type === '1'"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="发票代码" prop="invNum">
            <el-input
              v-model="ruleForm.invNum"
              placeholder="发票代码"
              :disabled="ruleForm.input_type === '1'"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="开票日期" prop="open_date">
            <el-input-number
              v-model="ruleForm.open_date"
              :precision="0"
              style="width: 100%"
              :min="1"
              :max="999"
              :disabled="ruleForm.input_type === '1'"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="税前金额" prop="subtotal_fee">
            <el-input-number
              v-model="ruleForm.subtotal_fee"
              :precision="2"
              style="width: 100%"
              :min="0"
              :max="999999"
              :disabled="ruleForm.input_type === '1'"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="校验码" prop="total_fee">
            <el-input
              v-model="ruleForm.total_fee"
              :disabled="ruleForm.input_type === '1'"
              placeholder="校验码"
            /> </el-form-item
        ></el-col>
      </el-row>
      <div class="flex justify-end">
        <el-button :loading="loading" type="primary" @click="handleSave"
          >保存</el-button
        >
      </div>
    </el-form>
  </div>
</template>
