<template>
    <div class="list-wrap" style="margin-bottom: 5rem">
        <img src="../../assets/image/serviceTitle@2x.png" alt="" style="width:100%">
        <div class="card service" v-if="data.is_activity == 'off'">
            <div class="card-header">
                <h5><img src="../../assets/image/yen.png" alt="">代缴服务费介绍</h5>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>类别</th>
                        <th>社保</th>
                        <th>社保+公积金</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in data.service">
                        <td>{{item[2]}}</td>
                        <td>&yen;{{item[0]}}/人</td>
                        <td>&yen;{{item[1]}}/人</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="service" v-else>
            <div class="card socialPayment">
                <img src="../../assets/image/service.half@2x.png" alt="" style="width:100%">
                <div class="card-header">
                    <!-- <h5><img src="../../assets/image/yen.png" alt="">社保代缴服务费</h5> -->
                    <h5>社保代缴服务费</h5>
                </div>
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div class="service-container active d-flex justify-content-between align-items-center align-content-center flex-wrap">
                        <div class="d-flex flex-column justify-content-center" v-for="item in data.service">
                            <span>{{item[2]}}</span>
                            <p><span class="price">{{item[0]*0.5}}元</span>/人</p>
                            <del style="color: #666">原价：<span>{{item[0]}}元</span>/人</del>
                        </div>
                    </div>
                    <!-- <div class="service-container d-flex justify-content-between align-items-center align-content-center flex-wrap">
                        <div class="d-flex flex-column justify-content-center" v-for="item in data.service">
                            <p><span class="price">&yen;{{item[0]}}</span>/人</p>
                            <span>{{item[2]}}</span>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="card socialPayment">
                <img src="../../assets/image/service.all@2x.png" alt="">
                <div class="card-header">
                    <!-- <h5><img src="../../assets/image/yen.png" alt="">社保+公积金代缴服务费</h5> -->
                    <h5>社保+公积金代缴服务费</h5>
                </div>
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div class="service-container active d-flex justify-content-between align-items-center align-content-center flex-wrap">
                        <div class="d-flex flex-column justify-content-center" v-for="item in data.service">
                            <span>{{item[2]}}</span>
                            <p><span class="price">{{item[1]*0.5}}元</span>/人</p>
                            <del style="color: #666">原价：<span>{{item[0]}}元</span>/人</del>
                        </div>
                    </div>
                    <!-- <div class="service-container d-flex justify-content-between align-items-center align-content-center flex-wrap">
                        <div class="d-flex flex-column justify-content-center" v-for="item in data.service">
                            <p><span class="price">&yen;{{item[1]}}</span>/人</p>
                            <span>{{item[2]}}</span>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
<!--        <div class="card card-3" style="border:none ">-->
<!--            <div class="card-header">-->
<!--                <h5><img src="../../assets/image/yen.png" alt="">最低缴纳介绍</h5>-->
<!--            </div>-->
<!--            <div class="card-body" >-->
<!--                <table class="table">-->
<!--                    <thead>-->
<!--                    <tr>-->
<!--                        <th>类别</th>-->
<!--                        <th>最低缴纳</th>-->
<!--                    </tr>-->
<!--                    </thead>-->
<!--                    <tbody>-->
<!--                    <tr>-->
<!--                        <td style="vertical-align: middle;">社保</td>-->
<!--                        <td><p>城镇：&yen;{{data.basic.social[1]}}/人</p>-->
<!--                            <p>农村：&yen;{{data.basic.social[0]}}/人</p>-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td>公积金</td>-->
<!--                        <td>&yen;{{data.basic.fund}}/人</td>-->
<!--                    </tr>-->
<!--                    </tbody>-->
<!--                </table>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

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

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

        public data: any = {
            "service": {
                "monthly": [100, 150, "月付"],
                "seasonal": [270, 405, "季付"],
                "halfYearly": [480, 720, "半年付"],
                "yearly": [600, 900, "年付"]},
            "basic": {"social": [3613, 3613], "fund": 2500}, "is_activity": 0.5
        };

        async created() {
            let res = await Http.getInstance().getSocialConfig({
                city_code: localStorage.getItem('citycode'),
                social_type: localStorage.getItem('social_type')
            });
            this.data = res.data;
            console.log()
            console.log(res)
        }

    }
</script>

<style lang="scss" scoped>
    .card {
        /*margin-top: .5rem;*/
        // padding: 2rem;
        text-align: center;
        border: 0;
    }
   .card-3{

   }
    .card-header {
        border: 0;
        // padding: 1.2rem .8rem;

        color: #333;
        font-size: 3.167rem;
        position: absolute;
        top: 34%;
        left: 32%;
        // background-color:#F2F7FE;
        background-color: transparent;
    }

    // .card-header h5 {
    //     font-size: 1.5rem;
    //     font-weight: bold;
    //     margin-bottom: 0;
    // }

    // .card-header img {
    //     width: 1.5rem;
    //     margin-right: .5rem;
    //     vertical-align: text-top;
    // }

    // .card-body {
    //     padding: 0 2.75rem 2.5rem;
    // }

    .card p {
        margin: 0;
    }

    .table {
        margin-bottom: 0;
        border: 1px solid #EBEBEB;
        text-align: center;
    }

    .table td, .table th {
        border: 0;
        border-right: 1px solid #EBEBEB;
        border-bottom: 1px solid #EBEBEB;
    }

    .table thead th {
        border: 0;
        border-right: 1px solid #EBEBEB;
        border-bottom: 1px solid #EBEBEB;
        font-size: 1.3rem;
    }

    .table tbody td {
        color: #777777;
        font-size: 1.2rem;
    }

    // .service-container.active{
    //     width: 60%;
    //     background: url('../../assets/image/service.half.png') no-repeat center center;
    //     background-size: contain;
    //     padding-bottom: 1rem;
    // }

    .service-container.active .price{
        color: #F16511;
        font-size: 1.2rem;
        // font-size: 1.4rem;
    }

    .service-container>div {
        width: 50%;
        text-align: center;

        margin-bottom: 1rem;
    }

    .service-container{
        // width: 40%;
        width: 100%;
        min-height: 12rem;
        // background: url('../../assets/image/service.all.png') no-repeat center center;
        background-size: contain;
        padding: 0 1rem;
    }

    .service .card-body {
        // padding: 2rem 1rem 2rem
        font-size: 1.1rem;
    }

    // 社保代缴
    .socialPayment {
        box-sizing: border-box;
        width: 100%;
        padding: 2rem;
        img {
            display: block;
            width: 100%;
            position: relative;
        }
        .card-body {
            position: absolute;
            top: 42%;
            left: 0;
            width: 100%;
        }
    }
    .socialPayment:last-child {
        padding-top: 0;
        margin-bottom: 5rem;
        .card-body {
            top: 18%;
            left: 0;
        }
        .card-header {
            top: 4%;
            left: 28%;
            font-size: 1.4rem;
        }
    }

</style>

