<template>
	<view class="">
		<u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10">
			<view style="padding: 60rpx 5rpx 40rpx;">
				<u-cell-group >
					<u-cell-item :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="eye-fill"  title="车牌号码:" :value="detailData.number"></u-cell-item>
					<u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="car-fill"  title="车辆类型:" ></u-cell-item>
					<u-cell-item :key="index" v-for="(item,index) in carPropertiesList" v-if="item.value==detailData.properties"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="error-circle-fill"  title="车辆性质:" ></u-cell-item>
					<u-cell-item value-style="{'color':'#5064eb'}" :key="index" v-for="(item,index) in fuelCategoryList"  v-if="item.value==detailData.fuelCategory"  :value="item.label" :icon-style="iconStyle"  :border-bottom="false" :arrow="false"  icon="grid-fill"  title="燃油类别:" ></u-cell-item>
					<u-cell-item v-if="detailData.opinion" :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="more-circle-fill"  title="审核意见:" :value="detailData.opinion"></u-cell-item>
				</u-cell-group>
				<view class="detail-img">
					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense1)">
						<text>行驶证【正面】</text>
						<image  :src="detailData.vehicleDrivingLicense1" mode=""></image>
					</view>
					<view @click.stop="$util.preview(detailData.vehicleDrivingLicense2)">
						<text>行驶证【反面】</text>
						<image  :src="detailData.vehicleDrivingLicense2" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		
		<view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
			<view class="top" >
				<text class="number">车牌号：{{item.number}}</text>
				<text @click.stop="jump('/pages/index/car/list?carNo='+item.number)" style="text-decoration: underline;margin-top: 10rpx;">出入记录</text>
			</view>
			<view class="center">
				<view class="flex">
					<view @click.stop="$util.preview(item.carImg)" class="flex justify-center align-center">
						<image :src="item.carImg" mode=""></image>
					</view>
					<view class="content">
						<text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
						<text class="padding-bottom-10">车主电话：{{item.personPhone}}</text>
						<view class="padding-bottom-10">
							审核状态：
							<text style="color: #008f69;" v-if="item.auditStatus==1">已通过</text>
							<text style="color: #ea7500;" v-if="item.auditStatus==0">待审核</text>
							<text style="color: #da0000;" v-if="item.auditStatus==-1">未通过</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="bottom" >
				<view @click.stop="edit(item)" style="font-size: 22rpx;" class="cu-btn  sm round  base-line margin-right-20" >
					<u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
					编辑
				</view>
				<view @click.stop="del(item)" style="font-size: 22rpx;" class="cu-btn  sm round red-line" >
					<u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array
			}
		},
		data() {
			return {
				iconStyle:{
					color:'#5064eb'
				},
				
				//详情
				detailShow:false,
				detailData:{},
				
				
				carTypeList:[],
				carPropertiesList:[],
				fuelCategoryList:[]
			}
		},
		created() {
			this.getDict()
		},
		methods: {
			edit(item){
				//重新编辑,审核状态重置为0
				let params={
					id:item.id,
					auditOpinion:"",
					auditStatus:0,
					carImg:item.carImg,
					fuelCategory:item.fuelCategory,
					number:item.number,
					properties:item.properties,
					type:item.type,
					vehicleDrivingLicense1:item.vehicleDrivingLicense1,
					vehicleDrivingLicense2:item.vehicleDrivingLicense2
				}
				console.log(params);
				uni.navigateTo({
					url:"/pages/index/car/my-car/add"+this.$u.queryParams(params)
				})
			},
			del(item){
				this.$emit('delItem',item)
			},
			jump(url){
				if (!this.$isEmpty(url)) {
					uni.navigateTo({
						url
					})
				}
			},
			getDict(){
				var _that = this;

				//车辆类型
				this.$api.dict({code:'car_type'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						_that.carTypeList.push(tmp)
					})
					_that.$u.vuex('vuex_carTypeList',_that.carTypeList)
				})
				//车辆性质
				this.$api.dict({code:'car_properties'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						_that.carPropertiesList.push(tmp)
					})
					_that.$u.vuex('vuex_carPropertiesList',_that.carPropertiesList)
				})
				//燃油类别
				this.$api.dict({code:'fuel_category'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						_that.fuelCategoryList.push(tmp)
					})
					_that.$u.vuex('vuex_fuelCategoryList',_that.fuelCategoryList)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.detail-img{
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #707175;
		
		view{
			display: flex;
			flex-direction: column;
			width: 48%;
			height: 300rpx;
			
			text{
				padding: 10rpx 0;
			}
		}
	}
	
	
	.card{
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		image{
			width: 120rpx;
			height: 120rpx;
		}
		
		.top{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 20rpx 0rpx;
			border-bottom: 1rpx dashed #e5e5e5;
			.number{
				font-size: 34rpx;
			}
			
			.audit{
				font-size: 30rpx;
			}
		}
		
		.center{
			padding: 40rpx 0;
			display: flex;
			justify-content: space-between;
			.content{
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				font-size: 30rpx;
				
				text{
					padding-bottom: 10rpx;
				}
				
			}
			.record{
				display: flex;
				justify-content: center;
				align-items: center;
				color: #545454;
			}
			
		}
		
		.bottom{
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
		}
		
		
	}
</style>
