<template>
    <div v-if="visable" class="upload-pay-pic-wrapper">
         <template v-if="!success">
             <div class="upload-pay-pic-box bg-[#ffffff] w-1200px pb-36px">
                 <div class="flex justify-between pt-36px pb-36px text-size-30px border-b-1px">
                     <span class="ml-36px">上传汇款凭证：{{number}}</span>
                     <img class="w-30px h-30px mr-36px cursor-pointer" @click="visable=false" src="/imgs/logion-close.png">
                 </div>
                 <div class="flex justify-center pt-65px pb-65px flex-col items-center">
                     <img width="200px" class="mb-32px" v-if="payPicUrl" :src="payPicUrl">
                     <div @click="handleUpload"  class="w-300px h-60px border-1px border-[#707070] rounded-30px text-center leading-60px cursor-pointer">{{payPicUrl ? '重新上传' : '选择上传文件'}}</div>
                 </div>
                 <div class="text-size-20px pl-36px pr-36px leading-30px">
                     1. 请您将汇款底单拍照或者扫描底单上传；<br>
                     2. 请保证上传内容清晰可辨认；<br>
                     3. 请上传文件是JPG、PNG或者PDF，大小不能超过5mb<br>
                 </div>
             </div>
         </template>
        <template v-else>
            <div class="upload-pay-pic-box bg-[#ffffff] w-1200px pb-36px">
                <div class="flex justify-between pt-36px pb-36px text-size-30px border-b-1px">
                    <span class="ml-36px">上传汇款凭证成功</span>
                    <img @click="visable=false" class="w-30px h-30px mr-36px" src="/imgs/logion-close.png">
                </div>
                <div class="flex justify-center pt-65px pb-65px  text-size-30px items-center text-[#02A388]">
                     <i class="el-icon-check   text-size-52px"></i><span >上传成功</span>
                </div>
                <div class="text-size-20px pl-36px pr-36px leading-30px">
                    1. 客服确认后会给您开通会员权限；<br>
                    2. 开通后会跟您电话确认或者邮箱联系；；<br>
                    3. 您也可以联系在线客服，或拨打客服热线400-000-000；<br>
                </div>
            </div>
        </template>
    </div>

</template>

<script>
    export default {
        name: "upload-pay-pic-box",
        data(){
            return {
                success:false,
                visable:false,
                number:'',
                sum:'',
                payPicUrl:''
            }
        },
        methods:{
            show(param){
                this.number = param.number;
                this.sum = param.sum;
                this.payPicUrl = param.payPicUrl;
                this.visable = true;
            },
            handleUpload() {

                let input = document.createElement("input")
                input.type = 'file';
                input.onchange = async (e) => {
                    let formData = new FormData();
                    formData.append("file", input.files[0])
                    formData.append("category", 'AVATAR')
                    let resp = await this.$http.post(this.$api.common.uploadFile, formData);
                    if (resp.data.status === 200) {
                       let r =  await  this.$http.post(this.$api.mzUser.uploadOrderPayPic,this.$qs.stringify(Object.assign(this.$route.query,{pic:resp.data.data.code})))
                        if(r.data.status === 200){
                            this.success = true;
                        }
                    }
                }
                input.click();

            },
        }
    }
</script>

<style scoped>
.upload-pay-pic-wrapper{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>