/*
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-07-18 12:23:37
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-07-21 21:45:15
 * @FilePath: \vue3\stories\UploadTable.stories.ts
 * @Description:
 *
 */
import type { Meta, StoryObj } from '@storybook/vue3'
import ThUploadTable from '../packages/upload-table/index.vue'
import avatar from './assets/avatar.jpeg'

// 模拟2秒钟的接口请求
function request(formData: FormData) {
  let name = '佚名文件'
  let url = avatar
  const fileName = formData.get('name')
  const file = formData.get('file')
  if (typeof fileName === 'string') {
    name = fileName
  }
  else if (typeof file !== 'string' && file) {
    name = file.name
    url = URL.createObjectURL(file)
  }
  return new Promise<FileVO>((resolve) => {
    setTimeout(() => {
      resolve({
        id: Date.now(),
        name,
        url,
        createdBy: 'user',
      })
    }, 2000)
  })
}

const meta = {
  title: '表单组件/UploadTable',
  tags: ['表单组件', 'autodocs'],
  args: {
    accept: '.jpeg,.jpg,.png,.bmp',
    addText: '新增一行',
    allowDelete: true,
    allowReplace: false,
    disabled: false,
    emptyText: '暂无上传文件',
    hideAdd: false,
    label1: '文件名称',
    label2: '图片上传',
    label3: '操作',
    fileList: [],
    replacePopconfirm: '是否重新本行文件？',
    deletePopconfirm: '是否删除本行？',
    request,
  },
  render: args => ({
    components: { ThUploadTable },
    setup() {
      return { args }
    },
    template: `<th-upload-table
                  v-model:file-list="args.fileList"
                  v-model:disabled="args.disabled"
                  :accept="args.accept"
                  :add-text="args.addText"
                  :allow-delete="args.allowDelete"
                  :allow-replace="args.allowReplace"
                  :hide-add="args.hideAdd"
                  :label1="args.label1"
                  :label2="args.label2"
                  :label3="args.label3"
                  :replace-popconfirm="args.replacePopconfirm"
                  :delete-popconfirm="args.deletePopconfirm"
                  :request="args.request"
               />`,
  }),
} satisfies Meta<typeof ThUploadTable>
export default meta

type Story = StoryObj<typeof meta>

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