<template>
    <div class="detail-wrap ">
        <div class="user_head">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/order/list')">
            <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: 1rem;font-size: 1.5rem;padding-bottom:1.5rem">
                身份证号：
                <label class="small" style=" font-size: 1.3rem;">{{data.id_card}}</label>
            </h6>
        </div>
        <div class="detail social-detail white-box">
            <h6 class="d-flex justify-content-between align-items-center two-h6" style=" font-size: 1.5rem;">
                社保
                <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges">{{data.social_basic}}</span></label>
            </h6>
            <!-- <hr> -->
            <!-- <ul class="list-group list-group-flush pl-4"> -->
            <ul class="list-group list-group-flush">
                <li class="d-flex justify-content-between align-items-center two-li"
                    v-for="item in data.charge_details.social">
                    {{item[1]}}
                    <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item[0]}}</span>
                </li>
            </ul>
            <p class="subtotal d-flex justify-content-between align-items-center two-h6" style="margin-bottom: 1rem;padding-bottom:1.5rem">
                社保小计
                <span class="badges"  style=" font-size: 1.3rem;">&yen;{{data.charge_details.subtotal}}</span>
            </p>
        </div>
        <div class="detail social-detail white-box" v-if="data.charge_details.fund">
            <h6 class="d-flex justify-content-between align-items-center two-h6" style="font-size: 1.5rem;">
                公积金
                <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges" style=" font-size: 1.3rem;">{{data.fund_basic}}</span></label>
            </h6>

            <p class="d-flex justify-content-between align-items-center  two-h6" style="margin-bottom: 1rem;padding-bottom:1.5rem">
                公积金
                <span class="badges" style=" font-size: 1.3rem;">&yen;{{data.charge_details.fund}}</span>
            </p>
        </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.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.total_charge}}
            </h6>
            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
                实付款：<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="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: '',
            isShow: true,
            order_type: ''
        };

        async created() {
            let res = await Http.getInstance().getOrderDetail({
                id: this.$route.params["id"] || localStorage.getItem('id'),
            });
            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["create_timestamp"] =res.data.create_timestamp;
            this.data.social_type = res.data.social_name
            this.data.city_name = res.data.city_name
            this.data.order_type = this.$route.params.type
            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_paying', JSON.stringify(res.data));
          router.replace({
              name: 'opayment',
              params: {
                  order_sn: res.data.order_sn,
                  type: this.$route.params.type
              }
          });
      }
      go(){

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

          }
        }
    }
</script>

<style lang="scss" scoped>
    // 顶部导航
    .user_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;
        padding-bottom: 5.5rem;
    }
    .white-box{
        background: white;
    }

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

    }
    .detail {
        padding: 1.2rem;
        padding-bottom: 0;
        // font-size: 1.4rem;
        font-size: 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{
        width: 100%;
        padding-left: 0 !important;
        position: fixed;
        bottom: 0;
        // 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;
        }
    }
</style>

