<script lang="ts" setup name="TableS2Vue">
import { SheetComponent } from "@antv/s2-vue";
import { shallowRef, reactive, computed, ref } from "vue";
import "@antv/s2-vue/dist/style.min.css";
import "ant-design-vue/dist/antd.css";

const props = defineProps({
  tableInfo: {
    type: Object,
    default: {}
  }
})

// 数据
const rawDataCfg = ref<Object>({});

// 色板
const s2Palette = {
  basicColors: [
    'var(--el-color-regular)', // 角头、行头、列头 单元格文本及图标颜色、数据单元格图标颜色
    '#ffffff', // 行头、数据 单元格背景填充色
    '#F5F8FF', // 行头、数据 单元格 鼠标悬停/选中/聚焦 状态的背景填充色
    '#f2f2f2', // 角头、列头 背景填充色
    '#f2f2f2', // 列头 鼠标悬停/选中 背景填充色
    '#f2f2f2', // 刷选预选中状态蒙板背景填充色
    '#f2f2f2', // 行头单元格链接文本颜色
    '#EBF6F7', // 数据单元格柱状图填充色 resize 蒙层背景色、热区参考线颜色、热区悬停态背景颜色
    '#f2f2f2', // 数据单元格背景填充色、表格背景填充色
    '#d9d9d9', // 行头、数据 单元格边框颜色
    '#d9d9d9', // 角头、列头 单元格边框颜色
    '#d9d9d9', // 表体水平边框颜色（一级横向分割线）
    '#d9d9d9', // 表体垂直边框颜色（一级纵向分割线）
    'var(--el-color-regular)', // 数据单元格文本颜色
    'var(--el-color-regular)', // 行头 链接文本颜色、数据单元格鼠标悬停聚焦/鼠标刷选预中 边框颜色
  ],

  // ---------- semantic colors ----------
  semanticColors: {
    red: '#FF4D4F',
    green: '#29A294',
  },
};

// 组件参数
const rawOptions = {
  width: 600,
  height: 400,
  showSeriesNumber: props.tableInfo.showIndex == undefined ? true : props.tableInfo.showIndex,
  showDefaultHeaderActionIcon: false,
  pagination: {
    pageSize: 50,
    current: 1,
  },
};

// dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象
const dataCfg = shallowRef(rawDataCfg);
const options = reactive(rawOptions);
const adaptive = ref<Object>({});

const themeCfg = {
  theme: {
    colCell: {
      bolderText: {
        textAlign: 'left'
      }
    },
    dataCell: {
      text: {
        textAlign: 'left'
      }
    }
  },
  palette: s2Palette
}

const setTableData = (info) => {
  rawDataCfg.value = {
    fields: info.fields,
    meta: info.meta,
    data: info.data
  }
}

onBeforeMount(() => {
  setTableData(props.tableInfo)
})

onMounted(() => {
  adaptive.value = {
    width: true,
    height: true,
    getContainer: () => document.getElementById(props.tableInfo.id),
  }
})
</script>

<template>
  <div class="table_panel" :id="tableInfo.id">
    <SheetComponent sheetType="table" :dataCfg="dataCfg" :options="options" :adaptive="adaptive" :themeCfg="themeCfg"
      :showPagination="true" />
  </div>
</template>

<style lang="scss" scoped>
.table_panel {
  width: 100%;
  height: 100%;
}
</style>