<template>
    <div class="detail-wrap ">
        <div class="p_head">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
            <span>
                订单详情
            </span>
        </div>
        <div class="detail social-detail white-box" style="color:#333">
            <h6 class="d-flex justify-content-between align-items-center pb-2" style=" font-size: 1.5rem;">
                订单编号：
                <label  style=" font-size: 1.3rem;" class="m-0 p-0">{{data.order_sn}}</label>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
                下单时间：
                <label class="small" style=" font-size: 1.3rem;">{{data.create_timestamp}}</label>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
                用户姓名：
                <label class="small" style=" font-size: 1.3rem;">{{data.realname}}</label>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
                代缴城市：
                <label class="small" style=" font-size: 1.3rem;">{{data.city_name}}</label>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
                社保户别：
                <label class="small" style=" font-size: 1.3rem;">{{data.social_type}}</label>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" margin-bottom: 0;font-size: 1.5rem;padding-bottom:1.5rem">
                身份证号：
                <label class="small" style=" font-size: 1.3rem;">{{data.id_card}}</label>
            </h6>
        </div>
        <div class="backgroundColor" v-if="data.detaillist.length"></div>
        <div class="detail social-detail white-box social-month" v-for="(item, idx) in data.detaillist" :key="idx">
            <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
                社保（{{item.month}}月份）
                <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges">{{item.social_basic}}</span></label>
            </h6>
            <!-- <hr> -->
            <ul class="list-group list-group-flush">
                <li class="d-flex justify-content-between align-items-center two-li">
                    {{item.pension_num}}
                    <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.pension}}</span>
                </li>
                <li class="d-flex justify-content-between align-items-center two-li">
                    {{item.health_num}}
                    <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.health}}</span>
                </li>
                <li class="d-flex justify-content-between align-items-center two-li">
                    {{item.unemployment_num}}
                    <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.unemployment}}</span>
                </li>
                <li class="d-flex justify-content-between align-items-center two-li">
                    {{item.injury_num}}
                    <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.injury}}</span>
                </li>
                <li class="d-flex justify-content-between align-items-center two-li">
                    {{item.birth_num}}
                    <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.birth}}</span>
                </li>
            </ul>
            <p class="subtotal d-flex justify-content-between align-items-center two-h6" style="margin-bottom: 0rem;padding-bottom:1.5rem">
                社保小计
                <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.subtotal}}</span>
            </p>
            <div class="social-detail white-box" v-if="item.fund">
                <h6 class="d-flex justify-content-between align-items-center two-h6" style="font-size: 1.3rem;">
                    公积金
                    <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges" style=" font-size: 1.3rem;">{{item.fund_basic}}</span></label>
                </h6>

                <p class="d-flex justify-content-between align-items-center" style="margin-bottom: 0rem;padding-bottom:1.5rem">
                    公积金
                    <span class="badges" style=" font-size: 1.3rem;">&yen;{{item.fund}}</span>
                </p>
            </div>
        </div>
        <div class="backgroundColor"></div>
        <div class="detail social-detail white-box">
            <h6 class="d-flex justify-content-between align-items-center price-text"  style=" font-size: 1.3rem; padding:0.5rem 0;">
                滞纳金
                <span class="badges"  style=" font-size: 1.3rem;">&yen;{{data.late_fee}}</span>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center price-text"  style=" font-size: 1.3rem; padding:0.5rem 0;">
                本次服务费
                <span class="badges"  style=" font-size: 1.3rem;">&yen;{{data.service_charge}}</span>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center price-text"  style=" font-size: 1.3rem; padding:0.5rem 0;">
                本次手续费
                <span class="badges"  style=" font-size: 1.3rem;">&yen;{{data.procedure_fee}}</span>
            </h6>
            <h6 class="d-flex justify-content-between align-items-center price-text"  style=" font-size: 1.3rem; padding:0.5rem 0;">
                优惠券抵扣
                <span class="badges"  style=" font-size: 1.3rem;">&yen;{{data.discountmoney}}</span>
            </h6>
