import useLoading from '@/hooks/loading';
import type { Pagination } from '@/types/global';
import { getTokenFrom } from '@/utils/auth';
import {
  Drawer,
  Table,
  type TableData,
  type TableColumnData,
  Tag,
  Space
} from '@arco-design/web-vue';
import {
  computed,
  defineComponent,
  onMounted,
  ref,
  watchEffect,
  type PropType
} from 'vue';
const { loading, setLoading } = useLoading(false);
import {
  queryTMallAccountDetailList,
  type TMallAccountAddRecord,
  type TMallAccountDetailRecord
} from '@/api/t-mall-game-account';

export const PaymentRecordTable = defineComponent({
  name: 'userTMallGameAccountDetailDrawer',
  props: {
    id: {
      type: String,
      Default: ''
    }
  },
  setup(props) {
    const tableData = ref<TMallAccountDetailRecord[]>([]);
    const pagination = ref<Pagination>({
      current: 1,
      pageSize: 10,
      total: 0
    });
    const columns: TableColumnData[] = [
      {
        title: '序号',
        render: (data: { rowIndex: number }) => {
          return data.rowIndex + 1;
        }
      },
      {
        title: '金额',
        dataIndex: 'amount'
      },
      // {
      //   title: '关联订单',
      //   dataIndex: 'orderNo'
      // },
      {
        title: '状态',
        dataIndex: 'status',
        render: (data: { record: TableData; rowIndex: number }) =>
          data.record.status === 'success' ? (
            <Tag size='small' color='green'>
              成功
            </Tag>
          ) : (
            <Tag size='small' color='red'>
              失败
            </Tag>
          )
      },
      {
        title: '备注',
        dataIndex: 'notes'
      },
      {
        title: '时间',
        dataIndex: 'createdAt'
      }
    ];
    const queryData = (id: string) => {
      queryTMallAccountDetailList({
        id: id,
        current: pagination.value.current,
        pageSize: pagination.value.pageSize
      })
        .then(res => {
          setLoading(true);
          tableData.value = res.data.list;
          pagination.value.total = res.data.total;
        })
        .finally(() => setLoading(false));
    };
    watchEffect(() => {
      pagination.value.current = 1;
      queryData(props.id);
    });
    onMounted(() => {
      if (getTokenFrom() === 'login') {
        queryData(props.id);
      }
    });
    return () => (
      <Table
        data={tableData.value}
        columns={columns}
        loading={loading.value}
        bordered={false}
        pagination={{
          pageSize: pagination.value.pageSize,
          current: pagination.value.current,
          total: pagination.value.total,
          showPageSize: true,
          pageSizeOptions: [10, 15, 20, 50, 100]
        }}
        onPageChange={(page: number) => {
          pagination.value.current = page;
          queryData(props.id);
        }}
        onPageSizeChange={(pageSize: number) => {
          pagination.value.pageSize = pageSize;
          queryData(props.id);
        }}
      />
    );
  }
});
export default defineComponent({
  name: 'userTMallGameDetailDrawer',
  props: {
    item: {
      type: Object as PropType<TMallAccountAddRecord>,
      Default: null
    },
    visible: {
      type: Boolean,
      Default: false
    }
  },
  emits: {
    'update:visible': (_visible: boolean) => true
  },
  setup(props, { emit }) {
    const visible = computed(() => props.visible);
    // 分页
    return () => (
      <Drawer
        visible={visible.value}
        title='账户流水'
        width='60%'
        footer={false}
        onCancel={() => emit('update:visible', false)}
      >
        <Space direction='vertical' size='medium' fill>
          <PaymentRecordTable id={props.item?.id} />
        </Space>
      </Drawer>
    );
  }
});
