/*
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-07-18 12:30:07
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-07-21 21:40:46
 * @FilePath: \vue3\stories\SelectTableModal.stories.ts
 * @Description:
 *
 */
import type { Meta, StoryObj } from '@storybook/vue3'
import ThSelectTableModal from '../packages/select-table-modal/index.vue'

// 模拟1秒钟的接口请求
function request() {
  return new Promise<Page>((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        rows: [{ prop1: 'prop1', prop2: 'prop2', prop3: 'prop3' }],
        total: 10,
        message: 'ok',
      })
    }, 1000)
  })
}

const meta = {
  title: '表单组件/SelectTableModal',
  tags: ['表单组件', 'autodocs'],
  args: {
    value: '',
    rowKey: 'prop1',
    show: false,
    columns: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2' }, { label: 'label3', prop: 'prop3' }],
    formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
    defaultParams: {},
    request,
    layout: 'total, sizes, prev, pager, next, jumper',
    pageSizes: [10, 20, 30, 50],
    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
    hidePagination: false,
  },
  render: args => ({
    components: { ThSelectTableModal },
    setup() {
      return { args }
    },
    template: `<th-select-table-modal
                 v-model:show="args.show"
                 :row-key="args.rowKey"
                 :columns="args.columns"
                 :form-items="args.formItems"
                 :default-params="args.defaultParams"
                 :request="args.request"
                 layout="args.layout"
                 :page-sizes="args.pageSizes"
                 :pager-count="args.pagerCount"
              />`,
  }),
} satisfies Meta<typeof ThSelectTableModal>
export default meta

type Story = StoryObj<typeof meta>

export const Base: Story = {
  name: '基本使用',
}