<template>
  <div>
    <Input v-model:value="value" />
    <BasicUpload
      v-model:value="files"
      :maxSize="20"
      :maxNumber="10"
      @change="handleChange"
      :api="uploadApi"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue';
  import { BasicUpload } from '/@/components/Upload';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Input } from 'ant-design-vue';
  import { uploadApi } from '/@/api/sys/upload';

  export default defineComponent({
    name: 'CustomUpload',
    components: { Input, BasicUpload },
    setup() {
      const { createMessage } = useMessage();
      const state = reactive({
        files: [],
        value: '',
      });
      state.files = [
        'https://img0.baidu.com/it/u=1582845927,77740937&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        'https://img2.baidu.com/it/u=3445578133,3485963344&fm=26&fmt=auto',
      ];
      state.value = state.files.toString();
      console.log(`ss11state.value`, state.value);
      function handleChange(list: string[]) {
        console.log(`ss list`, list);
        createMessage.info(`已上传文件${JSON.stringify(list)}`);
        console.log(`ss state.value2`, state.value);
        state.value = list.toString();
        console.log(`ss state.value`, state.value);
      }
      return {
        handleChange,
        uploadApi,
        ...toRefs(state),
      };
    },
  });
</script>
