<script lang="ts" setup>
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 TreeSidePageableTable from "@/components/base/treeside-pageable-table/TreeSidePageableTable.vue";
import { get } from "@/common/http/request";

/**
 * 必须要的变量
 */

const getPageUrl = "/sale/repairrecord/getRepairReportPage";
const addUrl = "/sale/repairrecord/addRepairRecord";
const editUrl = "/sale/repairrecord/updateRepairRecord";
const removeUrl = "/sale/repairrecord/deleteRepairRecord";
const treeSideUrl = "/sys/keyaccount/getKeyAccountTree";
const keyAccountSelectUrl = "/sys/keyaccount/getKeyAccountSelectList";
const searchers = [
  {
    name: "searchCode",
    type: "text" as const,
    placeholder: $t("_prop.sale.repairrecord.productSn") + "/" + $t("_prop.sale.repairrecord.mac"),
    clearable: true,
  },
];

const validateIdentifier = (_rule: any, _value: any, callback: any) => {
  const formData = form.value;
  if (formData.productSn || formData.mac || formData.serialNum) {
    callback();
  } else {
    callback(new Error($t("_message.sale.repairrecord.input_identifier")));
  }
};

const rules = reactive<FormRules>({
  repairMark: [{ required: true, message: $t("_message.sale.repairrecord.input_repair_mark"), trigger: "blur" }],
  productSn: [{ validator: validateIdentifier, trigger: "blur" }],
});

const keyAccountOptions = ref<{ label: string; value: string }[]>([]);

const loadKeyAccountOptions = async () => {
  const res = await get(keyAccountSelectUrl);
  if (res.data) {
    keyAccountOptions.value = res.data.map((item: { label: string; value: string }) => ({
      label: item.label,
      value: item.value,
    }));
  }
};

onMounted(() => {
  loadKeyAccountOptions();
});

/**
 * 基本不变通用变量
 */
const tableRef = ref<InstanceType<typeof TreeSidePageableTable> | null>(null);
const { useAdd, useEdit, useRemove, useGeneralPageRef } = usePage(tableRef);
const { title, visible, formType, form } = useGeneralPageRef();

/**
 * 可以自定义的变量
 */

const add = () => {
  form.value = {};
  title.value = "_title.sale.repairrecord.add";
  visible.value = true;
  formType.value = false;
};

const edit = (row: any) => {
  title.value = "_title.sale.repairrecord.edit";
  form.value = { ...row };
  visible.value = true;
  formType.value = true;
};

const remove = (row: any) => {
  useRemove(removeUrl, row.id, "_message.sale.repairrecord.delete_message");
};

const submit = (formData: any, formRef: FormInstance | undefined) => {
  if (formRef !== undefined) {
    formRef.validate(valid => {
      if (valid) {
        if (formType.value) {
          useEdit(editUrl, formData, visible);
        } else {
          useAdd(addUrl, formData, 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>
  <TreeSidePageableTable
    :url="getPageUrl"
    :searchers="searchers"
    ref="tableRef"
    :tree-side-url="treeSideUrl"
    tree-side-node-name="id"
    tree-side-param-name="keyAccountIdSearch"
    :tree-side-title="$t('_message.common.all_customers')"
  >
    <template #tool-button>
      <DefaultToolButton @top-button-click="topButtonClick" />
    </template>
    <template #columns>
      <el-table-column :label="$t('_prop.sale.repairrecord.productType')" prop="productType" />
      <el-table-column :label="$t('_prop.sale.repairrecord.productSn')" prop="productSn" />
      <el-table-column :label="$t('_prop.sale.repairrecord.mac')" prop="mac" />
      <el-table-column :label="$t('_prop.sale.repairrecord.outProductDate')" prop="outProductDate" />
      <el-table-column :label="$t('_prop.common.createDate')" prop="createDate" />
      <el-table-column :label="$t('_prop.sale.repairrecord.repairCount')" prop="repairCount" />
      <el-table-column :label="$t('_prop.sale.repairrecord.repairMark')" prop="repairRecords" show-overflow-tooltip />
      <DefaultOperateButtonColumn @operate-button-click="operateButtonClick" />
    </template>
  </TreeSidePageableTable>
  <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-alert
        :title="$t('_message.sale.repairrecord.identifier_tip')"
        type="info"
        :closable="false"
        style="margin-bottom: 15px"
      />
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.repairrecord.productType')" prop="productType">
            <el-input v-model="form.productType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.repairrecord.productSn')" prop="productSn">
            <el-input
              v-model="form.productSn"
              :placeholder="$t('_message.sale.repairrecord.input_productSn_optional')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.repairrecord.mac')" prop="mac">
            <el-input v-model="form.mac" :placeholder="$t('_message.sale.repairrecord.input_mac_optional')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.devicesn.serialNum')" prop="serialNum">
            <el-input
              v-model="form.serialNum"
              :placeholder="$t('_message.sale.repairrecord.input_serialNum_optional')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.devicesn.softVersion')" prop="softVersion">
            <el-input
              v-model="form.softVersion"
              :placeholder="$t('_message.sale.repairrecord.input_softVersion_optional')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.devicesn.AlVersion')" prop="alVersion">
            <el-input
              v-model="form.alVersion"
              :placeholder="$t('_message.sale.repairrecord.input_alVersion_optional')"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('_prop.sale.repairrecord.keyAccountId')" prop="keyAccountId">
            <el-select v-model="form.keyAccountId" clearable style="width: 100%">
              <el-option
                v-for="item in keyAccountOptions"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="$t('_prop.sale.repairrecord.repairMark')" prop="repairMark">
        <el-input v-model="form.repairMark" type="textarea" :rows="3" />
      </el-form-item>
    </template>
  </BaseForm>
</template>
