<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
      @onClose="onClose" @onConfirm="confirm">
      <template #content>
        <el-form ref="addCustomerFeeSetForm" :model="addModel" :rules="rules" label-width="80px" size="mini">
          <el-row>  
            <el-col :span="12" :offset="0">
              <el-form-item prop="feeSetName" label="费用名称">
                <el-input v-model="addModel.feeSetName" />
              </el-form-item>
            </el-col>     
            <el-col :span="12" :offset="0">
           <el-form-item
              prop="productId"
              label="产品"
            >           
              <el-select
                v-model="addModel.productId"
                clearable
                filterable="true"
                placeholder="请选择产品"
              >
                <el-option
                  v-for="item in productSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>        
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
          <el-form-item
              prop="groupId"
              label="分组"
            >           
              <el-select
                v-model="addModel.groupId"
                clearable
                filterable="true"
                placeholder="请选择分组"
              >
                <el-option
                  v-for="item in groupSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>

        <el-col :span="12" :offset="0">
           <el-form-item
              prop="orgId"
              label="分公司"
            >           
              <el-select
                v-model="addModel.orgId"
                clearable
                filterable="true"
                placeholder="请选择分公司"
              >
                <el-option
                  v-for="item in orgSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
            <el-form-item
              prop="customerId"
              label="客户"
            >           
              <el-select
                v-model="addModel.customerId"
                clearable
                filterable="true"
                placeholder="请选择客户"
              >
                <el-option
                  v-for="item in customerSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col> 
            <el-col :span="12" :offset="0">
                <el-form-item
              prop="feeSetType"
              label="费用类型"
            >           
              <el-select
                v-model="addModel.feeSetType"
                clearable
                filterable="true"
                placeholder="请选择费用类型"
              >
                <el-option
                  v-for="item in feeSetTypeSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>            
            <el-col :span="12" :offset="0">
              <el-form-item prop="beginDate" label="生效时间">
                <el-date-picker 
                v-model="addModel.beginDate"                            
                type="date" 
                placeholder="选择日期" 
                :picker-options="pickerOptions"
                />
              </el-form-item>
            </el-col>
          </el-row>  
        </el-form>
      </template>
    </SysDialog>
  </template>
  <script setup lang='ts'>
  import SysDialog from '@/components/SysDialog.vue';
  import useDialog from '@/hooks/useDialog';
  import useBaseModel from '@/composables/customerfeeset/useBaseModel'
  import useAddCustomerFeeSet from '@/composables/customerfeeset/useAddCustomerFeeSet';
  //弹框属性
  const { dialog, onClose, onShow } = useDialog()
  
  //声明事件
  const emit = defineEmits(['save'])
  
  const { rules } = useBaseModel();
  
  const { confirm, show, addModel, addCustomerFeeSetForm,pickerOptions } = useAddCustomerFeeSet(dialog, onClose, onShow, emit)

   //产品下拉列表框
 const props = defineProps({
    productSelectList:      {type: Object},
    groupSelectList:        {type: Object},
    orgSelectList:          {type: Object},
    customerSelectList:     {type: Object},
    feeSetTypeSelectList:   {type: Object},
});   
  
  //父组件调用子组件显示弹框
  //暴露出去给外部使用
  defineExpose({
    show
  })
  </script>
  <style scoped lang='scss'>  
  </style>