<template>
    <div class="billDetail">
        <ul class="ulBody">
            <li class="bodyLi">
                <div class="bodyLiTit">企业名称：</div>
                <input type="text" placeholder="自动带出" readonly v-model="info.companyName">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">账单名称</div>
                <input type="text" placeholder="自动带出" readonly v-model="info.billName">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">对应合同编号：</div>
                <input
                    type="text"
                    placeholder="自动带出"
                    readonly
                    v-model="info.contractNumber"
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">应缴金额：</div>
                <input
                    type="text"
                    placeholder="自动带出"
                    readonly
                    v-model="info.billRealTotalMoney"
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">开票状态：</div>
                <input type="text" placeholder="自动带出" readonly v-model="kpStateName.label">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">开票类型：</div>
                <input type="text" placeholder="自动带出" readonly v-model="kpTypeName.label">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">发票号：</div>
                <input type="text" placeholder="自动带出" readonly v-model="info.invoiceCode">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit"> 收款核销状态：</div>
                <input type="text" placeholder="自动带出姓名/联系方式" readonly v-model="invoiceTypeName.label">
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit"> 账单逾期天数：</div>
                <input type="text" placeholder="自动带出" readonly v-model="info.overdueDays">
            </li>
        </ul>
    </div>
</template>

<script>
import { getByCodes } from '@/service/api_settle_out'

export default {
    name: 'Rzsq',
    data() {
        return {
            info: {},
            skztList: [],
            billType: [],
            invoiceTypeName: {},
            kpTypeName: {},
            kpType: [],
            kpState: [
                { label: '待开票', value: '0' },
                { label: '已开票', value: '1' },
                { label: '已错开红冲', value: '2' },
                { label: '待坏账红冲', value: '3' },
                { label: '已坏账红冲', value: '4' }
            ],
            kpStateName: {}
        }
    },
    mounted() {
        this.info = JSON.parse(this.$route.query.info)
        if (this.info.overdueDays <= 0) {
            this.info.overdueDays = '未逾期'
        }
        console.log('info', this.info)
        this.getSkzt()
    },
    methods: {
        getSkzt() {
            getByCodes({ codes: JSON.stringify(['COLLECT_IS_SUCCESS', 'BILL_TYPE', 'invoiceTypeOptions']) }).then(res => {
                this.skztList = JSON.parse(res.COLLECT_IS_SUCCESS.dictValue)
                this.billType = JSON.parse(res.BILL_TYPE.dictValue)
                this.kpType = JSON.parse(res.invoiceTypeOptions.dictValue)
                this.invoiceTypeName = this.skztList.find(e => {
                    if (this.info.collectIsSuccess) {
                        return this.info.collectIsSuccess == e.value
                    } else {
                        return { label: '' }
                    }
                })

                this.kpTypeName = this.kpType.find(e => {
                    if (this.info.invoiceType) {
                        return this.info.invoiceType == e.value
                    } else {
                        return { label: '' }
                    }
                })

                this.kpStateName = this.kpState.find(e => {
                    if (this.info.invoiceStatus) {
                        return this.info.invoiceStatus == e.value
                    } else {
                        return { label: '' }
                    }
                })
            })
        }
    }
}
</script>

<style lang="scss">
.billDetail{
    .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;
            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>
