<template>
	<view class="app">
		<head-view title="船名/航次"></head-view>
		<view class="content">
			<view class="form">
				<view class="uni-list">
					<radio-group class="group" @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />{{item.name}}
							</view>
						</label>
					</radio-group>
				</view>
				<view class="inputBox">
					<view class="input">
						<superwei-combox class="input" :candidates="mnfBlList" :isJSON="true" keyName="mnfBl"
							placeholder="提单号" v-model="mnfBl" @input="mnfBlInput"
							@select="mnfBlSelect"></superwei-combox>
						</uni-easyinput>
					</view>
					<!-- <view class="select" v-show="current!=0">
						<uni-data-select v-model="harbour" :localdata="harbourRange" @change="change('harbour')"
							placeholder="港区">
						</uni-data-select>
					</view> -->
					<!-- <view class="select" v-show="current!=0">
						<uni-data-select v-model="type" :localdata="typeRange" @change="change('type')"
							placeholder="贸易类型">
						</uni-data-select>
					</view> -->
					<view class="input">
						<superwei-combox class="input" :candidates="brandList" :isJSON="true" keyName="brdName"
							placeholder="品牌" v-model="brdName" @input="brandInput"
							@select="brandSelect"></superwei-combox>
						</uni-easyinput>
					</view>
					<!-- <view class="select" v-show="current!=0">
						<superwei-combox class="input" :candidates="bvmList" :isJSON="true" keyName="bvmName"
							placeholder="车型" v-model="bvmName" @input="bvmInput" @select="bvmSelect"></superwei-combox>
						</uni-easyinput>
					</view> -->
					<view class="select">
						<superwei-combox class="input" :candidates="potList" :isJSON="true" keyName="potName"
							placeholder="港口" v-model="potName" @input="potInput" @select="potSelect"></superwei-combox>
						</uni-easyinput>
					</view>
					<!-- <view class="select" v-show="current!=0">
						<uni-data-select v-model="status" :localdata="statusRange" @change="change('status')"
							placeholder="计划状态">
						</uni-data-select>
					</view> -->
					<button class="btn" @click="screen" v-show='current==0'>筛选</button>
					<button class="btn" @click="onSearch">搜索</button>
				</view>
			</view>
			<fjj-condition ref='condition' @touchmove.stop color="#4D7BFE" :list="menuList" :defaultValue="defaultValue"
				@result="resultConditon" />
			<view class="buttonlist">
				<button v-show="current==0" class="button" type="default" @click="distribute('center')">指令下发</button>
				<button v-show="current==1" class="button" type="default">指令发送</button>
				<button v-show="current==0 || current == 1" class="button" type="default" @click="ask">装船要求</button>
				<button class="button" type="default" v-show="current != 3">刷新</button>
				<button v-show="current==2" class="button" type="default">显示</button>
				<uni-popup ref="popup" type="dialog">
					<view class="popupBox">
						<view class="popupTitle">
							指令下发
						</view>
						<view class="popupInfo">
							<text>负责人：</text>
							<uni-data-select v-model="director" :localdata="directorList"></uni-data-select>
						</view>
						<view class="popupBtn">
							<view class="btnList">
								<button class="button" type="default" @click="cancel">取 消</button>
								<button class="button" type="primary" @click="confirm">确 认</button>
							</view>
						</view>
					</view>
				</uni-popup>
				<uni-popup ref="popup2" type="dialog">
					<view class="popupBox">
						<view class="popupTitle">
							装船要求
						</view>
						<uni-easyinput type="textarea" v-model="askValue" placeholder="请输入内容..."></uni-easyinput>
						<view class="popupBtn">
							<view class="btnList">
								<button class="button" type="default" @click="cancel">取 消</button>
								<button class="button" type="primary" @click="confirm">提 交</button>
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
			<view class="itemList" v-show="current==0">
				<view class="exp" v-for="(item,index) in itemList" :key="item.index">
					<view class="item">
						<view class="rowHead" v-show="active==1">
							<radio :value="item.value" />
						</view>
						<view class="row">
							<view class="col weight">
								船舱层数：5层3舱
							</view>
							<view class="col">
								数量：1,000
							</view>
							<view class="col">
								港口：厦门港
							</view>
						</view>
						<view class="row">
							<view class="col weight">
								计划状态：已发送
							</view>
							<view class="col">
								负责人：我是一个负责人
							</view>
							<view class="col">
								发送时间：2023/09/09 16:00
							</view>
						</view>
						<view class="rowFoot">
							<view class="col">
								装船进度
							</view>
							<view class="col">
								<view class="progress-box">
									<van-progress :percentage="itemSum(item.sum)" :pivot-text="'60/' + item.sum" />
								</view>
							</view>
						</view>
						<view class="fs blue">
							<text v-show="active==1" @click="onSend">发送</text>
							<text v-show="active==2">{{item.status}}</text>
						</view>
					</view>
					<view class="details">
						<uni-icons v-show="itemActive != index" class="jt" type="bottom" size="24" color="#108ee9"
							@click="isActive(index)"></uni-icons>
						<view class="itemDetails" v-show="itemActive == index">
							<view class="row" v-for="cell in item.xq">
								<view class="cell">
									TD90959749495
								</view>
								<view class="cell">
									中转港：厦门港
								</view>
								<view class="cell">
									数量：100
								</view>
								<view class="cell">
									品牌：特斯拉
								</view>
								<view class="cell">
									车型：电动车
								</view>
								<view class="cell">
									型号：特斯拉plus
								</view>
								<view class="cell blue" @click="toDetails(item.xq)">
									详情
								</view>
							</view>
							<uni-icons class="jt" type="top" size="24" color="#108ee9"
								@click="itemActive = '-1'"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="tablist" v-show="current==1">
				<view class="tab" :class="active==0?'active':''" type="default" @click="tabChange(0)">未发送</view>
				<view class="tab" :class="active==1?'active':''" type="default" @click="tabChange(1)">已发送</view>
			</view>
			<view class="itemList" v-show="current==1">
				<view class="exp" v-for="(item,index) in itemList" :key="item.index">
					<view class="item">
						<view class="rowHead" v-if="active==1">
							<radio :value="item.value" />
						</view>
						<view class="row">
							<view class="col weight">
								船舱层数：5层3舱
							</view>
							<view class="col">
								数量：1,000
							</view>
							<view class="col">
								港口：厦门港
							</view>
						</view>
						<view class="row">
							<view class="col weight">
								计划状态：已发送
							</view>
							<view class="col">
								负责人：我是一个负责人
							</view>
							<view class="col">
								发送时间：2023/09/09 16:00
							</view>
						</view>
						<view class="rowFoot">
							<view class="col">
								装船进度
							</view>
							<view class="col">
								<view class="progress-box">
									<van-progress :percentage="itemSum(item.sum)" :pivot-text="'60/' + item.sum" />
								</view>
							</view>
						</view>
						<view class="fs blue">
							<text v-show="active==0" @click="onSend">发送</text>
							<text v-show="active==1" @click="onPause(item.status)">{{item.status}}</text>
						</view>
					</view>
					<view class="details">
						<uni-icons v-show="itemActive != index" class="jt" type="bottom" size="24" color="#108ee9"
							@click="isActive(index)"></uni-icons>
						<view class="itemDetails" v-show="itemActive == index">
							<view class="row" v-for="cell in item.xq">
								<view class="cell">
									TD90959749495
								</view>
								<view class="cell">
									中转港：厦门港
								</view>
								<view class="cell">
									数量：100
								</view>
								<view class="cell">
									品牌：特斯拉
								</view>
								<view class="cell">
									车型：电动车
								</view>
								<view class="cell">
									型号：特斯拉plus
								</view>
								<view class="cell blue" @click="toDetails(item.xq)">
									详情
								</view>
							</view>
							<uni-icons class="jt" type="top" size="24" color="#108ee9"
								@click="itemActive = '-1'"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<view class="currentList" v-show="current==2">
				<view class="imgLi">
					<image src="@/static/images/u176.png" mode="widthFix">
				</view>
				<view class="title">
					第一层
				</view>
				<view class="nr">
					<text class="text">是否可调夹板: 是</text>
					<text class="text">是否有跳板: 双尾跳</text>
				</view>
				<view class="imgLi">
					<image src="@/static/images/u86.png" mode="widthFix">
				</view>
				<view class="tableHead">
					<text>明细(100)</text>
					<uni-icons class="jt" type="bottom" size="24"></uni-icons>
				</view>
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr class="gray">
						<uni-th align="center" width="20">提单号</uni-th>
						<uni-th align="center" width="20">港口</uni-th>
						<uni-th align="center" width="20">品牌</uni-th>
						<uni-th align="center" width="20">车型</uni-th>
						<uni-th align="center" width="20">型号</uni-th>
						<uni-th align="center" width="20">车型明细</uni-th>
						<uni-th align="center" width="20">数量</uni-th>
						<uni-th align="center" width="20">长</uni-th>
						<uni-th align="center" width="20">宽</uni-th>
						<uni-th align="center" width="20">高</uni-th>
						<uni-th align="center" width="20">位置</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td>1123</uni-td>
						<uni-td>2</uni-td>
						<uni-td>3</uni-td>
						<uni-td>4</uni-td>
						<uni-td>1</uni-td>
						<uni-td>2</uni-td>
						<uni-td>3</uni-td>
						<uni-td>4</uni-td>
						<uni-td>1</uni-td>
						<uni-td>2</uni-td>
						<uni-td>3</uni-td>
					</uni-tr>

				</uni-table>
			</view>

			<view v-show="current == 3">
				<template v-if="placeTabs == 0">
					<view class="field">
						<view class="boxTop">
							<view class="title">
								堆场
							</view>
							<view class="option">
								<uni-data-select v-model="optionValue" :localdata="optionList"></uni-data-select>
							</view>
						</view>
						<view class="fpList">
							<view class="fpInfo">
								<view class="fpTitle">
									港建库
								</view>
								<view class="fpListInfo">
									<view class="infoTop">
										<view class="infoTopTitle">A1区（12*12）</view>
										<view class="titleRight" @click="toGoPlace">
											<text>车道</text>
											<view class="titleIcon">
												<van-icon name="arrow" color="#fff" />
											</view>
										</view>
									</view>
									<view class="infoCarNum">
										<text>车位总数：120车位</text>
										<text>使用：40车位</text>
										<text>剩余：40车位</text>
										<text>可停放车辆：300辆</text>
										<text>已停放车辆：300辆</text>
									</view>
									<view class="progressBox">
										<van-progress :percentage="itemSum2(2000)" :pivot-text="'1000/' + 2000" />
									</view>
									<view class="carInfoList">
										<view class="carBrand" v-for="item in 4" :key="item">
											<view class="brandTitle">
												保时捷-轿车
											</view>
											<view class="placeInfo">
												400 辆，共5道12车位
											</view>
										</view>
									</view>
								</view>
								<view class="fpListInfo notListInfo">
									<view class="infoTop">
										<view class="infoTopTitle">A1区（12*12）</view>
										<view class="titleRight" @click="toGoPlace">
											<text>车道</text>
											<view class="titleIcon">
												<van-icon name="arrow" color="#fff" />
											</view>
										</view>
									</view>
									<view class="notTitle">
										未分配
									</view>
									<text>车位总数：120车位</text>
									<text>可停放车辆：300辆</text>
								</view>
								<view class="tipInfo">
									未使用2车道20车位
								</view>
							</view>
							<view class="fpInfo">
								<view class="fpTitle">
									海棠库
								</view>
								<view class="fpListInfo notListInfo">
									<view class="infoTop">
										<view class="infoTopTitle">A1区（12*12）</view>
										<view class="titleRight" @click="toGoPlace">
											<text>车道</text>
											<view class="titleIcon">
												<van-icon name="arrow" color="#fff" />
											</view>
										</view>
									</view>
									<view class="notTitle">
										未分配
									</view>
									<text>车位总数：120车位</text>
									<text>可停放车辆：300辆</text>
								</view>
								<view class="fpListInfo">
									<view class="carInfoList">
										<view class="infoTop">
											<view class="infoTopTitle">A1区（12*12）</view>
											<view class="titleRight" @click="toGoPlace">
												<text>车道</text>
												<view class="titleIcon">
													<van-icon name="arrow" color="#fff" />
												</view>
											</view>
										</view>
										<view class="infoCarNum">
											<text>车位总数：120车位</text>
											<text>使用：40车位</text>
											<text>剩余：40车位</text>
											<text>可停放车辆：300辆</text>
											<text>已停放车辆：300辆</text>
										</view>
										<view class="progressBox">
											<van-progress :percentage="itemSum2(2000)" :pivot-text="'1000/' + 2000" />
										</view>
									</view>
									<view class="carInfoList">
										<view class="carBrand" v-for="item in 4" :key="item">
											<view class="brandTitle">
												保时捷-轿车
											</view>
											<view class="placeInfo">
												400 辆，共5道12车位
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<place @modifyPlaceTabs="modifyPlaceTabs"></place>
				</template>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import HeadView from '@/components/head-view/head-view.vue';
	import HeadInfo from '@/components/head-info/head-info';
	import place from './place.vue';
	let timers = null;
	export default {
		data() {
			return {
				id: "", // 进入页面的初始id
				menuList: [], // 筛选框
				defaultValue: {},
				mnfBl: '', // 提单号
				mnfBlItem: {},
				mnfBlList: [],
				brdId: '', // 品牌
				brdName: '', // 品牌
				brandItem: {},
				brandList: [],
				harbour: '', // 港区
				harbourRange: [{
						value: 1,
						text: '全部'
					},
					{
						value: 2,
						text: '内贸'
					}, {
						value: 3,
						text: '外贸'
					}
				],
				type: '', // 贸易类型
				typeRange: [{
						value: 1,
						text: '全部'
					},
					{
						value: 2,
						text: '内贸'
					}, {
						value: 3,
						text: '外贸'
					}
				],
				bvmName: '', // 车型
				bvmItem: {},
				bvmList: [],
				potName: '', // 港口
				potItem: {},
				potList: [],
				status: '', // 贸易类型
				statusRange: [{
						value: 1,
						text: '待发送'
					},
					{
						value: 2,
						text: '已发送'
					}, {
						value: 3,
						text: '待作业'
					}, {
						value: 4,
						text: '作业中'
					}, {
						value: 5,
						text: '暂停'
					}, {
						value: 6,
						text: '已完成'
					}
				],
				// 指令下发弹窗负责人
				director: "",
				directorList: [{
						text: "产品馆",
						value: "1"
					},
					{
						text: "产品馆服务",
						value: "2"
					}
				],
				// 装船要求
				askValue: "",
				value: '',
				itemList: [],
				range: [1],
				items: [{
						value: '1',
						name: '总指令',
						checked: 'true'
					},
					{
						value: '2',
						name: '分指令'
					},
					{
						value: '3',
						name: '配载图'
					},
					{
						value: '4',
						name: '场位图'
					},
				],
				current: 0,
				active: 1,
				itemActive: -1,

				optionValue: "",
				optionList: [{
						value: "0",
						text: "全部堆场"
					},
					{
						alue: "1",
						text: "外六"
					},
					{
						alue: "2",
						text: "港建库"
					},
					{
						alue: "3",
						text: "高东库"
					},
					{
						alue: "4",
						text: "江海库"
					}
				],
				placeTabs: 0,
			}
		},
		computed: {
			itemSum() {
				return function(item) {
					let sum = (60 / item) * 100
					return sum
				};
			},
			itemSum2() {
				return function(item) {
					let sum = 1000 / item * 100
					return sum
				};
			}
		},
		onLoad(options) {
			this.id = JSON.parse(decodeURIComponent(options.id))
			this.loadSumOrder() // 总指令：分页查询
			setTimeout(() => {
				this.menuList = [{
					'title': '计划状态',
					'type': 'custom',
					'key': 'custom1',
					'isMutiple': false, //多选
					'detailList': [{
						title: '待发送',
						value: "1",
						isSelected: true
					}, {
						title: '已发送',
						value: "2",
					}, {
						title: '待作业',
						value: "3",
					}, {
						title: '作业中',
						value: "4",
					}, {
						title: '暂停',
						value: "5",
					}, {
						title: '已完成',
						value: "6",
					}],
				}, {
					'title': '按车型',
					'type': 'custom',
					'key': 'custom2',
					'isMutiple': true, //多选
					'detailList': [{
						title: '车型1',
						value: "1",
					}, {
						title: '车型2',
						value: "2",
					}, {
						title: '车型3',
						value: "3",
					}, {
						title: '车型4',
						value: "4",
					}],
				}]
				this.defaultValue = {
					custom1: ['1'],
					custom5: 1,
				};
			}, 2000)
		},
		components: {
			HeadView,
			HeadInfo,
			place
		},
		methods: {
			...mapActions([
				'majax',
				'najax'
			]),
			onSearch() {
				console.log('搜索');
				console.log(this.potName);
			},
			// 点击筛选
			screen() {
				this.$refs.condition.visibleDrawer = true;
			},
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
			},
			loadSumOrder() {
				let data = {}
				data.bvmId = this.id
				this.majax({
					url: this.$local + "/api/shipInstructions/page",
					params: data,
					method: 'GET'
				}).then(res => {
					// this.itemList = res.data.records
				})
				// 模拟
				this.itemList = [{ //已发送
						sum: 300,
						xq: 2
					},
					{
						sum: 600,
						xq: 3
					},
					{
						sum: 900,
						xq: 1
					},
					{
						sum: 100,
						xq: 2
					},
					{
						sum: 200,
						xq: 2
					}
				]
			},
			loadOtherOrder() {
				let data = {}
				data.bvmId = this.id
				data.sendStatus = this.active // 未发生0已发送1
				this.majax({
					url: this.$local + "/api/shipInstructions/pageCommandForBranch",
					params: data,
					method: 'GET'
				}).then(res => {
					// this.itemList = res.data.records
				})
				// 模拟分指令
				this.itemList = [{ //已发送
						sum: 100,
						xq: 2,
						status: '暂停'
					},
					{
						sum: 300,
						xq: 3,
						status: '重新发送'
					},
					{
						sum: 200,
						xq: 1,
						status: '重新发送'
					},
					{
						sum: 500,
						xq: 2,
						status: '暂停'
					},
					{
						sum: 800,
						xq: 2,
						status: '暂停'
					}
				]
			},
			tabChange(tag) {
				this.active = tag
				if (this.active == 0) {
					this.loadOtherOrder()
					console.log(0);
				} else {
					this.loadOtherOrder()
					console.log(1);
				}
			},
			change(e) {
				console.log(e);
				console.log(this.harbour);
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						switch (this.current) {
							case 0:
								this.loadSumOrder()
								break;
							case 1:
								this.loadOtherOrder()
								break;
							default:
						}
						break;
					}
				}

			},
			isActive(e) {
				this.itemActive = e
			},
			// 发送指令
			onSend() {
				let data = {}
				this.majax({
					url: this.$local + "/api/shipInstructions/commandSendForBranch",
					params: data,
					method: 'GET'
				}).then(res => {
					console.log(res);
				})
			},
			// 重新发送指令
			onReissued() {
				let data = {}
				this.majax({
					url: this.$local + "/api/shipInstructions/commandReissuedForBranch",
					params: data,
					method: 'GET'
				}).then(res => {
					console.log(res);
				})
				console.log('重新发送');
			},
			// 暂停指令
			onPause(tag) {
				if (tag == '暂停') {
					let data = {}
					data.lwpId = '111'
					this.majax({
						url: this.$local + "/api/shipInstructions/commandPause",
						params: data,
						method: 'GET'
					}).then(res => {
						console.log(res);
					})
					console.log('暂停');
				} else if (tag == '重新发送') {
					this.onReissued()
				}

			},
			// 点击指令下发
			distribute(type) {
				this.$refs.popup.open(type)
			},
			cancel() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			},
			confirm() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			},
			// 点击装船要求
			ask(type) {
				this.$refs.popup2.open(type)
			},
			// 提单号
			mnfBlInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getMnfBl(e)
				}, 500)
			},
			mnfBlSelect(e) {
				this.shipItem = e
			},
			// 获取提单号
			getMnfBl(keyWords) {
				let data = {}
				data.ieType = 'I' // I进口 E出口 暂无法区分
				data.key = keyWords
				data.pamId = this.id
				this.majax({
					url: this.$local + "/api/shipInstructions/queryByKey",
					params: data,
					method: 'GET'
				}).then(res => {
					this.mnfBlList = res.data
				})
				// 模拟
				this.mnfBlList = [{
					id: 1123,
					mnfBl: '测试提单号'
				}]
			},
			// 品牌
			brandInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getBrand(e)
				}, 500)
			},
			brandSelect(e) {
				this.brandItem = e
				this.brdId = e.brdId
			},
			// 获取品牌
			getBrand(keyWords) {
				let data = {}
				data.brdName = keyWords
				this.majax({
					url: this.$local + "/api/miniapp/queryBrand",
					params: data,
					method: 'GET'
				}).then(res => {
					this.brandList = res.data
				})
				// 模拟
				this.brandList = [{
					brdId: 1123,
					brdName: '测试品牌'
				}]
			},
			// 港口
			potInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getPot(e)
				}, 500)
			},
			potSelect(e) {
				this.potItem = e
				this.potId = e.potId
			},
			// 获取港口
			getPot(keyWords) {
				let data = {}
				data.potCnname = keyWords
				this.majax({
					url: this.$local + "/api/miniapp/port",
					params: data,
					method: 'GET'
				}).then(res => {
					this.potList = res.data
				})
				// 模拟
				this.potList = [{
					potId: 1123,
					potName: '测试港口'
				}]
			},
			// 车型
			bvmInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getBvm(e)
				}, 500)
			},
			bvmSelect(e) {
				this.bvmItem = e
			},
			// 获取车型
			getBvm(keyWords) {
				let data = {}
				data.key = keyWords
				this.majax({
					url: this.$local + "/api/miniapp/port",
					params: data,
					method: 'GET'
				}).then(res => {
					this.bvmList = res.data
				})
				// 模拟
				this.bvmList = [{
					bvmId: 1123,
					bvmName: '测试车型'
				}]
			},
			toDetails(id) {
				const newId = encodeURIComponent(JSON.stringify(id));
				uni.navigateTo({
					url: '/pages/index/instructDetails?id=' + newId
				})
			},
			// 点击车道
			toGoPlace() {
				this.placeTabs = 1;
			},
			// 子组件修改值
			modifyPlaceTabs(data) {
				this.placeTabs = data;
			},
		}
	};
