<template>
    <div  class="bujiao" ref="bujiao">
        <div class="p_head">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
            <span>
                <img src="../../assets/image/supplementaryHeadIcon@2x.png" class="HeadIcon" alt="">
                <span>
                    近三个月补缴
                </span>
            </span>
        </div>
        <div class="bujiaos">
            <div class="bujiao-city">
                补缴城市 <span style="float: right">{{data.cityname}}</span>
            </div>
            <div class="bujiao-hubie">
                补缴户别 <span  style="float: right">{{data.hubie}}</span>
            </div>
            <div class="backgroundColor"></div>
            <div class="bujiao-leixing">
                补缴类型 <span style="color: #9B9B9B;">(单选)</span>
                <div class="leixing-box">
                    <!-- <div class="box-con"  v-for="(item,index) in data.menu" :class="{ red:data.changeRed == index}" @click="change(index,item.type)">
                        {{item.name}}
                    </div> -->
                    <el-radio-group v-model="data.type">
                        <el-radio
                            v-for="(item,index) in data.menu"
                            :key="index"
                            :label="item.type"
                            @change="change(index,item.type)">
                            {{item.name}}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="bujiao-input">
                社保基数 <input class="input" type="text" :placeholder="data.jishu == '' ? '' : ' 3613 ' " v-model="data.jishu" @change="changeJishu">
            </div>
            <div class="bujiao-input" v-if="data.jishusshow">
                公积金基数 <input class="input" type="text" :placeholder="data.jishus == '' ? '' : '3613' " v-model="data.jishus" @change="changeJishus">
            </div>
            <div class="bujiao-mothy">
                补缴月份 <span style="color: #9B9B9B;">(可多选)</span>
                <div class="mothy-box">
                    <div  class="num-yuan" v-for="(item,index) in data.nums"  :class="item.check==true?'reds':'num-yuan'"  @click="changemon(index,item.name)">{{item.name}}</div>
                </div>
                <!--                <div class="mothy-box">-->
                <!--                    <el-checkbox-group v-model="data.checkboxGroup3" size="small">-->
                <!--                        <el-checkbox-button v-for="(item,index) in data.nums" :label="item.name" :key="index">{{item.name}}</el-checkbox-button>-->
                <!--                    </el-checkbox-group>-->
                <!--                </div>-->
            </div>
        </div>
        <div class="btn-start">
            <button @click="priceCalc">费用计算</button>
        </div>
        <div class="bujiao-price" v-if="data.priceisShow">
            <p class="line-1">费用计算</p>
            <ul>
                <li v-for="item in data.list">
                    <p> {{item.month}}月社保费用 <span style="float: right">￥{{item.total}}</span> </p>
                </li>
            </ul>
            <p class="line-2">滞纳金 <span style="float: right">￥{{data.latefee}}</span></p>
            <p class="line-2">服务费 <span style="float: right">￥{{data.service_money}}</span></p>
            <p class="line-2">手续费 <span style="color: #cccccc;font-size: 1.2rem">(支付通道服务费0.6%)</span> <span style="float: right">￥{{data.service_charge}}</span></p>
            <p class="line-2">总计 <span style="float: right;color:#ed0000;font-size: 1.5rem;">￥{{data.zongtatal}}</span></p>
        </div>
        <div class="btn-reset" v-if="data.priceisShow">
            <button @click="reset">重 置</button>
        </div>
        <div class="white">

        </div>
        <div class="bujiao-bottom">
            <p>应付款：<span style="color:#ed0000;font-size: 1.5rem;">￥{{data.zongtatal}}</span></p>
            <button @click="payment">
                <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
                去缴费
            </button>
        </div>
    </div>
