<script lang="ts" setup>
import BasePageableTable from "@/components/base/base-pageable-table/BasePageableTable.vue";
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
import { usePage } from "@/composables/use-page";
import BaseForm from "@/components/base/base-form/BaseForm.vue";
import { $t } from "@/common/languages";
import type { FormInstance, FormRules } from "element-plus";
import { formatDate } from "@/common/utils/format-utils";

/**
 * 必须要的变量
 */
// defineOptions({
//   name: "vendor",
// });
const getPageUrl = "/sys/vendor/getVendorPage";
const addUrl = "/sys/vendor/addVendor";
const editUrl = "/sys/vendor/updateVendor";
const removeUrl = "/sys/vendor/deleteVendor";
const searchers = [{ name: "vendorName", type: "text" as const, placeholder: $t("_prop.systemset.vendor.vendorName") }];
const rules = reactive<FormRules>({
  vendorName: [{ required: true, message: $t("_message.systemset.vendor.input_vendorName"), trigger: "blur" }],
  contactPerson: [{ required: true, message: $t("_message.systemset.vendor.input_contactPerson"), trigger: "blur" }],
  tel: [{ required: true, message: $t("_message.common.input_tel"), trigger: "blur" }],
  address: [{ required: true, message: $t("_message.common.input_address"), trigger: "blur" }],
  vendorMark: [{ required: true, message: $t("_message.systemset.vendor.input_vendorMark"), trigger: "blur" }],
});
/**
 * 基本不变通用变量
 */
const tableRef = ref<InstanceType<typeof BasePageableTable> | null>(null);
const { useAdd, useEdit, useRemove, useGeneralPageRef } = usePage(tableRef);
const { title, visible, formType, form } = useGeneralPageRef();
/**
 * 可以自定义的变量
 */

const add = () => {
  form.value = {};
  title.value = "_title.systemset.vendor.add";
  visible.value = true;
  formType.value = false;
};
const edit = (row: any) => {
  title.value = "_title.systemset.vendor.edit";
  form.value = { ...row };
  visible.value = true;
  formType.value = true;
};
const remove = (row: any) => {
  useRemove(removeUrl, row.id, "_message.systemset.vendor.delete_message");
};
const submit = (form: any, formRef: FormInstance | undefined) => {
  if (formRef !== undefined) {
    formRef.validate(valid => {
      if (valid) {
        if (formType.value) useEdit(editUrl, form, visible);
        else useAdd(addUrl, form, visible);
      }
    });
  }
};
const topButtonClick = (eventName: string) => {
  switch (eventName) {
    case "add":
      add();
      break;
  }
};
const operateButtonClick = (eventName: string, row: any) => {
  switch (eventName) {
    case "edit":
      edit(row);
      break;
    case "remove":
      remove(row);
      break;
  }
};
</script>
<template>
  <BasePageableTable :url="getPageUrl" :searchers="searchers" ref="tableRef">
    <template #tool-button>
      <DefaultToolButton @top-button-click="topButtonClick" />
    </template>
    <template #columns>
      <el-table-column :label="$t('_prop.systemset.vendor.vendorName')" prop="vendorName" />
      <el-table-column :label="$t('_prop.systemset.vendor.contactPerson')" prop="contactPerson" width="85" />
      <el-table-column :label="$t('_prop.common.tel')" prop="tel" width="130" />
      <el-table-column :label="$t('_prop.common.address')" prop="address" />
      <el-table-column :label="$t('_prop.systemset.vendor.vendorMark')" prop="vendorMark" />
      <el-table-column :label="$t('_prop.common.createDate')" prop="createDate" width="130" :formatter="formatDate" />
      <DefaultOperateButtonColumn @operate-button-click="operateButtonClick" />
    </template>
  </BasePageableTable>
  <BaseForm v-model:visible="visible" @submit="submit" v-model:form="form" :title="$t(title)" :rules="rules">
    <template #form-items>
      <el-form-item prop="id" v-if="false"><el-input v-model="form.id" /></el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('_prop.systemset.vendor.vendorName')" prop="vendorName">
            <el-input
              class="two-col-input"
              v-model="form.vendorName"
              :placeholder="$t('_message.systemset.vendor.input_vendorName')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('_prop.systemset.vendor.contactPerson')" prop="contactPerson">
            <el-input
              class="two-col-input"
              v-model="form.contactPerson"
              :placeholder="$t('_message.systemset.vendor.input_contactPerson')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('_prop.common.tel')" prop="tel">
            <el-input class="two-col-input" v-model="form.tel" :placeholder="$t('_message.common.input_tel')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('_prop.common.address')" prop="address">
            <el-input class="two-col-input" v-model="form.address" :placeholder="$t('_message.common.input_address')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="password-box">
        <el-col :span="12">
          <!-- <el-form-item label="所在集团"><BaseSelect :url="roleUrl" name="roleId" label="roleName" /></el-form-item> -->
        </el-col>
      </el-row>
      <el-form-item :label="$t('_prop.systemset.vendor.vendorMark')" prop="vendorMark">
        <el-input
          class="two-col-input"
          v-model="form.vendorMark"
          :placeholder="$t('_message.systemset.vendor.input_vendorMark')"
        />
      </el-form-item>
    </template>
  </BaseForm>
</template>
