/*
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-08-16 17:33:41
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-09-14 13:25:41
 * @FilePath: \vue3\stories\UploadList.stories.ts
 * @Description:
 *
 */
import type { Meta, StoryObj } from '@storybook/vue3'
import ThUploadList from '../packages/upload-list/index.vue'
import avatar from './assets/avatar.jpeg'

interface Config {
  onUploadProgress: (e: Pick<ProgressEvent, 'loaded' | 'total'>) => void
}

// 模拟2秒钟的接口请求
function request(formData: FormData, config?: Config) {
  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) => {
    let loaded = 0
    const t = setInterval(() => {
      loaded += 100
      config && config.onUploadProgress && config.onUploadProgress({
        loaded,
        total: 2000,
      })
      if (loaded === 2000) {
        clearInterval(t)
        resolve({
          id: Date.now(),
          name,
          url,
          createdBy: 'user',
        })
      }
    }, 100)
  })
}
const meta = {
  title: '表单组件/UploadList',
  component: ThUploadList,
  args: {
    accept: '*',
    disabled: false,
    fileList: [],
    request,
    filePath: '/',
    maxsize: 100,
    listType: 'text',
    limit: 12,
  },
  argTypes: {
    listType: {
      control: 'inline-radio',
      options: ['text', 'picture-card', 'picture'],
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ThUploadList>
export default meta

type Story = StoryObj<typeof meta>

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

export const VModel: Story = {
  name: '双向绑定',
  args: {
    accept: '*',
    disabled: false,
    fileList: [],
    request,
    filePath: '/',
    maxsize: 100,
    listType: 'text',
  },
  argTypes: {
    listType: {
      control: 'inline-radio',
      options: ['text', 'picture-card', 'picture'],
    },
  },
  render: args => ({
    components: { ThUploadList },
    setup() {
      return { args }
    },
    template: `
      值：{{ args.fileList }}
      <th-upload-list 
        v-model:file-list="args.fileList"
        :accept="args.accept"
        :disabled="args.disabled" 
        :request="args.request"
        :file-path="args.filePath"
        :maxsize="args.maxsize"
      />
    `,
  }),
}

export const Disabled: Story = {
  name: '禁用',
  args: {
    disabled: true,
    fileList: [{
      id: Date.now(),
      name: avatar,
      url: avatar,
      createdBy: 'user',
    }],
  },
}