</template>

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

    @Component({})
    export default class App extends Vue {
        public data: any = {
            menu: [
                {name: '社保',type:1},
                {name: '社保公积金',type:3}
            ],
            nums: [],
            changeRed: 0,
            checkboxGroup3: [''],
            month: [],
            priceisShow: false,
            cityname:'',
            social_type:'',
            code:'',
            hubie:'',
            jishu:'3613',   //社保基数
            jishus:'3613', //公积金基数
            jishusshow: false,
            type:1,
            list:'',
            latefee: '',
            service_charge:'',
            service_money:'',
            zongtatal:'0'
        }

        async created() {
            if(!localStorage.getItem('access_token')){
                router.replace('/login')
            }
            let res = await Http.getInstance().getIsrepairQual();
            this.data.cityname = res.data.city_name
            this.data.social_type = res.data.social_type
            this.data.code = res.data.city_code
            this.data.hubie =  res.data.social_name
            if(res.data.is_qualifications == 0){
                MessageBox.alert( '您当月还未进行过代缴，无法进行补缴计算，请先支付汇缴账单', '温馨提示', {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: '确定',
                }).then(action =>{
                    this.$router.push('/social?is_fund=0')
                }).catch(() => {
                    this.$router.push('/index')
                });
            }
            this.getRepairMonths()

            // 如果是城镇户口 补缴类型默认选择社保公积金
            if (res.data.social_type == 1) {
                this.data.type = 3
                this.data.jishusshow = true
            }
        }
        async getRepairMonths() {
            let res = await Http.getInstance().getRepairMonth();
            this.data.nums = res.data
        }
        async payment(){
            if(this.data.zongtatal == 0){
                Message({
                    message: '请先计算费用', duration: 2000, type: "warning"
                });
                return false
            }
            var yue = JSON.stringify(this.data.month)
            let res = await Http.getInstance().createRepairOrder({
                social_type: this.data.social_type,
                code: this.data.code ,
                social_basic:this.data.jishu,
                fund_basic: this.data.jishus,
                month: yue ,
                type: this.data.type
            });
            localStorage.setItem('order_payings', JSON.stringify(res.data));
            router.replace({
                name: 'opayment',
                params: {
                    order_sn: res.data.order_sn,
                    type: '2'
                }
            });
        }
        async priceCalc() {
            if(this.data.jishu == ''){
                Message({
                    message: '请填写社保基数', duration: 2000, type: "warning"
                });
                return false
            }
            if( this.data.type ==3 && this.data.jishus == ''){
                Message({
                    message: '请填写公积金基数', duration: 2000, type: "warning"
                });
                return false
            }
            if(this.data.month.length == 0) {
                Message({
                    message: '请选择补缴月份', duration: 2000, type: "warning"
                });
                return false
            }
            // 社保基数范围
            if (!this.changeJishu()) {
                Message({
                    message: '社保基数的范围必须是3613-23565之间', duration: 2000, type: "warning"
                });
                return false
            }
            // 公积金基数
            if (!this.changeJishus()) {
                Message({
                    message: '公积金基数的范围必须是3613-23565之间', duration: 2000, type: "warning"
                });
                return false
            }

            this.data.priceisShow = true
            var yue = JSON.stringify(this.data.month)
            let res
            if (this.data.type ==3) {
                res = await Http.getInstance().getmoth({
                    social_type:this.data.social_type ,
                    code:this.data.code ,
                    type:this.data.type,
                    social_basic:this.data.jishu,
                    month:yue,
                    fund_basic: this.data.jishus
                });
            } else {
                res = await Http.getInstance().getmoth({
                    social_type:this.data.social_type ,
                    code:this.data.code ,
                    type:this.data.type,
                    social_basic:this.data.jishu,
                    month:yue
                });
            }
            console.log('费用计算', res);
            this.data.list = res.data.monthdetail
            this.data.latefee = res.data.latefee
            this.data.service_charge = res.data.service_charge
            this.data.service_money = res.data.service_money
            this.data.zongtatal = res.data.zongtatal
            // 滚动到最底部
            this.$nextTick(() => {
                let bujiao= this.$refs["bujiao"];
                window.scrollTo(0,(bujiao as any).scrollHeight);
            })
        }

        reset() {
            this.data.priceisShow = false
            location.reload()
        }

        change(index,type) {
            // console.log('this.data.jishusshow', this.data.jishusshow)
            // console.log('type', type)
            this.data.changeRed = index;
            if (this.data.social_type == 1 || this.data.social_type == 3 && type == 3) {
                Message({
                    message: '城镇户口只能交社保公积金，不能单交社保', duration: 2000, type: "warning"
                });
                this.data.type = 3
            } else {
                this.data.type = type
            }
            if(this.data.type == 3){
                this.data.jishusshow = true
            }else{
                this.data.jishusshow = false
            }
        }

        changemon(index) {
            // console.log('index',index);
            let that:any = this
            for (let i = 0; i < that.data.nums.length; i++) {
                // console.log('i', i);
                if (index <= i) {
                    // that.data.nums[i].check = true
                    if (that.data.nums[i].is_order == true) {
                        that.data.nums[i].check = false
                    } else {
                        that.data.nums[i].check = true
                    }
                }else{
                    that.data.nums[i].check = false
                }
            }
            that.data.month= []
            let arr = that.data.nums.filter((a,b)=>{
                return  a.check == true
            })
            for(let j =0; j<arr.length; j++){
                that.data.month.push(arr[j].value);
            }
        }

        // 限制社保基数输入范围
        changeJishu() {
            if (this.data.jishu < 3613 || this.data.jishu > 23565) {
                return false
            } else {
                return true
            } 
        }
        // 公积金基数
        changeJishus() {
            if (this.data.jishus < 3613 || this.data.jishus > 23565) {
                return false
            } else {
                return true
            }
        }

        // 监听补缴类型变化
        @Watch('data.type') changeType(newVal: any, oldVal: any) {
            // console.log('补缴类型', newVal, oldVal);
            if (newVal != oldVal && this.data.social_type != 1 && this.data.social_type != 3) {
                this.data.jishu = '3613'
                this.data.jishus = '3613'
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 顶部导航
    .p_head{
        text-align: center;
        position: relative;
        top: 1.5rem;
        font-size: 2rem;
        // font-family: 'PingFang SC';
        margin-bottom: 3.667rem;
        // font-weight: bold;
        line-height: 1.5rem;
        .leftIcon{
            position: absolute;
            left: 1.667rem;
            top: 0.7rem;
            width: 0.667rem;
        }
        .HeadIcon {
            width: 2.5rem;
            margin-right: 0.833rem;
        }
        span {
            vertical-align: middle;
        }
    }
    .bujiao{
        // background: #F8F8F8;
        background: #fff;
        font-family:'HiraginoSansGB';
        .bujiao-city{
            padding: 0 1.5rem;
            font-size: 1.3rem;
            background: white;
            line-height: 4rem;
            // border-bottom: 1px solid #F6F6F6;
        }
        .bujiao-hubie{
            padding: 0 1.5rem 1.5rem;
            font-size: 1.3rem;
            background: white;
            line-height: 4rem;
            border-bottom: 1px solid #F6F6F6;
        }
        .bujiao-leixing{
            font-size: 1.3rem;
            background: white;
            padding: 1.5rem 1.5rem 0.8rem;
            // border-bottom: 1px solid #F6F6F6;
            .leixing-box{
                padding-top: 1.5rem;
                display: flex;
                justify-content: space-around;
                .box-con{
                    border: 1px solid #c1c1c1;
                    color: #999999;
                    border-radius: 0.5rem;
                    padding: 0.3rem 1rem;
                }
                .red{
                    // border: 1px solid #32C674;
                    // color: #32C674;
                    // border-color: #66E3B0;
                    // background:  #66E3B0;

                }
                .el-radio {
                    margin-right: 5rem;
                }
                /deep/.el-radio__input.is-checked .el-radio__inner {
                    width: 16px;
                    height: 16px;
                    border-color: #66E3B0;
                    background:  #66E3B0;
                }
                /deep/.el-radio__inner:hover {
                    border-color: #66E3B0;
                }
                /deep/.el-radio__inner::after {
                    width: 7px;
                    height: 7px;
                }
                /deep/.el-radio__input.is-checked+.el-radio__label {
                    color: #666666;
                }

            }
        }
        .bujiao-input{
            padding: 1rem 1.5rem;
            font-size: 1.3rem;
            background: white;
            // border-bottom: 1px solid #F6F6F6;

            display: flex;
            justify-content: space-between;
            .input{
                // border: none;
                border: 1px solid #D1D1D1;
                padding-left: 2rem;
                width: 8rem;
                color: #999;
                border-radius: 0.25rem;
            }
            input::-webkit-input-placeholder {
                // color: #b8b8b8;
                color: #999;
            }
        }
        .bujiao-mothy{
            padding: 1rem 1.5rem 0;
            font-size: 1.3rem;
            background: white;
            .mothy-box{
                display: flex;
                flex-wrap: wrap;
                padding: 0.5rem 0 1rem;
                justify-content: center;
                .num-yuan{
                    // width: 3rem;
                    // height: 3rem;
                    width: 3.5rem;
                    height: 3.5rem;
                    margin: 1rem;
                    background: white;
                    border: 1px solid #cbcbcb;
                    // border-radius: 50%;
                    border-radius: 0.833rem;
                    text-align: center;
                    color: #333333;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .reds{
                    // background: #26c27e;
                    // border:1px solid #26c27e;
                    border:1px solid #5CE0A9;;
                    background: #5CE0A9;
                    color: white;
                }
            }
        }
        .btn-start{
            display: flex;
            justify-content: center;
            padding-top: 2rem;
            margin-bottom: 2rem;
            button{
                // background: #10A442;
                background: #5CE0A9;
                font-size: 1.3rem;
                width: 25rem;
                color: white;
                border: none;
                height: 3rem;
                border-radius: 0.3rem;
            }
        }
        .btn-reset{
            display: flex;
            justify-content: center;
            padding: 1rem 0;
            button{
                // background: #f8f8f8;
                background: #fff;
                font-size: 1.3rem;
                width: 25rem;
                // color: #04b954;
                color: #5CE0A9;
                border: none;
                height: 3rem;
                border-radius: 0.3rem;
            }
        }
        .bujiao-price{
            margin: 2rem 0 0 0;
            .line-1{
                margin: 0;
                font-size: 1.3rem;
                padding: 0 1.5rem;
                background: white;
                line-height: 4rem;
                border-bottom: 1px solid #F6F6F6;
            }
            ul{
                list-style: none;
                color: #999999;
                background:white;
                padding: 1rem 2rem;
                margin-bottom: 0;
                li{
                    border-bottom: 1px solid #F6F6F6;
                    padding: 1rem 0;
                    p{
                        margin: 0;
                    }
                }
            }
            .line-2{
                font-size: 1.3rem;
                padding: 0 1.5rem;
                line-height: 3rem;
                background: white;
                margin-bottom: 0;
            }
        }
        .white{
            height: 7rem;
            background: white;
        }
        .bujiao-bottom{
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            // background: #f8f8f8;
            background: #fff;
            z-index: 999;
            width: 100%;
            p{
                line-height: 45.59px;
                margin-bottom: 0;
                margin-left: 2rem;
                font-size: 1.3rem;
            }
            button{
                // background: #10A442;
                background: #5CE0A9;
                font-size: 1.3rem;
                color: white;
                border: none;
                height: 3.8rem;
                width: 13rem;
                .button-2-img{
                    width: 1.3rem;
                }
            }
        }
    }
    // 背景
    .backgroundColor {
        background-color: #EDF0F5;
        width: 100%;
        height: 1.25rem;
    }
</style>
