<template>
    <div class="w_box">
        <div class="withdraw">
              <p class="withdraw_title">提现申请（仅支持余额全部提现）</p>
              <p class="withdraw_price"><span style="color:#999999;font-size: 18px;padding-right: 2rem;">余额</span><span style="font-size: 18px;">￥ </span> {{data.price}}</p>
              <div class="withdraw_button">
                  <div class="lv_button" @click="tixian">全部提现</div>
              </div>
        </div>
        <div class="jilu">
            <p class="withdraw_titles">提现记录</p>
            <div class="jilu_box"  id="list1" >
                <div class="jilu_list"   v-for="item in data.jilu">
                    <div class="left">
                        <p class="left_t">{{item.created_at}}</p>
                    </div>
                    <div class="right" :style="{color:item.color}">
                        {{item.status}}
                    </div>
                    <div class="p_right">
                        <p class="left_p">￥{{item.money}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import Utils from "../../extend/Utils";
    import wx from "weixin-jsapi";
    import router from '@/router';
    import {MessageBox} from 'element-ui';
    import {Message} from "element-ui";

    @Component({
        components: {}
    })
    export default class UserIndex extends Vue {
        public data: any = {
              price:'',
              jilu:''
        };
        private avatar = localStorage.getItem("avatar");

        async created() {
            let res = await Http.getInstance().userinfo();
            this.data.price = res.data.balance
            let ress = await Http.getInstance().userWithdrawal();
            console.log(ress)
            this.data.jilu = ress.data

        }
        async mounted() {

        }

        async tixian(){
            if(this.data.price < 10){
                MessageBox.alert('<p>提现最小额度为10元，需继续邀请好友\n' + '获得更多奖励</p>', '抱歉，您的余额不足！', {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: "继续邀请好友" ,
                    type: 'warning'
                }).then(action =>{
                    this.$router.push('/user/share')
                });
            }else{
                let res = await Http.getInstance().withdrawal();
                console.log(res)
                if (res.data.code == 1) {
                    MessageBox.alert('<p>提现申请成功，请立即联系客服\n' + '<a href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a>（同微信）</p>', '温馨提示', {
                        dangerouslyUseHTMLString: true,
                        confirmButtonText: "立即拨打" ,
                    }).then(async action => {
                        window.location.href = 'tel://' +Http.PHONE;
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    }).catch(() => {
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    });

                } else {
                    Message({
                        message: '提现申请失败', duration: 2000, type: "error"
                    });
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .w_box{
        background: #f7f7f7;
        font-family: 'PingFang SC','Helvetica Neue','Helvetica','Arial',sans-serif;
    }
    .withdraw{
        padding: 2rem;
        background: #ffffff;
        .withdraw_title{
            font-size: 20px;
            border-left: 0.5rem solid #20b452;
            padding-left: 1rem;
            color: #666666;
            height: 25px;
        }
        .withdraw_price{
            font-size: 39px;
            border-top: 1px solid #e2e2e2;
            line-height: 99px;
        }
        .withdraw_button{
            display: flex;
            justify-content: space-around;
            .lv_button{
                background: #20b452;
                color: #ffffff;
                width: 36rem;
                height: 4rem;
                line-height: 4rem;
                text-align: center;
                font-size: 21px;
                border-radius: 5px;
            }
        }

    }
    .jilu{
        padding-top: 2rem;
        margin-top: 3rem;
        background: #ffffff;
        .withdraw_titles{
            font-size: 18px;
            padding-left: 1rem;
            color: #333333;
            height: 25px;
            padding-bottom: 2.5rem;
        }
        .jilu_box{
            font-size: 14px;
            .jilu_list{
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                padding: 0rem 1.5rem;
                height: 4rem;
                line-height: 4rem;
                .left{
                    .left_p{
                        font-size: 14px;
                    }
                    .left_t{
                        color: #999999;
                    }
                }
                .right{
                }
            }
        }
    }
    #list1 .jilu_list:nth-of-type(odd){
        background:#f7f7f7;
    }
    #list1 .jilu_list:nth-of-type(even){
        background:#ffffff;
    }
</style>
