<!--
 * @Author: euzhi
 * @Description: 挪车码详情
-->
<template>
<view class="appCotent">
<div class="moveCarDetail">
    <div class="view__content">
        <div class="view__item" v-for="(vo,inx) in items" :key="inx">
            <div class="view__title">
                {{vo.title}}:
            </div>
            <div class="view__value">
                {{vo.value}}
            </div>
        </div>
    </div>
    <div class="view__btn view__no__bind" @click="openUnbindModal()">
        解除绑定
    </div>
    <div class="view__btn view__back" @click="goBack">
        返回
    </div>
    <div>
    	<u-modal :show="unbindShow" :title="unbindTitle" :content='unbindContent'
    		@confirm="unbind" @cancel="cancelModal" showCancelButton="true"></u-modal>
    </div>
</div>
</view>
</template>

<script>
export default {
    data() {
        return {
            items: [],
			id: '',
            //解除绑定对话框
            unbindShow: false,
            //解除绑定对话框标题
            unbindTitle: '解除绑定',
            //解除绑定对话框内容
            unbindContent: '确定解除绑定吗？',
            //解除绑定的挪车牌
        };
    },
    methods: {
        goBack(){
            uni.navigateBack({
                delta: 1
            })
        },
		getMoveCode(){
            uni.showLoading({
                title: '加载中',
                mask:true
            });
			let opts = { url: '/app/moveCode/' + this.id, method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
                uni.hideLoading()
				if (res.data.code == 200) {
                    let data = res.data.data
                    let list = []
                    list.push({title: "挪车码编号", value: data.moveCode})
                    list.push({title: "车牌号", value: data.carNo})
                    if(data.brand){
                        list.push({title: "品牌", value: data.brand})
                    }else{
                        list.push({title: "品牌", value: ""})
                    }
                    if(data.carModel){
                        list.push({title: "车型", value: data.carModel})
                    }else{
                        list.push({title: "车型", value: ""})
                    }
                    list.push({title: "绑定手机号", value: data.userMobile})
					this.items = list
				}else{
					uni.showToast({
						title: res.data.msg,
						icon: "none",
					});
				}
			})
		},
        openUnbindModal(){
        	this.unbindShow = true
        },
        unbind(){
        	let opts = { url: '/app/moveCode/edit/' + this.id, method: 'put' };
        	this.http.httpTokenRequest(opts, {}).then(res => {
        		if (res.data.code == 200) {
        			uni.showToast({
        				title: '解绑成功',
        				icon: "success",
        			});
        		}else{
                    uni.showToast({
                    	title: res.data.msg,
                    	icon: "error",
                    });
                }
                this.unbindShow = false
                this.goBack()
        	})
        	
        },
        cancelModal(){
            this.unbindShow = false
        },
    },
	onLoad(option) {
		this.id = option.id
	},
    onShow() {
        this.getMoveCode()
    },
}
</script>

<style lang="scss" scoped>
.moveCarDetail {
    padding: 40rpx 0rpx;

    .view__content {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        margin-bottom: 80rpx;

        .view__item {
            padding: 34rpx 0rpx;
            margin: 0 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid rgba(0, 0, 0, .1);

            .view__title {

                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
            }

            .view__value {

                font-size: 28rpx;
                font-family: DIN;
                font-weight: 500;
                color: #666666;
            }
        }

        .view__item:nth-last-child(1) {
            border-bottom: none;
        }
    }

    .view__btn {
        width: 670rpx;
        height: 76rpx;
        text-align: center;
        line-height: 76rpx;
        margin: 0 auto;
        font-size: 32rpx;
    }

    .view__no__bind {
        background: url('@/static/move-car/move-car-view2.png') no-repeat;
        margin-bottom: 30rpx;
        background-size: contain;
        color: rgba(255, 255, 255, 1);
    }
    .view__back{
        background: url('@/static/move-car/move-car-view1.png') no-repeat;
        background-size: contain;
        color:rgba(153, 153, 153, 1);
    }
}
</style>
