<!--
 * @Author: euzhi
 * @Description: 爱车管理
-->
<template>
<view class="appCotent">
<div class="loveCar">
    <div class="love-car__title">
        我的爱车
    </div>
    <div class="love-car__list">
        <div class="love__item" v-for="(vo,inx) in carList" :key="inx" >
            <div class="itme__img" @click="goGetPrice(vo.id)">
                <image src="@/static/move-car/love-car6.png" />
            </div>
            <div class="item__title" @click="goGetPrice(vo.id)">
				<view class="title">
					{{vo.brand + "-" + vo.seriesName}}
				</view>
                <view class="type">
					{{vo.carModel}}
                </view>
				<view class="route">
					行驶里程 {{vo.mileage || 0}}KM
				</view>
            </div>
            <!-- <div class="item__edit" @click="editCar(vo.id)">
                <image src="@/static/move-car/love-car2.png" />
            </div>
            <div class="item__del" @click="deleteModal(vo.id)">
                <image src="@/static/move-car/love-car3.png" />
            </div> -->
        </div>
    </div>
	<div>
		<u-modal :show="deleteShow" :title="deleteTitle" :content='deleteContent'
			@confirm="confirmModal" @cancel="cancelModal" showCancelButton="true"></u-modal>
	</div>
        <u-gap bgColor="transparent" height="10"></u-gap>
    <div class="love__btn" @click="addCar">
        <image src="@/static/move-car/love-car5.png"> 添加车辆
    </div>
	
	<view class="guide" @click="gotoExplanation">
		如何修改爱车信息？
	</view>
</div>
</view>
</template>

<script>
import util from '@/pages/login/util.js';
export default {
    data() {
        return {
			carList: [],
			deleteShow: false,
			deleteTitle: '删除车辆',
			deleteContent: '确定删除车辆？',
			carId: '',
			price: '',
        };
    },
    methods: {
        select(item) {
            this.$store.state.selectedCar=item;
            //返回
            uni.navigateBack({
                delta: 1
            });
        },
        addCar() {
            // uni.navigateTo({
            //     url: '/pagesB/pages/move-car/addCar'
            // })
			uni.navigateTo({
				url: '/pages/transitionPage'
			});
        },
        editCar(id) {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/editCar?id='+id
            })
        },
		//打开确认删除框
		deleteModal(id){
			this.deleteShow = true
			this.carId = id
		},
		//确认删除车辆
		confirmModal(){
			let opts = { url: '/app/vehicleAdmin/remove/' + this.carId, method: 'delete' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: "success",
					});
					this.getCarList()
				}else{
					uni.showToast({
						title: res.data.msg,
						icon: "error",
					});
				}
			})
			this.deleteShow = false
		},
		cancelModal(){
			this.deleteShow = false
		},
		getCarList(){
			uni.showLoading({
				title: '加载中',
				mask:true
			});
			let opts = { url: '/app/vehicleAdmin/list', method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.statusCode == 200) {
					uni.hideLoading()
					this.carList = res.data || []
				}
			})
		},
		goGetPrice(id){
			if(this.price == 1){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.carId = id;
				uni.navigateBack({
					delta: 1
				})
			}
		},
		// 跳转到使用说明页面
		gotoExplanation() {
		   uni.navigateTo({
		       url: '/pagesD/pages/personal/instructions'
		   }); 
		},
    },
	onShow(){
		this.getCarList()
	},
	onLoad(e) {
		this.price = e.price
	},

}
</script>

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

    .love-car__title {
        font-size: 38rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        position: relative;
        z-index: 999;
        margin-bottom: 30rpx;
    }

    .love-car__title::before {
        content: "";
        width: 76rpx;
        height: 14rpx;
        display: inline-block;
        background: url('@/static/move-car/love-car1.png') no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 7rpx;
        z-index: -1;

    }

    .love-car__list {
        margin-bottom: 60rpx;

        .love__item {
            display: flex;
            align-items: center;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
            border-radius: 20rpx;
            padding:20rpx 30rpx;
            margin-bottom: 30rpx;

            .itme__img {
				margin-right:30rpx;
                image {
                    width: 100rpx;
                    height: 100rpx;
                }
            }

            .item__title {
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 48rpx;
                // width: 350rpx;
				.title{
					font-size: 34rpx;
					font-weight: bold;
				}
				.type{
					color: #666666;
					font-size: 28rpx;
				}
				.route{
					font-size: 30rpx;
				}
            }

            .item__edit {
                image {
                    width: 32rpx;
                    height: 34rpx;
                }
            }

            .item__del {
                image {
                    width: 33rpx;
                    height: 36rpx;
                }
            }
        }
    }

      .love__btn {
        height: 76rpx;
        background: url('@/static/move-car/love-car4.png') no-repeat;
        background-size: contain;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 76rpx;
        text-align: center;
        // position: fixed;
        // width: 670rpx;
        // bottom: 60rpx;
        image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;

        }
    }
	
	.guide{
		text-align: center;
		font-size: 28rpx;
		text-decoration: underline;
		color: #3A86F7;
		margin-top:30rpx;
	}
}
</style>
