<script setup lang="ts">
import { ref } from 'vue';
import { type VxeGridInstance, type VxeGridProps } from 'vxe-pc-ui';
import type { SupplierModel } from '@/model/care.model';
type FollowModel = Partial<SupplierModel>;
const props = defineProps<{ data: FollowModel }>();
// 定义居家项目表格数据
const homeData = ref<Array<{ project: string }>>([]);
// 定义线下项目表格数据
const offlineData = ref<Array<{ project: string }>>([]);
// 定义线上权益表格数据
const onlineData = ref<Array<{ project: string }>>([]);
// 居家项目表格配置
const homeGridOptions = reactive<VxeGridProps>({
  border: true,
  autoResize: true,
  columns: [
    { type: 'seq', title: '序号', width: 80 },
    { field: 'project', title: '实体商品', width: 246 },
  ],
  data: homeData.value,
});
// 线下项目表格配置
const offlineGridOptions = reactive<VxeGridProps>({
  border: true,
  autoResize: true,
  columns: [
    { type: 'seq', title: '序号', width: 80 },
    { field: 'project', title: '线下服务', width: 246 },
  ],
  data: offlineData.value,
});
// 线上权益表格配置
const onlineGridOptions = reactive<VxeGridProps>({
  border: true,
  autoResize: true,
  columns: [
    { type: 'seq', title: '序号', width: 80 },
    { field: 'project', title: '线上权益', width: 246 },
  ],
  data: onlineData.value,
});
// 表格引用
const homeGridRef = ref<VxeGridInstance>();
const offlineGridRef = ref<VxeGridInstance>();
const onlineGridRef = ref<VxeGridInstance>();
onMounted(() => {
  if (props?.data?.offlineCPTypes?.length > 0) {
    props.data.offlineCPTypes.forEach((item: string) => {
      offlineData.value.push({ project: item });
    });
  }else{
    offlineData.value = [];
  }
  if (props?.data?.onlineCPTypes?.length > 0) {
    props.data.onlineCPTypes.forEach((item: string) => {
      homeData.value.push({ project: item });
    });

  }else{
    homeData.value = [];
  }
  if (props?.data?.outlineCPTypes?.length > 0) {
    props.data.outlineCPTypes.forEach((item: string) => {
      onlineData.value.push({ project: item });
    });
  }else{
    onlineData.value = [];
  }
});
</script>

<template>
  <div class="tables-container">
    <div class="table-wrapper">
      <vxe-grid ref="homeGridRef" v-bind="homeGridOptions" />
    </div>
    <div class="table-wrapper">
      <vxe-grid ref="offlineGridRef" v-bind="offlineGridOptions" />
    </div>
    <!-- 线上权益 -->
    <div class="table-wrapper">
      <vxe-grid ref="onlineGridRef" v-bind="onlineGridOptions" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.tables-container {
  display: flex;
  height: 600px;
}

.table-wrapper {
  flex: 1;
}
</style>
