<!--
 * AG-grid 细节网格
 * https://www.ag-grid.com/vue-data-grid/master-detail/
 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';

const defaultColDef = {
  resizable: true,
  flex: 1,
};

const gridApi = ref<any>(null);
const columnApi = ref<any>(null);
const detailCellRendererParams = reactive({
  // 提供要在细节网格上使用的网格选项
  detailGridOptions: {
    columnDefs: [
      { field: 'name', headerName: '姓名' },
      { field: 'remark', headerName: '备注' },
      { field: 'age', headerName: '年龄' },
    ],
    defaultColDef: {
      flex: 1,
    },
  },
  // 获得每个细节网格的行数
  getDetailRowData: (params: any) => {
    console.log('getDetailRowData params', params);
    params.successCallback(params.data.items || []);
  },
});

const state = reactive({
  columnDefs: [
    { field: 'year', headerName: '年份', cellRenderer: 'agGroupCellRenderer' },
    { field: 'age', headerName: '年龄' },
    {
      field: 'country',
      headerName: '国家',
    },
    {
      field: 'sport',
      headerName: '运动',
    },
    { field: 'gold', headerName: '金' },
    { field: 'silver', headerName: '银' },
    {
      field: 'bronze',
      headerName: '铜',
    },
  ],
  rowData: [] as any,
});

onMounted(() => {
  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then((result) => result.json())
    .then((remoteRowData) => {
      state.rowData = remoteRowData;
      state.rowData[0].items = [
        {
          name: '张三',
          remark: '法外狂徒张三',
          age: 18,
        },
        {
          name: '李四',
          remark: '张三的小弟',
          age: 17,
        },
        {
          name: '王五',
          remark: '张三舅舅',
          age: 54,
        },
        {
          name: '李大白',
          remark: '张三父亲',
          age: 50,
        },
        {
          name: '刘波',
          remark: '张三哥哥',
          age: 23,
        },
      ];
      console.log('rowData', state.rowData[0]);
    });

  // .then((remoteRowData) => (state.rowData = remoteRowData));
});

function cellWasClicked(event: any) {
  console.log('cellWasClicked >>>>', event);
}

function onGridReady(params: any) {
  gridApi.value = params.api;
  columnApi.value = params.columnApi;
}

function isRowMaster(dataItem: any) {
  let flag;
  if (dataItem && dataItem.items && dataItem.items.length > 0) {
    flag = true;
  } else {
    flag = false;
  }
  return flag;
}
</script>
<template>
  <div class="box">
    <!-- 
        rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
        animateRows=true：启用行动画
     -->

    <div>
      <ag-grid-vue
        style="height: 500px"
        class="ag-theme-alpine"
        :columnDefs="state.columnDefs"
        :rowData="state.rowData"
        :defaultColDef="defaultColDef"
        :isRowMaster="isRowMaster"
        :animateRows="true"
        :masterDetail="true"
        :detailCellRendererParams="detailCellRendererParams"
        @cell-clicked="cellWasClicked"
        @grid-ready="onGridReady"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>