<!--积分转让-->
<template>
    <div id="transferPoints">
        <Nav :title="$t('transferPoints.title')"></Nav>
        <div class="content">
            <div class="top">
                <div class="left">
                    <van-icon size="18" color="#fff" class="iconfont" class-prefix="icon" name="zuanshi"></van-icon>
                    <span>{{$t('transferPoints.myintegral')}}</span>
                </div>
                <div class="right">
                    <span>{{integral}}</span>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <van-field v-model="form.integral" :label="$t('transferPoints.integralLabel')" :placeholder="$t('transferPoints.integralPlaceholder')" type="digit"/>
                    <van-field v-model="form.phone" :label="$t('transferPoints.phoneLabel')" :placeholder="$t('transferPoints.phonePlaceholder')" type="digit"/>
                </div>
                <div>
                    <van-button type="primary" color="#38d0c9" block @click="transfer">{{$t('transferPoints.confirm')}}</van-button>
                </div>
            </div>
        </div>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import { customerIntegralTurnOut } from "@/api/comp/personal.js";
import {getInfo} from '@/api/login'
export default {
    data() {
        return {
            loading: false,
            form:{
                integral:'',
                phone:'',
            }
        };
    },
    computed:{
        integral(){
            let num=0;
            //获取用户信息
            let userInfo = this.$store.state.user.userInfo;
            if(userInfo.integral){
                num=userInfo.integral;
            }
            return num;

        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            getInfo().then(res=>{
                if(res.code==200){
                    //同步本地数据
                    let userInfo = Object.assign({},this.$store.state.user.userInfo);
                    userInfo.integral=res.data.integral;
                    this.$store.commit('user/SET_USERINFO', userInfo);//用户基本信息
                }
            })
        },
        transfer(){
            let loginRules = [
                {
				name: 'integral',
				required: true,
				errmsg: this.$t('transferPoints.integralPlaceholder')
                },
                {
				name: 'phone',
				required: true,
				errmsg: this.$t('transferPoints.phonePlaceholder')
                },
            ]
            let valLoginRes = this.$validate.validate(this.form, loginRules)
			if (!valLoginRes.isOk) {
                this.$toast({ type: "fail", message: valLoginRes.errmsg });
				return false
			};
            this.loading = true;
            customerIntegralTurnOut(this.form).then(res=>{
                if(res.code==200){
                    this.loading = false;
                    this.$toast({ type: "success", message: this.$t('transferPoints.successmassage') });
                    //同步本地数据
                    let userInfo = Object.assign({},this.$store.state.user.userInfo);
                    userInfo.integral=userInfo.integral-this.form.integral;
                    this.$store.commit('user/SET_USERINFO', userInfo);//用户基本信息
                    this.form={
                        integral:'',
                        phone:'',
                    }
                }
            }).catch(err=>{
                this.loading = false;
            })
        }
    },
    components: {
        Nav,
    },
};
</script>

<style lang="scss" scoped>
#transferPoints {
    .content {
        padding: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        min-height: calc(100vh - 0.44rem /* 128/100 */);
        .top {
            width: 100%;
            height: 0.72rem /* 72/100 */;
            background: url("../../../../../public/static/images/integralBg.png")
                no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.16rem /* 16/100 */;
            box-sizing: border-box;
            .left {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 0.14rem /* 14/100 */;
                color: #fff;
                > span {
                    margin-left: 0.05rem /* 10/100 */;
                }
            }
            .right {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 0.24rem /* 24/100 */;
                color: #fff;
            }
        }
        .bottom{
            padding: .15rem /* 15/100 */0;
            >div:nth-child(1){
                padding: .12rem /* 12/100 */ 0;
            }
            >div:nth-child(2){
                padding: .12rem /* 12/100 */ 0;
            }
        }
    }
}
</style>