<!-- 
  TODO 批量修改客户账期额度
 -->
<template>
  <SysDialog
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <div class="pt-12">
        <el-form
          ref="accountPeriodLimitRef"
          :model="accountPeriodLimitForm"
          inline
          :rules="accountPeriodLimitFormRules"
          label-width="100px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="customerNameList"
                label="客户名称"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="addEditAccountPeriodState.customerName"
                  :autosize="{ minRows: 10, maxRows: 24 }"
                  type="textarea"
                  @blur="blurCustomerName"
                />
              </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="accountPeriodLimitForm.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="accountPeriod"
                label="账期类型"
                :style="setFormItemWidth"
              >
                <BaseSelect
                  v-model:modelValue="accountPeriodLimitForm.accountPeriod"
                  :clearable="true"
                  :options="accountPeriodTypeList"
                  placeholder="请选择账期类型"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { ListIitem } from "@/api/base/BaseDataModel";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { useAccountPeriodLimitEdit } from "@/composables/accountPeriod/useAccountPeriodLimitEdit";
import { useColWidth } from "@/hooks/useColWidth";
import { reactive } from "vue";

//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "新增账期",
  width: 780,
  height: 0
});
defineProps<{
  accountPeriodTypeList: ListIitem[];
}>();
const emit = defineEmits(["saveAccountPeriodLimit"]);
const { setFormItemWidth } = useColWidth();
const {
  accountPeriodLimitForm,
  accountPeriodLimitFormRules,
  addEditAccountPeriodState,
  accountPeriodLimitRef,
  onclose,
  show,
  confirm,
  blurCustomerName
} = useAccountPeriodLimitEdit(onClose, onShow, setLoading, emit);

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