</script>

<style lang="less">
	.blue {
		color: #108ee9;
	}

	.content {
		padding: 20px;
		background-color: #fff;

		.form {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;

			.inputBox {
				display: flex;
			}

			.input {
				width: 120px;
				height: 35px;
				line-height: 35px;
				margin-right: 20px;
			}

			.btn {
				height: 35px;
				line-height: 35px;
				margin-right: 10px;

			}
		}

		.uni-list {
			.group {
				display: flex;
				justify-content: space-between;
				margin-top: 5px;

				.uni-label-pointer {
					margin-right: 10px;
					line-height: 24px;
				}

				/deep/.uni-radio-input {
					width: 16px;
					height: 16px;
				}
			}
		}

		.buttonlist {
			width: 340px;

			.button {
				display: inline-block;
				width: 100px;
				height: 40px;
				line-height: 40px;
				margin-right: 20rpx;
			}

			.popupBox {
				width: 500px;
				background-color: #fff;
				padding: 30px;

				.popupTitle {
					font-size: 20px;
					font-weight: bold;
					border-bottom: 1px solid #ccc;
					padding-bottom: 20px;
				}

				.popupInfo {
					display: flex;
					margin-top: 20px;
					line-height: 35px;
					width: 250px;
					padding: 30px 0;
				}

				/deep/.uni-easyinput {
					margin-top: 20px;
				}

				/deep/.uni-select__input-placeholder {
					text-align: left;
				}

				/deep/.uni-select__input-text {
					text-align: left;
				}

				.popupBtn {
					margin-top: 20px;
					padding-top: 20px;
					border-top: 1px solid #ccc;
					display: flex;
					justify-content: flex-end;

					.btnList {
						display: flex;
					}

				}
			}
		}

		.tablist {
			width: 175px;
			height: 60px;
			line-height: 60px;
			font-size: 21px;
			display: flex;
			justify-content: space-between;

			.tabs {
				width: 80px;
				height: 60px;
				border-bottom: 2rpx solid #ebebeb;
			}

			.active {
				color: #1890ff;
				border-bottom: 2rpx solid #1890ff;
			}

		}

		.itemList {
			margin-top: 30px;

			.exp {
				border-bottom: 2px solid #e9e9e9;
				text-align: center;
				padding-bottom: 10px;

				.item {
					height: 110px;
					padding: 20px 20px 0;
					display: flex;
					justify-content: space-between;
					text-align: left;

					.weight {
						font-weight: 900;
					}

					.rowHead {
						width: 4%;
					}

					.row {
						width: 28%;
						flex-direction: column;
						display: flex;
						justify-content: space-between;
					}

					.rowFoot {
						width: 34%;
						flex-direction: column;
						display: flex;
						justify-content: space-around;
					}

					.fs {
						width: 6%;
						text-align: right;
						line-height: 110px;
					}
				}

				.details {
					padding: 20px;

					.itemDetails {
						border-top: 2px dotted #7d7d7d;

						.row {
							display: flex;
							justify-content: space-between;
							height: 50px;
							line-height: 50px;

						}
					}
				}

			}
		}

		.currentList {
			width: 85%;
			margin: 10px auto;

			.tableHead {
				margin-top: 10px;
				height: 50px;
				line-height: 50px;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 0 12px;
				font-size: 20px;
				border: 1px solid #f2f2f2;
			}

			.gray {
				background-color: #f9f9f9;
			}

			.imgLi {
				margin-bottom: 5px;
			}

			.title {
				line-height: 50px;
				font-size: 21px;
				font-weight: 900;
			}

			.nr {
				font-size: 16px;

				.text {
					display: inline-block;
					margin-right: 50px;
				}
			}
		}

		.field {
			padding: 20px;
			background-color: #000;

			.boxTop {
				display: flex;

				.title {
					margin-right: 20px;
					font-size: 18px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #fff;
				}

				.option {
					width: 200px;
				}
			}

			.carTabs {
				width: 100%;
				background-color: #fff;
				margin-top: 20px;
				border-radius: 8px;

				/deep/.tab {
					border-radius: 8px !important;
				}

				.carList {
					display: flex;
					justify-content: space-around;
					padding: 20px;

					.carInfo {
						width: 19%;
						padding: 20px;
						background-color: #ccc;
						text-align: center;
						border-radius: 6px;
					}
				}

				.partsList {
					width: 100%;
					display: flex;
					justify-content: space-around;
					padding: 20px;

					.partsInfo {
						width: 19%;
						padding: 20px;
						background-color: #ccc;
						text-align: center;
						border-radius: 6px;
					}
				}
			}

			.infoTitle {
				font-size: 16px;
				color: #666;
			}

			.infoNum {
				font-size: 28px;
			}

			.fpList {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;

				.fpInfo {
					width: 49%;

				}

				.fpTitle {
					text-align: center;
					background: #262626;
					padding: 10px;
					color: #fff;
				}

				.fpListInfo {
					padding: 20px 10px;
					background: #262626;
					color: #fff;
					margin-top: 10px;

					.infoTop {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.infoTopTitle {
							font-size: 18px;
							font-weight: bold;
							padding-left: 10px;
							border-left: 5px solid #0079FE;
						}

						.titleRight {
							display: flex;

							.titleIcon {
								width: 16px;
								height: 16px;
								background: #0079FE;
								margin-left: 5px;
								line-height: 16px;
								text-align: center;
								border-radius: 50%;
								margin-top: 5px;

								/deep/.van-icon {
									transform: scale(0.8);
									margin-top: 2px;
									margin-left: 2px;
								}
							}

							text {
								color: #0079FE;
								margin-top: 2px;
							}
						}
					}

					.infoCarNum {
						display: flex;
						flex-wrap: wrap;
						margin-top: 10px;

						text {
							margin: 10px 20px;
						}
					}

					.progressBox {
						width: 100%;
					}

					.carInfoList {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.carBrand {
							width: 32%;
							background-color: #2C2D2D;
							padding: 10px;
							margin-bottom: 10px;

							.brandTitle {
								color: #0079FE;
								margin-bottom: 10px;
							}
						}
					}
				}

				.notListInfo {
					.notTitle {
						font-size: 22px;
						font-weight: bold;
						text-align: center;
						margin: 30px 0;
					}

					.infoTop {
						text {
							margin-right: 0;
						}
					}

					text {
						margin-right: 30px;
					}
				}

				.tipInfo {
					width: 100%;
					font-size: 24px;
					color: #5FE515;
					font-weight: bold;
					padding: 20px 0;
					text-align: center;
					background: #fff;
					margin-top: 10px;
				}
			}
		}
	}
</style>