<template>
     <div class="rzsq">
         <ul class="ulBody">
             <li class="bodyLi">
                 <div class="bodyLiTit">入驻单号：</div>
                 <input type="text" placeholder="自动带出" v-model="editMsg.no" readonly>
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit">企业名称：</div>
                 <input type="text" placeholder="自动带出" v-model="editMsg.enterpriseName" readonly>
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit">租赁地点：</div>
                 <input
                     type="text"
                     placeholder="自动带出"
                     v-model="editMsg.leaseAddress"
                     readonly
                 />
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit">面积（㎡）：</div>
                 <input
                     type="text"
                     placeholder="自动带出"
                     v-model="editMsg.area"
                     readonly
                 />
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit">合同日期起止：</div>
                 <input type="text" placeholder="自动带出" v-model="editMsg.startAndEndDate" readonly>
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit">筹备期：</div>
                 <input type="text" placeholder="自动带出" v-model="editMsg.preparationPeriod" readonly>
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit"> 法人信息：</div>
                 <input type="text" placeholder="自动带出姓名/联系方式" readonly v-model="editMsg.legalPersonName + '/' + editMsg.legalPersonPhone">
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit"> 法人邮箱：</div>
                 <input type="text" placeholder="自动带出" readonly v-model="editMsg.legalPersonMailbox">
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit"> 联系人信息：</div>
                 <input type="text" placeholder="自动带出姓名/联系方式" readonly v-model="editMsg.contactsPhone + '/' + editMsg.contactsPhone">
             </li>
             <li class="bodyLi">
                 <div class="bodyLiTit"> 联系人邮箱：</div>
                 <input type="text" placeholder="自动带出" readonly v-model="editMsg.contactsMailbox">
             </li>
             <li class="bodyLi lastLi">
                 <div class="bodyLiTit"> 招商发展部项目负责人：</div>
                 <input type="text" placeholder="自动带出姓名/联系方式" readonly v-model="editMsg.projectLeaderName+ '/' + editMsg.projectLeaderPhone">
             </li>
         </ul>
         <div class="upLoadBox">
             <div class="dowloadRzd">
             <div style="white-space: nowrap">入住单下载：</div>
                 <div style="color: #1D18BC">{{entryFormTemplate.name}}</div>
                 <div class="download" @click="downLoad">下载</div>
             </div>
             <div style="color:#333333 ;font-size: 4vw">入驻单盖章上传：</div>
             <div style="color: #AAAAAA;font-size: 3.8vw;margin: 2vw 0 4vw 0">拍照或上传图片，限20M内，最多6张</div>
             <van-uploader
                 v-model="fileList"
                 multiple
                 max-count="6"
                 max-size="20971520"
                 :after-read="afterRead"
                 :before-delete="beforeDelete"
             />
         </div>
         <div class="buttonBox">
             <button @click="turnOff">关闭</button>
             <button @click="submit">提交</button>
         </div>
     </div>
</template>

<script>
import { Toast } from 'vant'
import { upload } from '@/service/api_upload'
import { edit } from '@/service/api_settle_in'
export default {
    name: 'Rzsq',
    data() {
        return {
            fileList: [
                // Uploader 根据文件后缀来判断是否为图片文件
            ],
            fileSaveList: [],
            editMsg: {},
            entryFormTemplate: {},
            entryForm: []
        }
    },
    mounted() {
        this.getQuery()
    },
    methods: {
        submit() {
            edit({ id: this.editMsg.id, entryForm: this.entryForm.toString() }).then(res => {
                if (res.code == 200) {
                    this.$router.push('/settle_in')
                    Toast('提交成功')
                }
            })
        },
        getQuery() {
            const editMsg = JSON.parse(this.$route.query.editMsg)
            if (editMsg) {
                this.editMsg = editMsg
                this.entryFormTemplate = JSON.parse(editMsg.entryFormTemplate)
                const entryForm = editMsg.entryForm
                if (entryForm && entryForm.length) {
                    this.entryForm = entryForm.split(',').filter(item => item != '')
                    const files = entryForm.split(',').filter(item => item != '')
                    if (files && files.length) {
                        files.forEach(item => {
                            this.fileList.push(
                                {
                                    url: this.$constant.BASE_URI + '/wx/fileController/download/' + item,
                                    isImage: true
                                }
                            )
                        })
                    }
                }
            }
        },
        turnOff() {
            this.$router.push('/settle_in')
        },
        downLoad() {
            window.location.href = this.$constant.BASE_URI + '/wx/SettleInController/downLoad/' + this.editMsg.id
        },
        async beforeDelete(file, detail) {
            this.entryForm.splice(detail.index, 1)
            Toast.loading({
                message: '删除中...',
                forbidClick: true,
                duration: 0
            })
            Toast.clear()
        },
        afterRead(file) {
            Toast.loading({
                message: '上传中...',
                forbidClick: true,
                duration: 0
            })
            if (file instanceof Array) {
                file.map(v => {
                    this.uploadImg(v)
                })
            } else {
                this.uploadImg(file)
            }
        },
        uploadImg(file) {
            const formParam = new FormData() // 创建form对象
            formParam.append('file', file.file) // 通过append向form对象添加数据
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'MVVM-Key': String(new Date().getTime()),
                    xx: 'anything'
                } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
            } // 添加请求头
            return new Promise((resolve, reject) => {
                upload(formParam, config)
                    .then(response => {
                        console.log(response)
                        if (response.data) {
                            this.entryForm.push(response.data[0])
                            Toast('上传成功')
                            Toast.clear()
                        } else {
                            Toast('上传失败')
                            Toast.clear()
                        }
                    })
                    .catch((err, x) => {
                        reject(err, x)
                    })
            })
        }
    }
}
</script>

<style lang="scss">
.rzsq{
    .dowloadRzd{
        display: flex;
        align-items: center;
        border-bottom: 3px solid #CCCCCC;
        justify-content: space-between;
        padding: 3vw 0;
        width: 100%;
        font-size: 3.8vw;
        margin: 0 0 3vw 0 ;
        .download{
            background: #1D18BC;
            color: white;
            padding: 2vw 4vw;
            white-space: nowrap;
            border-radius: 1vw;
        }
    }
    .ulBody{
        background: white;
        padding: 2vw 3vw 5vw 3vw;
        border-radius: 10px;
        margin: 5vw 3vw;
    .bodyLi{
        display: flex;
        align-items: center;
        border-bottom: 3px solid #CCCCCC;
        padding: 5vw 0;
        width: 100%;
        font-size: 3.8vw;
        .bodyLiTit{
            width: 42vw;
            white-space: nowrap;
        }
    }
    .lastLi{
        border-bottom: none !important;
        padding-bottom: 2vw;
    }
  }
    .upLoadBox{
        margin: 5vw 3vw;
        background: white;
        border-radius: 10px;
        padding: 3vw;
    }
    .buttonBox{
        display: flex;
        margin-top:10vw;
        padding-bottom: 10vw;
        justify-content: space-evenly;
        button{
            background: #1D18BC;
            width: 40vw;
            height: 13vw;
            color: #FFFFFF;
            border-radius: 10px;
        }
    }
}

</style>
