<template>
    <div class="tzsq">
        <ul class="ulBody">
            <li class="bodyLi">
                <div class="bodyLiTit">企业名称：</div>
                <input type="text" placeholder="自动带出" v-model="postData.enterpriseName">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">租赁地点：</div>
                <input
                    type="text"
                    placeholder=""
                    v-model="postData.address"
                    readonly
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">面积（㎡）：</div>
                <input
                    type="text"
                    placeholder="自动带出"
                    v-model="postData.area"
                    readonly
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">退租性质：</div>
                <input type="text" placeholder="请选择"  v-model="retreatNatureName" readonly>
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">退租类型：</div>
                <input type="text" placeholder="请选择"  v-model="retreatTypeName" readonly>
            </li>
            <li class="bodyLi lastLi">
                <div class="bodyLiTit">原因说明：</div>
            </li>
            <li class="textAreaLi">
                <textarea
                    type="text"
                    placeholder=""
                    class="textarea"
                    rows="5"
                    maxlength="2000"
                    v-model="postData.reasonEnterprise"
                    readonly
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">申请退房日期：</div>
                <input type="text" placeholder="请选择"  v-model="postData.checkOutApplyDate" readonly>
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">退房授权代理人：</div>
                <input
                    type="text"
                    placeholder="自动带出"
                    v-model="postData.authorizedAgent"
                    readonly
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">联系电话：</div>
                <input
                    type="text"
                    placeholder="自动带出"
                    v-model="postData.phone"
                    readonly
                />
            </li>
        </ul>
        <ul class="ulBody">
            <li class="bodyLi">
                <div class="bodyLiTit">需退租房间保证金（元）：</div>
                <input type="text" placeholder="自动带出" v-model="postData.refundBond" readonly>
            </li>
            <div class="upLoadBox">
                <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"
                    :deletable="false"
                    :show-upload="false"
                />
            </div>
        </ul>
        <div style="font-size: 3.4vw;color:#AAAAAA;margin: 5vw;line-height: 5vw">
            <p>温馨提示：</p>
            <p> 1、退房办理时需将退租申请结算日前的所有费用付清，且提供房屋保证金收据；</p>
            <p> 2、为便利办理企业退房事宜，退房企业委托一名退房授权代理人代为办理退房相关事宜，该代理人所实施的与企业退房相关的签字确认等手续行为，退房企业均予以承认，所产生的一切法律责任、后果均由退房企业承担；</p>
            <p> 3、退房手续需按企业提交《申请书》中相关承诺，结清应付费用、清空租赁场地及现场验房手续。</p>
            <p> 备注：以上退房办理各项内容，若有逾期微纳公司将按照退租申请收回房屋、扣除保证金，并根据租赁合同条款收取相应的场地占用费。</p>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { add, getByCodes } from '@/service/api_settle_out'
import auth from '@/service/auth'
import { Toast } from 'vant'
import { upload } from '@/service/api_upload'
export default {
    name: 'Rzsq',
    data() {
        return {
            fileList: [
                // Uploader 根据文件后缀来判断是否为图片文件
            ],
            postData: {
                enterpriseName: '',
                enterpriseId: auth.currUser().id,
                retreatNature: '',
                retreatType: '',
                reasonEnterprise: '',
                checkOutApplyDate: '',
                authorizedAgent: '',
                phone: '',
                refundBond: '',
                area: '',
                address: '',
                bondReceipt: '',
                creditCode: auth.currUser().shxydm
            },
            currentDate: new Date(),
            minDate: new Date(),
            maxDate: new Date(2025, 10, 1),
            show: false,
            selectMonth: '',
            tzxz: '',
            selectOut: '',
            tzxzList: [],
            tzlxList: [],
            entryForm: [],
            retreatNatureName: '',
            retreatTypeName: ''
        }
    },
    mounted() {
        this.getTzxz()
    },
    methods: {
        selectFinishDate(e) {
            const dayjs = require('dayjs')
            this.FinishDate = dayjs(e).format('YYYY-MM-DD')
            this.dateShow = false
        },
        selectPlanDate(e) {
            const dayjs = require('dayjs')
            this.selectMonth = dayjs(e).format('YYYY-MM')
            this.show = false
        },
        selectOutPlanDate(value) {
            const dayjs = require('dayjs')
            this.postData.checkOutApplyDate = dayjs(value).format('YYYY-MM-DD')
            this.show4 = false
        },
        getTzxz() {
            this.postData = JSON.parse(this.$route.query.editMsg)
            console.log('pst',this.postData)
            if (this.postData.bondReceipt) {
                // this.entryForm = this.postData.bondReceipt.split(',')
                const files = this.postData.bondReceipt.split(',')
                if (files && files.length) {
                    files.forEach(item => {
                        this.fileList.push(
                            {
                                url: this.$constant.BASE_URI + '/wx/fileController/download/' + item,
                                isImage: true
                            }
                        )
                    })
                }
            }
            getByCodes({ codes: JSON.stringify(['RETREAT_NATURE', 'RETREAT_TYPE']) }).then(res => {
                this.tzxzList = JSON.parse(res.RETREAT_NATURE.dictValue)
                this.tzlxList = JSON.parse(res.RETREAT_TYPE.dictValue)
                // 退租性质回显
                const tzxzList = this.tzxzList.find(item => {
                    return item.value === this.postData.retreatNature
                })
                // 退租类型回显
                const tzlxList = this.tzlxList.find(item => {
                    return item.value === this.postData.retreatType
                })
                this.$nextTick(() => {
                    this.retreatNatureName = tzxzList.label
                    this.retreatTypeName = tzlxList.label
                })
            })
        },
        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">
.tzsq{
    .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;
            }

        }
        .textAreaLi{
            border-bottom: 3px solid #CCCCCC;
            padding: 0 0 5vw 0;
            .textarea{
                background: #F9F9F9;
                width: 100%;
                resize: none;
                padding: 2vw;
                box-sizing: border-box;
            }
        }
        .lastLi{
            border-bottom: none !important;
            padding-bottom: 2vw;
        }
    }
    .upLoadBox{
        margin: 5vw 0vw;
        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>
