<template>
	<view class="RecordOfMaintenanceIndex">
		<u-navbar title="养护记录" leftIconColor="#000" rightIcon='../../static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' autoBack="true">
		</u-navbar>
		<view class="contablist">
			<view class="listItem" v-for="(item,index) in tabsList" :key="index" @click="ONtab(item,index)">
				<view :class="{'ckeckLabel':tabIndex==index,'label':true}">
					{{item.name}}
				</view>
				<image src="../../static/common/curve.png" mode="" v-if="tabIndex==index"></image>
			</view>
		</view>
		<view class="cardList">
			<view class="card" v-if="list.length" v-for="(item,index) in list" :key="index">
				<view class="cardItem">
					<view class="cardLabel">
						店铺名称
					</view>
					<view class="cardText">
						{{item.storeName}}
					</view>
				</view>
				<view class="cardItem">
					<view class="cardLabel">
						到店日期
					</view>
					<view class="cardText">
						{{item.dateOfArrival}}
					</view>
				</view>
				<view class="cardItem">
					<view class="cardLabel">
						消费金额
					</view>
					<view class="cardPrice">
						￥{{item.consumptionAmount}}
					</view>
				</view>
				<view class="cardItem">
					<view class="cardLabel">
						消费内容
					</view>
					<view class="cardText">
						{{item.consumptionContent}}
					</view>
				</view>
				<view class="carddesc">
					{{item.maintainType}}
				</view>
			</view>
			<view class="uempty" v-if="list.length <= 1">
				<image src="../../static/icon_xx_k.png"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tabsList: ['保养', '换轮胎', '贴膜', '维修检查', '喷漆', '换电瓶', '改装'],
				tabsList: [],
				tabIndex: 0,
				pageNum: 1,
				pageSize: 10,
				tabsVal: '',
				list: [],
			}
		},
		onShow() {
			this.getStoreTypeListData()
		},
		methods: {
			getStoreTypeListData() {
				this.$http.get('/api/client/index/storeTypeList', {
					storeTypeId: 1,
				}).then(res => {
					this.tabsList = res.data.data
					if (res.data.data != null) {
						this.tabsVal = res.data.data[0].id
						this.getListData()
					}
				})
			},
			getListData() {
				this.$http.post('/api/client/maintain/list', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					maintainType: this.tabsVal
				}).then((res) => {
					this.list = res.data.data.rows
				})
			},
			ONtab(data, index) {
				this.tabIndex = index
				this.tabsVal = data.id
				this.getListData()
			}
		}
	}
</script>

<style lang="scss">
	.RecordOfMaintenanceIndex {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fafbff;
		min-height: 100vh;

		.uempty {
			image {
				width: 376rpx;
				display: block;
				margin: 0 auto;
			}

			text {
				display: block;
				text-align: center;
				color: #ccc;
			}
		}

		.contablist {
			display: flex;
			overflow-x: auto;
			margin-top: 20rpx;

			.listItem {
				margin-right: 25rpx;
				text-align: center;
				flex: none;

				.label {
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
				}

				.ckeckLabel {
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
				}

				image {
					display: block;
					margin: auto;
					width: 30rpx;
					margin-top: 7rpx;
					height: 8rpx;
				}
			}
		}

		.cardList {
			margin-top: 24rpx;

			.card {
				margin-bottom: 24rpx;
				padding: 30rpx 20rpx;
				width: 702rpx;
				height: 378rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				box-sizing: border-box;

				.cardItem {
					display: flex;
					align-items: center;
					margin-bottom: 31rpx;

					.cardLabel {
						margin-right: auto;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}

					.cardText {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.cardPrice {
						font-weight: 400;
						font-size: 28rpx;
						color: #FF4502;
					}

					.carddesc {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		/* 隐藏滚动条 */
		.contablist::-webkit-scrollbar {
			display: none;
			/* 隐藏滚动条 */
		}
	}
</style>