<template>
  <SysDialog
    custom-class="customer-group-repeatinfo"
    :visible="dialog.visible"
    v-bind="getBindValue"
    @onClose="onclose"
  >
    <template #content>
      <div>
        <!-- 列表数据 -->
        <VxeBasicTable
          ref="customerGroupRepeatInfoRef"
          v-bind="customerGroupRepeatInfoGridOptions"
        />
      </div>
    </template>
    <template #defineFooter>
      <div class="customer-feeSet-footer">
        <el-button @click="onclose"> 关闭 </el-button>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
} from "@/components/VxeTable/index";
import { ref, reactive } from "vue";
import { isArrayLength } from "@/utils/is";

//弹框属性
const { dialog, onClose, onShow } = useDialog();
const getBindValue = reactive({
  title: "费用分组信息冲突",
  top: "11vh",
  width: 1180,
  height: 0,
  overflowHidden: true,
  isFooter: true,
});
const customerGroupRepeatInfoGridOptions = reactive<BasicTableProps>({
  id: "customer_group_repeatinfo_table",
  border: true,
  keepSource: true,
  showOverflow: true,
  loading: false,
  rowConfig: { isHover: true },
  columnConfig: { resizable: false },
  columns: [
    {
      field: "feeSetTypeName",
      title: "费用名称",
      width: 180,
    },
    {
      field: "beginDate",
      title: "生效起始时间",
      width: 150,
    },
    {
      field: "endDate",
      title: "生效结束时间",
      width: 150,
    },
    {
      field: "customerNameList",
      title: "客户名称",
      minWidth: 160,
      formatter: ({ row }) => {
        if (!isArrayLength(row.customerNameList)) return "";
        return row.customerNameList.join("、");
      },
    },
  ],
  data: [],
});
const customerGroupRepeatInfoRef = ref<VxeGridInstance>();
// 显示、隐藏
const show = (list: Recordable[]) => {
  customerGroupRepeatInfoGridOptions.data = list;
  onShow();
};
const onclose = () => {
  onClose();
};

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss">
.customer-group-repeatinfo {
  .el-dialog__footer {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    z-index: 99;
  }
}
</style>
