<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-08-03 21:09:55
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-08-03 22:23:03
 * @FilePath: /ouicai_web_framework_vite_ep_nolang/src/views/backend/mobileUpload.vue
-->
<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <div class="flex align-center column" style="width:100%;padding: 20px;">
        <div class="box mb-20">
          <h2>图片同步上传</h2>
        </div>
        <div class="box mb-20">
          <span>表单编号：{{formId}}</span>
        </div>
        <div class="box">
          <el-upload v-model:file-list="fileList" :action="uploadUrl" @success="onSuccess" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <Icon name="fa fa-plus" size="18"></Icon>
          </el-upload>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script  lang="ts">
import { UploadProps, UploadUserFile } from 'element-plus'
import { defineComponent, ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
import { fileUploadUrl } from '/@/api/common'
import { Plus } from '@element-plus/icons-vue'
import Icon from '/@/components/icon/index.vue'
import socketClass from '/@/utils/socketTools'
import { useAdminInfo } from '/@/stores/adminInfo'
import { uuid } from '/@/utils/random'
export default defineComponent({
    name: '',
    setup() {
        let socket = new socketClass()
        const admininfo = useAdminInfo()
        const data = reactive({
            formId:0
        })
        const uploadUrl = ref(fileUploadUrl())
        const fileList = ref<UploadUserFile[]>([])
        const onSuccess = (result: any, file: any, fileList: any) => {
            let message = {
        id: uuid(),
        send: "图片移动上传",
        sendUserId: 1252627955515461,
        receiverUserId: data.formId,
        info: result.data.previewUrl,
        type: 1,
    }
    socket.onSend(message)
        }
        const onRemove = () => {}
        const dialogImageUrl = ref('')
        const dialogVisible = ref(false)
        const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
            console.log(uploadFile, uploadFiles)
        }
        const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
            dialogImageUrl.value = uploadFile.url!
            dialogVisible.value = true
        }
        const GetUrlParams = () => {
            let url = window.location.href
            const str = url.substr(url.indexOf("?")+1,url.length)
            const params = str.split('&')
            const id = params[0].split('=')[1]
            data.formId= Number(id)
        }

        onMounted(()=>{
            GetUrlParams()
            socket._config.userName="临时上传用户"
            socket._config.userId=1252627955515461
            socket.initSocket()
        })

        onBeforeUnmount(()=>{
             socket.closeSocket()
        })

        return {
            ...toRefs(data),
            uploadUrl,
            fileList,
            onSuccess,
            onRemove,
            dialogImageUrl,
            dialogVisible,
            handleRemove,
            handlePictureCardPreview,
            GetUrlParams
        }
    },
    components: { Icon },
})
</script>

<style scoped>
</style>