<!--            <h6 class="d-flex justify-content-between align-items-center price-text "  style=" font-size: 1.3rem; padding:0.5rem 0;">-->
<!--                小计-->
<!--                <label class="p-0 m-0 ">&yen;<span class="badges"  style=" font-size: 1.3rem;">{{data.charge_details.subtotal}}</span></label>-->
<!--            </h6>-->
            <hr>
            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
                应付总计：&yen;{{data.payment}}
            </h6>
            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333; margin-bottom: 0">
                实付款：<span style="color: #EC2C2C">&yen;{{data.payment}}</span>
            </h6>
        </div>
        <!-- <div class="detail-button">
            <button class="btn-one" @click="gopay" v-if="!data.isShow">去缴费</button>
            <button class="btn-two" style="" @click="cancel" v-if="!data.isShow">取消订单</button>
        </div> -->
        <div class="backgroundColorFooter" v-if="data.detaillist.length"></div>
        <div class="bottom-twobtn">
            <button type="button" class="button-1" @click="gopay" v-if="!data.isShow">
                <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
                去缴费
            </button>
            <button type="button" class="button-2" @click="cancel" v-if="!data.isShow">
                取消订单
            </button>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import router from "../../router";
    import {Message} from "element-ui";

    @Component({})
    export default class OrderList extends Vue {

        public data: any = {
            order_sn: '',
            detaillist:'',
            isShow: true,
            order_type: ''
        };

        async created() {
            let res = await Http.getInstance().repairDetail({
                id: this.$route.params["id"],
            });
            // console.log('补缴', res);
            this.data = res.data;
            this.data.order_sn =  res.data.order_sn;
            this.data.charge_details.fund = this.data.charge_details.fund == 0 ? false : this.data.charge_details.fund;
            this.data["status"] = res.data.status;
            this.data["payment"] = res.data.payment;
            this.data.order_type = res.data.order_type;
            this.data["create_timestamp"] =res.data.create_timestamp;
            this.data.detaillist = res.data.charge_details;
            this.data.social_type =  res.data.social_name
            this.data.city_name = res.data.city_name
            if(res.data.status == '已付款'){
                this.data.isShow = true
            }
            if(res.data.status == '交易成功'){
                this.data.isShow = true
            }
        }
        async gopay(){
            let res = await Http.getInstance().savelistOrder({
                order_sn: this.data.order_sn
            });

                 localStorage.setItem('order_payings', JSON.stringify(res.data));
                 router.replace({
                     name: 'opayment',
                     params: {
                        order_sn: res.data.order_sn
                     }
                 });

        }
        go(){

        }
        async cancel(){
            let res = await Http.getInstance().cancelOrder({
                oid: this.$route.params["id"],
            });
            if(res.code == 1){
                Message({
                    message: '订单已取消', duration: 2000, type: "success"
                });
                setTimeout(function(){
                    router.replace('/order/list')
                },1000)

            }
        }
    }
</script>

<style lang="scss" scoped>
    // 顶部导航
    .p_head{
        text-align: center;
        font-size: 2rem;
        // font-family: 'PingFang SC';
        padding-bottom: 1.667rem;
        padding-top: 1rem;
        // font-weight: bold;
        line-height: 1.5rem;
        background-color: #fff;
        .leftIcon{
            position: absolute;
            left: 1.667rem;
            top: 1.4rem;
            width: 0.667rem;
        }
        span {
            vertical-align: middle;
            color: #333;
        }
    }
    .detail-wrap {
        width: 100%;
        font-family: "HiraginoSansGB";
        background: #f0f0f0;
    }
    .white-box{
        background: white;
    }

    hr {
        margin: 0.5rem 0;
    }
    .two-h6{
        // color: #666666;
        color: #333333
    }
    // 间距
    h6 {
        line-height: 1.5;
    }
    .two-li{
        // color: #999999;
        color: #333;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        // padding-right: 1.5rem;
    }
    .price-text{

    }
    .detail {
        padding: 1.3rem 1.2rem 1.2rem 1.2rem;
        padding-bottom: 0;
        font-size: 1.4rem;
    }

    .social-month:nth-child(n+2) {
        padding-top: 1.5rem;
    }

    .list-group-flush {
        border-bottom: 1px solid rgba(0, 0, 0, .125);
        font-size: 1.4rem;
    }

    .list-group-flush .list-group-item {
        border-top: 0;
        background: transparent;
    }

    .list-group-flush .list-group-item:last-child {
        border-bottom: 0;
    }
    .subtotal {
        // padding: .75rem 1.25rem;
        padding: .75rem 0rem;
    }
    .detail-button{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 3rem;
        .btn-one{
            line-height: 3.5rem;
            color: #ffffff;
            font-size: 1.5rem;
            border-radius: 0.5rem;
            border: none;
            width: 20rem;
            background: #18a447;
            margin-bottom: 1rem;
        }
        .btn-two{
            line-height: 3.5rem;
            color: #999999;
            font-size: 1.5rem;
            border-radius: 0.5rem;
            border: none;
            width: 20rem;
            margin-bottom: 3rem;
        }
    }
    // 底部按钮
    .bottom-twobtn{
        position: fixed;
        bottom: 0;
        width: 100%;
        padding-left: 0 !important;
        // height: 4rem;
        height: 5rem;
        margin-top: 1.2rem;
        .button-1{
            width: 50%;
            height: 100%;
            border: none;
            background: #4FDCA2;
            color: #ffffff;
            font-size: 1.5rem;
            .button-2-img{
                width: 1.5rem;
            }
        }
        .button-2{
            width: 50%;
            height: 100%;
            border: none;
            background: #fff;
            color: #7D7D7D;
            font-size: 1.5rem;
        }
    }
    .backgroundColor {
        background-color: #EDF0F5;
        width: 100%;
        height: 1.25rem;
    }
    .backgroundColorFooter {
        background-color: #EDF0F5;
        width: 100%;
        // height: 5rem;
        height: 6rem;
    }
</style>

