/*
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-08-14 11:07:15
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-08-14 19:35:09
 * @FilePath: \vue3\stories\SelectTransferModal.stories.ts
 * @Description:
 *
 */
import type { Meta, StoryObj } from '@storybook/vue3'
import ThSelectTransferModal from '../packages/select-transfer-modal/index.vue'

// 模拟800毫秒钟的接口请求
function request(e: Record<'pageNum' | 'pageSize', number>) {
  return new Promise<Page>((resolve) => {
    setTimeout(() => {
      const rows: any[] = []
      for (let index = 0; index < e.pageSize; index++) {
        const id = (e.pageNum - 1) * e.pageSize + index
        rows.push({
          id,
          name: `name${id}`,
          value: `value${id}`,
        })
      }
      resolve({
        code: 200,
        rows,
        total: 9999,
        message: 'ok',
      })
    }, 800)
  })
}

const meta = {
  title: '表单组件/SelectTransferModal',
  tags: ['表单组件', 'autodocs'],
  args: {
    value: [],
    show: false,
    defaultParams: {},
    formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
    request,
    pageSizes: [20, 50, 100, 200],
    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
    props: { key: 'id', label: 'name', disabled: 'disabled' },
    hidePagination: false,
    title: '选择',
    width: '70%',
    zIndex: 2023,
  },
  render: args => ({
    components: { ThSelectTransferModal },
    setup() {
      return { args }
    },
    template: `<th-select-transfer-modal
                 v-model:value="args.value"
                 v-model:show="args.show"
                 :form-items="args.formItems"
                 :default-params="args.defaultParams"
                 :hide-pagination="args.hidePagination"
                 :request="args.request"
                 :layout="args.layout"
                 :page-sizes="args.pageSizes"
                 :pager-count="args.pagerCount"
                 :props="args.props"
                 :title="args.title"
                 :width="args.width"
                 :z-index="args.zIndex"
               />`,
  }),
} satisfies Meta<typeof ThSelectTransferModal>
export default meta

type Story = StoryObj<typeof meta>

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