<script setup lang="ts">
import {reactive, ref} from "vue";
import * as $api from "@/api/channel/index";
import {message} from "@/utils/message";
import type {FormInstance} from "element-plus";
import {cloneDeep} from "@pureadmin/utils";
import {enableOptions, serviceTypeOptions} from "@/constants/constants";

const title = "";
defineOptions({name: "templateEdit"});
const isDetail = ref(false);
const formRef = ref<FormInstance>();
// 初始化数据
const initData = {
  serviceId: undefined,
  privateKey: undefined,
  publicKey: undefined,
  status: 1,
  type: 1
};

// 表单校验规则
const formRules = {
  sellerId: [{required: true, message: "商户ID不能为空", trigger: "blur"}],
  dayMaxPayAmount: [
    {required: true, message: "每日限额不能为空", trigger: "blur"}
  ],
  onePayMaxAmount: [
    {required: true, message: "单笔限额不能为空", trigger: "blur"}
  ],
  type: [
    {required: true, message: "商户模式不能为空", trigger: "blur"}
  ],
  name: [{required: true, message: "名称不能为空", trigger: "blur"}],
  rate: [{required: true, message: "统一费率不能为空", trigger: "blur"}],
  status: [{required: true, message: "状态不能为空", trigger: "blur"}],
  code: [{required: true, message: "编码不能为空", trigger: "blur"}]

};

// 页面数据
const pageData: any = reactive({
  name: "",
  code: "",
  appId: "",
  privateKey: "",
  publicKey: "",
  astrictAmount: 0,
  sellerId: "",
  dayMaxPayAmount: 0,
  onePayMaxAmount: 0,
  astrictTrade: 0,
  rate: 0,
  status: 1,
  title: "",
  formLoading: false,
  mode: "add",
  isUpdate: false,
  // 表单数据
  formData: initData,
  formRules: formRules
});
// 暴露给父级调用
const emits = defineEmits(["ok", "close"]);
// 打开弹窗
const open = (data: any, dataSource: any, mode: string) => {
  pageData.formData = cloneDeep(data) || initData;
  if (mode === "edit") {
    pageData.title = `${title} - 编辑`;
    isDetail.value = false;
  } else if (mode === "detail") {
    pageData.title = `${title} - 查看`;
    isDetail.value = true;
  } else {
    pageData.title = `${title} - 新增`;
    isDetail.value = false;
  }
  pageData.dataSource = dataSource;
  pageData.isUpdate = !!pageData.formData.id;
  pageData.dialogVisible = true;
};
// 关闭弹窗
const handleClose = () => {
  pageData.dialogVisible = false;
  emits("close");
};
// 确定并关闭弹窗
const handleConfirm = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      const {id} = pageData.formData;
      if (id) {
        _update();
      } else {
        _save();
      }
    } else {
      message("表单校验失败", {type: "warning"});
    }
  });
};
const _save = () => {
  pageData.formLoading = true;
  const _data = cloneDeep(pageData.formData);
  $api
    .save(_data)
    .then((res: any) => {
      if (res.success) {
        _confirm();
      } else {
        message(res.message, {type: "warning"});
      }
    })
    .finally(() => {
      pageData.formLoading = false;
    });
};
const _update = () => {
  pageData.formLoading = true;
  const _data = cloneDeep(pageData.formData);
  $api
    .update(pageData.formData.id, _data)
    .then((res: any) => {
      if (res.success) {
        _confirm();
      } else {
        message(res.message, {type: "warning"});
      }
    })
    .finally(() => {
      pageData.formLoading = false;
    });
};
const _confirm = () => {
  pageData.dialogVisible = false;
  emits("ok");
};
defineExpose({open});
</script>

<template>
  <el-dialog v-model="pageData.dialogVisible" destroy-on-close :width="500">
    <template #header>
      <el-text class="mx-1" type="primary" size="large">{{
          pageData.title
        }}
      </el-text>
    </template>
    <div class="el-dialog-content">
      <el-form
        ref="formRef"
        :model="pageData.formData"
        style="width: 90%; margin: 20px auto 0"
        label-width="auto"
        :rules="pageData.formRules"
        :loading="pageData.formLoading"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="pageData.formData.name"
            clearable
            placeholder="请输入名称"

            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="pageData.formData.code"
            clearable
            placeholder="请输入编码"

            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="商户模式" prop="type">
          <el-select
            v-model="pageData.formData.type"
            clearable
            placeholder="请选择商户模式"
          >
            <el-option
              v-for="item in serviceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="appId" prop="appId">
          <el-input
            v-model="pageData.formData.appId"
            clearable
            placeholder="请输入appId"

            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="密钥" prop="password">
          <el-input type="textarea"
            v-model="pageData.formData.privateKey"
            clearable
            placeholder="请输入密钥"
            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="公钥" prop="password">
          <el-input type="textarea"
            v-model="pageData.formData.publicKey"
            clearable
            placeholder="请输入公钥"
            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="商户号" prop="sellerId">
          <el-input
            v-model="pageData.formData.sellerId"
            clearable
            placeholder="请输入商户号"

            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="每日限额" prop="dayMaxPayAmount">
          <el-input
            v-model="pageData.formData.dayMaxPayAmount"
            clearable
            placeholder="请输入每日限额"

            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="单笔限额" prop="onePayMaxAmount">
          <el-input
            v-model="pageData.formData.onePayMaxAmount"
            clearable
            placeholder="请输入单笔限额"

            :readonly="isDetail"
          />
        </el-form-item>
        <el-form-item label="统一费率" prop="rate">
          <el-input-number
            v-model="pageData.formData.rate"
            clearable
            placeholder="请输入统一费率"

            :readonly="isDetail"
          />‰
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="pageData.formData.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in enableOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button v-if="!isDetail" @click="handleClose">取消</el-button>
      <el-button v-if="!isDetail" type="primary" @click="handleConfirm"
      >确认
      </el-button
      >
    </template>
  </el-dialog>
</template>
