<template>
  <div class="p-4">
    <BasicTable @register="registerTable" class="components-table-demo-nested">
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'">
          <a>Publish</a>
        </template>
      </template>
      <template #expandedRowRender>
        <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
          <template #bodyCell="{ column }">
            <template v-if="column.dataIndex === 'state'">
              <span>
                <a-badge status="success" />
                Finished
              </span>
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <span class="table-operation">
                <a>Pause</a>
                <a>Stop</a>
                <a-dropdown>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>Action 1</a-menu-item>
                      <a-menu-item>Action 2</a-menu-item>
                    </a-menu>
                  </template>
                  <a> More </a>
                </a-dropdown>
              </span>
            </template>
          </template>
        </a-table>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';

  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Platform', dataIndex: 'platform', key: 'platform' },
    { title: 'Version', dataIndex: 'version', key: 'version' },
    { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    { title: 'Creator', dataIndex: 'creator', key: 'creator' },
    { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
    { title: 'Action', key: 'operation' },
  ];

  interface DataItem {
    key: number;
    name: string;
    platform: string;
    version: string;
    upgradeNum: number;
    creator: string;
    createdAt: string;
  }

  const data: DataItem[] = [];
  for (let i = 0; i < 3; ++i) {
    data.push({
      key: i,
      name: 'Screem',
      platform: 'iOS',
      version: '10.3.4.5654',
      upgradeNum: 500,
      creator: 'Jack',
      createdAt: '2014-12-24 23:12:00',
    });
  }

  const innerColumns = [
    { title: 'Date', dataIndex: 'date', key: 'date' },
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Status', dataIndex: 'state', key: 'state' },
    { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    {
      title: 'Action',
      dataIndex: 'operation',
      key: 'operation',
    },
  ];

  interface innerDataItem {
    key: number;
    date: string;
    name: string;
    upgradeNum: string;
  }

  const innerData: innerDataItem[] = [];
  for (let i = 0; i < 3; ++i) {
    innerData.push({
      key: i,
      date: '2014-12-24 23:12:00',
      name: 'This is production name',
      upgradeNum: 'Upgraded: 56',
    });
  }

  export default defineComponent({
    components: { BasicTable },
    setup() {
      // 列表页面公共参数、方法
      const { tableContext } = useListPage({
        tableProps: {
          title: '内嵌表格',
          dataSource: data,
          columns: columns,
          showActionColumn: false,
          rowKey: 'key',
          useSearchForm: false,
        },
      });
      //注册table数据
      const [registerTable] = tableContext;
      return {
        data,
        columns,
        innerColumns,
        innerData,
        registerTable,
      };
    },
  });
</script>