<template>
    <SysDialog class="addedit-product-rateratio" :visible="dialog.visible" v-bind="getBindValue" :confirm-loading="dialog.confirmLoading" @onClose="onclose"
        @onConfirm="confirm">
        <template #content>
            <el-form ref="addEditProductRateRatioRef" :model="addEditProductRateRatioForm" inline
                :rules="addEditProductRateRatioFormRules" label-width="80px">
                <el-form-item prop="productId" label="产品名称">
                    <BaseSelect v-model:modelValue="addEditProductRateRatioForm.productId"
                        :options="dealData.dealProductList" placeholder="请选择产品名称" @change="getProductName" />
                </el-form-item>
                <el-form-item prop="feeItemId" label="费用类型">
                    <BaseSelect v-model:modelValue="addEditProductRateRatioForm.feeItemId" :options="dealData.feeItemLists"
                        placeholder="请选择费用类型" @change="getFeeItemName" />
                </el-form-item>
                <el-form-item prop="cycleType" label="周期">
                    <BaseSelect v-model:modelValue="addEditProductRateRatioForm.cycleType" :filterable="false"
                        :options="cycleTypecist" placeholder="请选择周期"/>
                </el-form-item>
                <el-form-item label="共享产品">
                    <BaseSelect v-model:modelValue="addEditProductRateRatioForm.productIdList"
                        :options="dealData.dealProductIdList" :multiple="true" :collapse-tags="true" placeholder="请选择共享产品"
                        @change="changeProductNameList($event, dealData.dealProductIdList)" />
                </el-form-item>
                <el-form-item label="服务商">
                    <BaseSelect v-model:modelValue="addEditProductRateRatioForm.providerIdList"
                        :options="allProvidersList" :multiple="true" :collapse-tags="true" placeholder="请选择服务商"
                        @change="changeProviderNameList($event, allProvidersList)" />
                </el-form-item>
                <el-form-item label="状态">
                    <BaseSelect v-model:modelValue="addEditProductRateRatioForm.rateRatioState" :filterable="false"
                        :options="dealData.stateList" placeholder="请选择状态" @change="changeRateRatioStateName" />
                </el-form-item>
            </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 { useErrorConfirm } from '@/utils/useErrorConfirm';
import { useAddEditProductRateRatio } from '@/composables/productrateratio/useAddEditProductRateRatio';
import { ListIitem } from '@/api/base/BaseDataModel';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';

const { report } = useErrorConfirm()
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
    title: "产品费率",
    width: 675,
    height: 0
});
const props = defineProps<{
    productList: ListIitem[],
    feeItemLists: Recordable[],
    cycleTypecist: ListIitem[],
    allProvidersList: ListIitem[],
}>()
const emit = defineEmits(['saveProductRateRatio'])
// 校验表单
const { formValidate, resetForm } = useEleFormValidate();

const {
    addEditProductRateRatioFormRules,
    addEditProductRateRatioForm,
    addEditProductRateRatioRef,
    dealData,
    getProductName,
    getFeeItemName,
    changeProductNameList,
    changeProviderNameList,
    changeRateRatioStateName,
    show,
    onclose
} = useAddEditProductRateRatio(onClose, onShow, getBindValue, props, resetForm)

// 确定
const confirm = async () => {
    const isValidate = await formValidate(addEditProductRateRatioRef.value)
    if (!isValidate) return
    try {
        setLoading(true)
        // console.log(addEditProductRateRatioForm, ":<==产品费率");
        emit("saveProductRateRatio", addEditProductRateRatioForm, dealData.type, onclose, setLoading)
    } catch (error) {
        report(error)
    }
}

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