<template>
  <SysDialog class="view-bill-summary" :title="dialog.title" :width="getBindValue.width" :height="getBindValue.height"
    :visible="dialog.visible" @onClose="hanleOnClose" @onConfirm="confirm">
    <!-- 查看账单汇总弹窗 -->
    <template #content>
      <!-- 基础表单 -->
      <el-form class="el-search-form" :model="state.listParm" :inline="true">
        <el-row>
          <el-col :span="4">
            <el-form-item class="item-form" label="渠道商">
              <el-select v-model="state.listParm.channelId" :filterable="true" :filter-method="definFilterChannel" clearable>
                <el-option v-for="item in channelProviderList_" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"> 
            <el-form-item class="item-form" label="月份">
              <el-select v-model="state.listParm.month" clearable>
                <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="item-form" label="主体">
              <el-select v-model="state.listParm.enterpriseDominantId" :filterable="true" :filter-method="definFilter"
                clearable>
                <el-option v-for="item in companyEntityList_" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="col-left">
            <el-button type="primary" :icon="Search" plain @click="billMainPageList">
              查询
            </el-button>
            <el-button type="primary" :icon="Download" @click="hanleExport" :loading="state.exportDisabled">
              导出
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格数据 -->
      <BaseTable @register="registerTable" />
      <!-- 分页- -->
      <el-pagination v-model:current-page="listParm.pageNum" class="page-data" :page-sizes="[10, 20, 40, 80, 100]"
        :page-size="listParm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="listParm.total" background
        @size-change="sizeChange" @current-change="currentChange" />
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { Download, Search } from '@element-plus/icons-vue';
import { BaseTable, useTable } from '@/components/Table';
import useBillMainTable from '@/composables/business/billmain/useBillMainTable';
import useViewBillMainRate from '@/composables/business/billmain/useViewBillMainRate';
import { ListIitem } from '@/api/base/BaseDataModel';
import useDefinFilter from '@/hooks/useDefinFilter';

// 弹框一些配置
const getBindValue = ref<Recordable>({
  width: 1100,
  height: 550
})

const props = defineProps<{
  channelProviderList: ListIitem[]//渠道商列表
  monthList: ListIitem[]//月份列表
  companyEntityList: ListIitem[]//主体列表
}>()

// 自定义select搜索
const { definFilter, typeList: companyEntityList_ } = useDefinFilter(props, 'companyEntityList')
const { definFilter: definFilterChannel, typeList: channelProviderList_ } = useDefinFilter(props, 'channelProviderList')

//弹框属性
const { dialog, onClose, onShow } = useDialog()

// 表格
const { viewBillMain } = useBillMainTable()
const [registerTable] = useTable(viewBillMain)

// 基础数据处理 
const { show, confirm, hanleOnClose, sizeChange, currentChange, billMainPageList, hanleExport, listParm, state } = useViewBillMainRate(dialog, onClose, onShow, viewBillMain)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
    
<style lang="scss" scoped>
.view-bill-summary {
  .col-left {
    padding-left: 12px;
  }
  .item-form {
    width: 100%;
    :deep(.el-form-item__label) {
      padding-left: 5px;
    }
  }
  .el-search-form {
    :deep(.el-form-item) {
      margin-right: 14px;
    }
  }

  .page-data {
    padding-top: 20px;
  }
}
</style>