<!-- 
  TODO 新增、编辑客户账期
 -->
<template>
  <SysDialog
    class="account-period-edit"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-form
        ref="addEditAccountPeriodRef"
        :model="addEditAccountPeriodForm"
        inline
        :rules="addEditAccountPeriodFormRules"
        label-width="80px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              prop="customerId"
              label="客户名称"
              :style="setFormItemWidth"
            >
              <BaseSelect
                v-model:modelValue="addEditAccountPeriodForm.customerId"
                :clearable="true"
                :options="customertList"
                placeholder="请选择客户"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="accountPeriod"
              label="账期类型"
              :style="setFormItemWidth"
            >
              <BaseSelect
                v-model:modelValue="addEditAccountPeriodForm.accountPeriod"
                :clearable="true"
                :options="accountPeriodTypeList"
                placeholder="请选择账期类型"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              prop="accountingPeriodLimit"
              label="账期额度"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="addEditAccountPeriodForm.accountingPeriodLimit"
                placeholder="请输入账期额度"
                oninput="value = value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="checkoutTypes"
              label="结账类型"
              :style="setFormItemWidth"
            >
              <BaseSelect
                v-model:modelValue="addEditAccountPeriodForm.checkoutTypes"
                :clearable="false"
                :options="addEditAccountPeriodState.checkoutTypesList"
                placeholder="请选择结账类型"
                style="width: 100%;"
                @change="changeCheckoutTypes"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="geShowCheckoutDays">
          <el-col :span="12">
            <el-form-item
              prop="checkoutDays"
              label="结账天数"
              :style="setFormItemWidth"
              :required="geShowCheckoutDays"
            >
              <el-input
                v-model="addEditAccountPeriodForm.checkoutDays"
                placeholder="请输入结账天数"
                clearable
                oninput="value = value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import type { ListIitem } from "@/api/base/BaseDataModel";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { useAccountPeriodEdit } from "@/composables/accountPeriod/useAccountPeriodEdit";
import { deal_FindGetItemName, deal_FindItemName } from "@/utils/dealFindData";

//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "新增账期",
  width: 800,
  height: 0,
});
const props = defineProps<{
  customertList: ListIitem[];
  accountPeriodTypeList: ListIitem[];
}>();
const emit = defineEmits(["saveAccountPeriod"]);
// 校验表单
const { formValidate, resetForm } = useEleFormValidate();

const {
  addEditAccountPeriodForm,
  addEditAccountPeriodFormRules,
  addEditAccountPeriodState,
  addEditAccountPeriodRef,
  setFormItemWidth,
  geShowCheckoutDays,
  changeCheckoutTypes,
  onclose,
  show,
} = useAccountPeriodEdit(onClose, onShow, resetForm, getBindValue);

// 确定
const confirm = async () => {
  const isValidate = await formValidate(addEditAccountPeriodRef.value);
  if (!isValidate) return;
  addEditAccountPeriodForm.accountPeriodName = deal_FindGetItemName(addEditAccountPeriodForm.accountPeriod, props.accountPeriodTypeList)
  addEditAccountPeriodForm.customerName = deal_FindGetItemName(addEditAccountPeriodForm.customerId, props.customertList)
  addEditAccountPeriodForm.checkoutTypesName = deal_FindGetItemName(addEditAccountPeriodForm.checkoutTypes, addEditAccountPeriodState.checkoutTypesList)
  setLoading(true)
  emit("saveAccountPeriod", addEditAccountPeriodForm, setLoading, onclose);
};

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
