<template>
	<view class="app-content">
		<!-- <img src="../../static/beijing.png" alt="" class="tuku"> -->
		<Navs :navname.sync="navname" @fall="fall" :index='index'></Navs>
		<view class="content">
			<view class="content_top">
				<view class="craid" v-if="flightDetail&&flightDetail.carrierFlights">
					<view class="craid_data">
						<p>{{flightDetail.carrierFlights}}</p>
						<span>{{flightDetail.carrierFlightsDate}}</span>
					</view>
					<view class="craid_data">
						<p>{{flightDetail.outAirport}}</p>
						<span>{{flightDetail.scheduleTakeOffTime?flightDetail.scheduleTakeOffTime:"-"}}</span>
					</view>
					<view class="fight_center">
						<view class="type">
							{{flightDetail.normalState}}
						</view>
						<view class="aircraft"></view>
					</view>
					<view class="craid_data">
						<p>{{flightDetail.landAirport}}</p>
						<span>{{flightDetail.scheduleLandInTime?flightDetail.scheduleLandInTime:"-"}}</span>
					</view>
				</view>
				<view class="craids" v-if="!flightDetail.carrierFlights">
					<p>暂无航班信息</p>
				</view>
				<view class="scanning">
					<view :class="getFooterClass">
						<input class="input" v-model.trim="stratvalue" type="text"
							placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;"
							placeholder="请输入操作位置" />
						<view class="log_l"></view>
						<view class="log" @tap="scan('1')"></view>
					</view>
					<view :class="getFooterClasser" v-if="navname == '装车'">
						<input class="input" v-model.trim="container_ID" type="text"
							placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;"
							placeholder="请输入容器编号" />
						<view class="log_l"></view>
						<view class="log" @tap="scan('2')"></view>
					</view>
					<view :class="getlooterClass">
						<input class="input" v-model.trim="currentLuggageNum" disabled="true" @tap="baggageEntry"
							type="text"
							placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;"
							placeholder="请输入行李号" />
						<view class="log_l"></view>
						<view class="log" @tap="scan('3')"></view>
					</view>
				</view>
			</view>
			<view class="content_bootom" :style="{top:dataheight}">
				<view class="choice" @touchmove="movetran">
					<view :class="action === true ?'handle':'handles'" @tap="clicker(true)">已处理({{listdate1.length}}件)
					</view>
					<view :class="action !== true ?'handle':'handles'" @tap="clicker(false)">未处理({{listdate2.length}}件)
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-if="action === true" :class="item.types ? 'ups':'up'" v-for="(item, index) in listdate1"
						:key="index" @touchstart="start" @touchend="(e)=>end(e,item)">
						<view class="list" @tap="toDetail(item.luggageNum)">{{ item.luggageNum }}</view>
						<view class="normal" @tap="toDetail(item.luggageNum)">
							{{item.specialType!=null?specialTypeList[item.specialType]:" "}}
						</view>
						<view :class="item.abnormalType!=null?'error':'normal'" @tap="toDetail(item.luggageNum)">
							{{item.abnormalType!=null?item.abnormalName:"正常"}}</view>
						<view class="down_up" v-if="pagename == 'LOAD' && item.abnormalType!='OFF' && item.abnormalType!='POFF'"
							@tap="up(item,index)"></view>
						<view class="delete" v-if="pagename == 'LOAD' && item.abnormalType!='OFF' && item.abnormalType!='POFF'">
							<view class="log" @click="()=>up(item,index)"></view>
						</view>
					</view>
					<view v-if="action !== true" :class="item.types ? 'ups':'up'" v-for="(item, index) in listdate2"
						:key="index" @tap="toDetail(item.luggageNum)">
						<view class="list" >{{ item.luggageNum }}</view>
						<view class="normal">
							{{item.specialType!=null?specialTypeList[item.specialType]:" "}}
						</view>
						<view :class="item.abnormalType!=null?'error':'normal'">
							{{item.abnormalType!=null?item.abnormalName:"正常"}}</view>
						<!-- <view class="down_up" @tap="up"></view> -->
					</view>
				</scroll-view>
				<view class="but" v-if="!action&&listdate2.length>0" @tap="clickOrder">一键处理</view>
			</view>
		</view>
		<!-- 提示信息和下拉弹窗 -->
		<mask-model :headername="headername" :typeShow="typeShow" :tabname="tabname" ref="showMask" btnType="1"
			@confirm="confirm" @next="next" @load="load" @cancel="cancel" titleColoe="#666666" cancelColor="#666666"
			confirmColor="#007AFF" :maskTitle="maskTitle"></mask-model>
		<!-- 一键弹窗 -->
		<mask-model :headername="headername" :typeShow="typeShow" ref="showMask2" btnType="1" @confirm="confirm2"
			@cancel="cancel" titleColoe="#666666" cancelColor="#666666" confirmColor="#007AFF"
			:maskTitle="maskTitle2"></mask-model>
		<!-- 航班开始操作弹窗 -->
		<mask-model :headername="headername" :typeShow="typeShow" ref="showMask3" btnType="1" @confirm="confirm3"
			@cancel="cancel3" titleColoe="#666666" cancelColor="#666666" confirmColor="#007AFF"
			:maskTitle="maskTitle3"></mask-model>
	</view>
</template>

<script>
	import Navs from '../../components/header/navs.vue'
	import maskModel from '../../components/mask-model/mask-model.vue'
	import {
		Format
	} from '@/components/utils/validate'
	export default {
		data() {
			return {
				isShow: true,
				dataheight: '20.75rem',
				scrollTop: 0,
				input: '',
				arr: [],
				navname: '',
				action: true,
				listdate: [],
				listdate1: [],
				loadNumber: 0,
				listdate2: [],
				startData: {
					clientX: 0,
					clientY: 0
				},
				stratvalue: '', //开始位置
				container_ID: '',
				endvalue: '', //结束位置
				maskTitle: '该行李不属于当前航班，请选择处理方式。',
				maskTitle2: "",
				maskTitle3: "",
				tabname: '', //航班名称
				typeShow: true,
				headername: '提示信息',
				flightNO: "null",
				flightDate: null,
				outAirport:null,
				landAirport:null,
				onFlightDate: null,
				flightDetail: {},
				index: 0,
				currentLuggageNum: null,
				pagename: "",
				currentLuggage: null,
				currentIndex: null,
				abnormalList: [{
						"type": null,
						"name": "无"
					},
					{
						"type": "NAL",
						"name": "未授权装载"
					},
					{
						"type": "OFF",
						"name": "已卸载"
					},
					{
						"type": "PFF",
						"name": "预卸载"
					},
					{
						"type": "UNS",
						"name": "未找到"
					},
					{
						"type": "OND",
						"name": "在场未装载，未授权"
					},
					{
						"type": "ONA",
						"name": "在场未装载，已授权"
					}
				],
				oldRfidList: [],
				specialTypeList:{
					"AVIH":"装笼动物",
					"CREW":"机组行李",
					"RFAG":"易碎行李",
					"HVY":"重型行李",
					"PRIO":"优先行李",
					"RUSH":"无人行李",
					"SCON":"急转行李",
					"SPEQ":"运动装备",
					"VIP":"VIP行李",
					"WCHR":"轮椅",
					"WFAP":"武器枪支",
					"SJ05":"到港行李破损",
					"SJ34":"超大柜台接收",
				}
			}
		},
		created(option) {},
		onLoad(option) {
			this.pagename = option.item
			this.flightNO = option.flightNO
			this.flightDate = option.date
			this.outAirport  = option.outAirport 
			this.landAirport  = option.landAirport 
			this.getNode()
			switch (this.pagename) {
				case "SORT":
					this.navname = "分拣"
					break;
				case "LOAD":
					this.navname = "装车"
					break;
				case "INFL":
					this.navname = "装机"
					break;
				case "UNLOAD":
					this.navname = "卸机"
					break;
				case "ARRIVED":
					this.navname = "到达"
					break;
				default:
					break;
			}
			if (this.flightNO != "null" && this.flightNO) {
				this.getFlightData()
			}
			console.log("onLoad")
		},
		onUnload() {
			uni.$off("scancodemsg");
			if(this.$devapi.RFIDIntervalTime!=0){
				this.$devapi.RFIDStopInventory()
				this.$devapi.ISRFIDOPEN = false
			}
		},
		onShow() {
			uni.$on("scancodemsg", (data) => {
				// data.msg = '0089580761'
				if (data.msg.trim().length > 9) {
					this.currentLuggageNum = data.msg.trim()
					this.getluggage(this.currentLuggageNum, true)
				}
				if (data.msg.trim().length < 9) {
					this.container_ID = data.msg.trim()
				}
			});
			uni.$on("scancodeList", (data) => {
				// data.msg = ['0089580818','0089580819','0089580820', '0089580783', '0089580816']
				if (this.flightNO == "null" && data.msg.length > 0) {
					this.currentLuggageNum = data.msg[0].trim()
					this.getluggage(this.currentLuggageNum, true)
					this.$devapi.RFIDStopInventory()
					this.$devapi.ISRFIDOPEN = false
				} else if (this.flightNO && data.msg.length > 0) {
					data.msg.map(item => {
						if (_.findIndex(this.listdate1, function(o) {
								return o.luggageNum == item
							}) < 0) {
							if (item.trim().length > 9) {
								this.currentLuggageNum = item.trim()
								this.getluggage(this.currentLuggageNum, true)
							}
						}
					})
				}
			});
			if (this.$storage.getJson('airport')) {
				this.index = this.$storage.getJson('airport')
			}
			if (this.flightNO != "null" && this.flightNO) {
				this.getFlightData()
			}
			console.log("onShow")
		},
		onHide() {
			uni.$off("scancodemsg");
		},
		mounted() {
			// this.$refs.showMask.show();
			// console.log(this.stratvalue.length)
		},
		computed: {
			getFooterClass() {
				return this.stratvalue ? 'scanning_cds' : 'scanning_cd'
			},
			getlooterClass() {
				return this.currentLuggageNum ? 'scanning_cds' : 'scanning_cd'
			},
			getFooterClasser() {
				return this.container_ID ? 'scanning_cds' : 'scanning_cd'
			},
		},
		components: {
			Navs,
			maskModel: maskModel,
		},
		methods: {
			scan(type) {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (type == "1") {
							that.stratvalue = res.result;
						} else if (type == "2") {
							that.container_ID = res.result;
						} else {
							that.currentLuggageNum = res.result
							that.getluggage(that.currentLuggageNum, true)
						}
					}
				});
			},
			async getNode() {
				let data = {
					"serviceId": 3003,
					"dataContent": {},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						res.returnData.map(item => {
							if (item.nodeCode == this.pagename) {
								this.stratvalue = item.nodeDescribe;
							}
						})
					}
				})
			},
			next(data) {
				this.flightNO = this.currentLuggage.carrierFlights;
				this.flightDate = this.currentLuggage.carrierFlightsDate;
				this.outAirport = this.currentLuggage.outAirport;
				this.landAirport = this.currentLuggage.landAirport;
				this.loadNumber = 0;
				this.getFlightData()
				this.$refs.showMask.hide();
			},
			load() {
				this.currentLuggage.carrierFlights = this.flightNO
				this.currentLuggage.carrierFlightsDate = this.flightDate;
				this.currentLuggage.outAirport = this.outAirport;
				this.currentLuggage.landAirport = this.landAirport;
				let datas = this.setLuggage()
				this.sendData(datas)
			},
			async getFlightData() {
				let data = {
					"serviceId": 3000,
					"page": 1,
					"pageSize": 10,
					"dataContent": [{
						"carrierFlights": this.flightNO
					}],
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0" && res.returnData.length > 0) {
						this.flightDetail = []
						if (this.flightDate && this.flightDate != "null") {
							console.log(this.outAirport)
							console.log(this.landAirport)
							res.returnData.map(item => {
								if (this.flightDate == item.carrierFlightsDate && this.outAirport == item.outAirport&& this.landAirport == item.landAirport) {
									this.flightDetail = item
									this.getluggageList()
								}
							})
						} else {
							this.flightDetail = res.returnData[0]
							this.getluggageList()
						}	
						if (this.flightDetail.scheduleTakeOffTime) {
							this.flightDetail.scheduleTakeOffTime = this.flightDetail.scheduleTakeOffTime
								.split("T")[1]
						} else {
							item.scheduleTakeOffTime = "-"
						}
						if (this.flightDetail.scheduleLandInTime) {
							this.flightDetail.scheduleLandInTime = this.flightDetail.scheduleLandInTime.split(
								"T")[1]
						} else {
							item.scheduleLandInTime = "-"
						}
						
					} else {
						this.$scanAudio.src = "../../static/hqhb.mp3"
						this.$scanAudio.play()
						uni.showToast({
							icon: 'none',
							title: "未查询到" + this.flightNO + "航班信息",
							duration: 5000
						});
					}
				})
			},
			async getluggageList() {
				let data = {
					"serviceId": 3001,
					"page": 1,
					"pageSize": 999,
					"dataContent": {
						"carrierFlights": this.flightDetail.carrierFlights,
						"carrierFlightsDate": this.flightDetail.carrierFlightsDate,
						"outAirport":this.flightDetail.outAirport,
						"landAirport":this.flightDetail.landAirport
					},
					"event": "0"
				}

				await this.$http.httpPost('/openApi/query', data).then(res => {
					this.listdate1 = []
					this.listdate2 = []
					if (res.code == "0") {
						this.listdate = res.returnData;
						res.returnData.map(item => {
							this.abnormalList.map(item2 => {
								if (item.abnormalType == item2.type) {
									item.abnormalName = item2.name
								}
							})
							switch (this.pagename) {
								case "SORT":
									if (item.sorting_time != null) {
										this.listdate1.push(item)
										this.listdate1.sort(this.compareDesc("sorting_time"))
									} else {
										this.listdate2.push(item)
									}
									break;
								case "LOAD":
									if (item.loading_time != null) {
										this.listdate1.push(item)
										this.listdate1.sort(this.compareDesc("loading_time"))
									} else {
										this.listdate2.push(item)
									}
									break;
								case "INFL":
									if (item.installation_time != null) {
										this.listdate1.push(item)
										this.listdate1.sort(this.compareDesc("installation_time"))
									} else {
										this.listdate2.push(item)
									}
									break;
								case "UNLOAD":
									if (item.unloadtime != null) {
										this.listdate1.push(item)
										this.listdate1.sort(this.compareDesc("unloadtime"))
									} else {
										this.listdate2.push(item)
									}
									break;
								case "ARRIVED":
									if (item.arrivedtime != null) {
										this.listdate1.push(item)
										this.listdate1.sort(this.compareDesc("arrivedtime"))
									} else {
										this.listdate2.push(item)
									}
									break;
								default:
									break;
							}
						})
						if (this.loadNumber == 0 && this.currentLuggageNum != null) {
							this.loadNumber = this.listdate1.length;
							let datas = this.setLuggage()
							this.sendData(datas)
						} else {
							this.loadNumber = this.listdate1.length;
						}
					}

				})
			},
			async getluggage(num, isSend) {
				let data = {
					"serviceId": 3002,
					"page": 1,
					"pageSize": 1,
					"dataContent": {
						"luggageNum": num, //行李号
					},
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0" && res.returnData.length > 0) {
						this.currentLuggage = res.returnData[0];
						if (this.flightNO != "null" && this.flightNO && this.flightNO == res.returnData[0]
							.carrierFlights && isSend == true) {
							let datas = this.setLuggage()
							this.sendData(datas)
						} else if (this.flightNO != "null" && this.flightNO && this.flightNO != res.returnData[
								0].carrierFlights) {
							if (this.$storage.get('times') == 1 && this.$storage.get('device') == 1) {
								return
							} else {
								this.tabname = res.returnData[0].carrierFlights
								this.typeShow = true
								this.$refs.showMask.show();
								this.$scanAudio.src = "../../static/qzcz.mp3"
								this.$scanAudio.play()
							}

						} else if (this.flightNO == "null") {
							this.typeShow = false
							this.maskTitle3 = '是否对航班：' + res.returnData[0].carrierFlights + "行李进行" + this
								.navname + "操作？"
							this.headername = '提示'
							this.$refs.showMask3.show();
							this.$scanAudio.src = "../../static/kscz.mp3"
							this.$scanAudio.play()
						}
					} else {
						if(this.$devapi.RFIDIntervalTime!=0){
							this.$devapi.RFIDStopInventory()
							this.$devapi.ISRFIDOPEN = false
						}
						this.$scanAudio.src = "../../static/hqxl.mp3"
						this.$scanAudio.play()
						uni.showToast({
							icon: 'none',
							title: "未查询到" + this.currentLuggageNum + "行李信息",
							duration: 5000
						});
					}
				})
			},
			setLuggage(data) {
				let arr = []
				if (data) {
					data.map(item => {
						item.nodeCode = this.pagename;
						item.nodeName = this.navname;
						item.location_code = this.stratvalue;
						item.container_ID = this.container_ID
						item.loadNumber = this.loadNumber++;
						item.sourceAirport = this.$storage.get('airportName');
						item.ID = null;
						item.dataType = "BPM";
						item.agentNumber = this.$storage.getJson("users").user_name;
						item.device_ID = uni.getDeviceInfo().deviceId;
						arr.push(item)
					})
					return arr
				} else {
					this.currentLuggage.nodeCode = this.pagename;
					this.currentLuggage.nodeName = this.navname;
					this.currentLuggage.location_code = this.stratvalue;
					this.currentLuggage.container_ID = this.container_ID
					this.currentLuggage.loadNumber = this.loadNumber++;
					this.currentLuggage.sourceAirport = this.$storage.get('airportName');
					this.currentLuggage.ID = null;
					this.currentLuggage.dataType = "BPM";
					this.currentLuggage.agentNumber = this.$storage.getJson("users").user_name;
					this.currentLuggage.device_ID = uni.getDeviceInfo().deviceId;
					arr.push(this.currentLuggage)
					return arr
				}

			},
			async sendData(result) {
				let that = this;
				let data = {
					"serviceId": 3005,
					"dataContent": result,
					"event": "0"
				}
				await this.$http.httpPost('/openApi/query', data).then(res => {
					if (res.code == "0") {
						if (result.length > 1) {
							setTimeout(function() {
								uni.showToast({
									icon: 'none',
									title: "操作行李成功",
									duration: 5000
								});
								that.getluggageList()
							}, 3000)
						} else {
							this.getluggageList()
						}
					} else {
						this.$scanAudio.src = "../../static/czsb.mp3"
						this.$scanAudio.play()
						uni.showToast({
							icon: 'none',
							title: "操作失败",
							duration: 5000
						});
					}
				})

			},
			datatime() {
				let dataTime = Format("yyyy-MM-dd hh:mm:ss", new Date());
				return dataTime
			},
			//下拉
			up(item, index) {
				this.currentLuggageNum = item.luggageNum;
				this.getluggage(this.currentLuggageNum, false);
				this.currentIndex = index
				this.typeShow = false
				this.maskTitle = '是否确定要拉下该件行李？'
				this.headername = '拉下提示'
				this.$refs.showMask.show();
				this.$scanAudio.src = "../../static/sflx.mp3"
				this.$scanAudio.play()
			},
			confirm: function(e) { //确定按钮
				this.currentLuggage.abnormalState = "PFF"
				this.currentLuggage.abnormalName = "预卸载"
				let datas = this.setLuggage()
				this.sendData(datas)
			},
			confirm2(e) { //确定一键操作按钮
				uni.showToast({
					icon: 'none',
					title: "操作中",
					duration: 5000
				});
				let data = this.listdate2
				let datas = this.setLuggage(data)
				this.sendData(datas)
			},

			confirm3: function(e) { //确定按钮
				this.flightNO = this.currentLuggage.carrierFlights
				this.flightDate = this.currentLuggage.carrierFlightsDate
				this.landAirport = this.currentLuggage.landAirport
				this.outAirport = this.currentLuggage.outAirport
				this.getFlightData();
				if (this.$devapi.RFIDIntervalTime!=0) {//继续连续操作
					this.$devapi.RFIDStartInventory()
					this.$devapi.ISRFIDOPEN = true
				}
			},
			cancel3: function() { //取消按钮
				this.flightNO = "null"
			},
			cancel: function() { //取消按钮
				console.log('您点击了取消按钮');
			},
			toDetail(num) {
				uni.navigateTo({
					// url: "/pages/detail/index?luggageNum=" + data.msg
					url: "/pages/detail/index?luggageNum=" + num
				})
			},
			clickOrder() {
				this.typeShow = false
				this.maskTitle2 = '是否确定要一键' + this.navname + '全部行李？'
				this.headername = '操作提示'
				this.$refs.showMask2.show();
				this.$scanAudio.src = "../../static/yjzc.mp3"
				this.$scanAudio.play()
			},
			baggageEntry() {
				uni.navigateTo({
					url: "/pages/baggageEntry/index"
				})
			},
			locationEntry() {
				uni.navigateTo({
					url: "/pages/locationEntry/index"
				})
			},
			fall() {
				uni.navigateBack({
					delta: 1
				})
			},
			clicker(e) {
				this.action = !this.action
				if (e != this.action) {
					this.action = e
				}
			},

			compareDesc(propertyName) {
				return function(object1, object2) {
					var value1 = object1[propertyName];
					var value2 = object2[propertyName];
					if (value2 < value1) {
						return -1;
					} else if (value2 > value1) {
						return 1;
					} else {
						return 0;
					}
				}
			},

			movetran(e) {
				let arr = uni.getSystemInfoSync().windowHeight;
				this.dataheight = (e.changedTouches[0].clientY / 16) + 'rem'
				if (e.changedTouches[0].clientY / 16 > 20.75) {
					this.dataheight = 20.75 + 'rem'
				} else if (e.changedTouches[0].clientY / 16 < 7.3125) {
					this.dataheight = 6.3125 + 'rem'
				}
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
			},
			end(e, item) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				if (subX > 50) {
					// console.log('右滑')
					item.types = false
				} else if (subX < -50) {
					item.types = true
					// console.log('左滑')
				}
			},
			checkMore(item) {
				console.log(item)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app-content {
		position: relative;
		background: rgb(49, 85, 99);

		>.content {
			width: 100%;
			height: calc(100vh - 5.375rem);
			position: relative;

			// overflow: hidden;
			// background: rgb(49, 85, 99);
			>.content_top {
				width: 100%;
				// background: rgb(49, 85, 99);
				padding-bottom: 1.3125rem;

				>.craid {
					// width: 100%;
					height: 5.625rem;
					padding: 0 2.5625rem 0 2.5625rem;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: center;

					>.craid_data {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: start;

						>p {
							color: rgb(255, 255, 255);
							font-family: Noto Sans SC;
							font-size: 18px;
							font-weight: 700;
						}

						>span {
							color: rgb(255, 255, 255);
							font-family: Noto Sans SC;
							font-size: 13px;
							font-weight: 500;
						}
					}

					.fight_center {
						width: 3rem;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;
						line-height: 24px;
						font-weight: 700;

						>.aircraft {
							width: 1.75rem;
							height: 1.75rem;
							background: url('../../static/hang.png') no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				>.craids {
					height: 5.625rem;
					padding: 0 2.5625rem 0 2.5625rem;
					display: flex;
					justify-content: center;
					align-items: center;

					>p {
						color: rgb(189, 214, 231);
						font-family: Noto Sans SC;
						font-size: 13px;
						font-weight: 500;
					}
				}

				>.scanning {
					height: 12rem;
					padding: 0 1.5rem 0 1.5rem;
					opacity: 1;
					transition: all 3s;

					.scanning_cd {
						width: 100%;
						height: 3rem;
						opacity: 1;
						transition: all 3s;
						background: rgb(59, 103, 123);
						margin-top: 1rem;
						margin-bottom: .5rem;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/saoma.png') no-repeat;
							background-size: 100% 100%;
							margin-left: 1rem;
						}

						>.log_l {
							width: .125rem;
							height: 1.3125rem;
							margin-left: 4rem;
							background: rgb(255, 255, 255);
						}
					}

					.scanning_cds {
						width: 100%;
						height: 3rem;
						opacity: 1;
						transition: all 3s;
						background: rgb(51, 161, 165);
						margin-top: 1rem;
						margin-bottom: .5rem;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/saoma.png') no-repeat;
							background-size: 100% 100%;
							margin-left: 1rem;
						}

						>.log_l {
							width: .125rem;
							height: 1.3125rem;
							margin-left: 4rem;
							background: rgb(255, 255, 255);
						}
					}
				}
			}

			>.content_bootom {
				width: 100%;
				// height: calc(100vh - 20.9375rem - 4.375rem);
				padding-bottom: 0;
				position: absolute;
				bottom: 0;
				top: 20.75rem;
				border-radius: 6px 6px 0px 0px;
				overflow: hidden;
				background: rgb(255, 255, 255);

				>.choice {
					width: 100%;
					height: 2.5rem;
					display: flex;
					background: rgb(240, 241, 243);

					>.handle {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 15px;
						font-weight: 700;
						border-radius: 6px 6px 0px 0px;
						background: rgb(255, 255, 255);
					}

					>.handles {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 15px;
						font-weight: 700;
					}
				}

				.up {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 1rem;
					border-bottom: 1px solid rgb(238, 238, 238);

					// transform: all 3s;
					>.down_up {
						width: .875rem;
						height: .875rem;
						background: url('../../static/xia.png') no-repeat;
						background-size: 100% 100%;
					}

					>.error {
						width: 20%;
						color: red
					}

					>.normal {
						width: 20%;
						color: #4682b4
					}

					>.list {
						position: relative;
						height: 3rem;
						display: flex;
						align-items: center;
						transform: all 3s;
						right: 0;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 16px;
						font-weight: 500;
					}

					>.delete {
						width: 3.75rem;
						height: 3.75rem;
						background: rgb(237, 101, 101);
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						right: -3.75rem;
						transform: all 3s;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/vector@1x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.ups {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 1rem;
					border-bottom: 1px solid rgb(238, 238, 238);

					// transform: all 3s;
					>.down_up {
						width: .875rem;
						height: .875rem;
						position: relative;
						right: 1.875rem;
						background: url('../../static/xia.png') no-repeat;
						background-size: 100% 100%;
					}

					>.list {
						position: relative;
						height: 3rem;
						display: flex;
						align-items: center;
						transform: all 3s;
						right: 0;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 16px;
						font-weight: 500;
					}

					>.delete {
						width: 3.75rem;
						height: 3.75rem;
						background: rgb(237, 101, 101);
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						right: 1rem;
						transform: all 3s;

						// right: -3.75rem;
						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/vector@1x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.scroll-Y {
					// height: calc(100% - 2.5rem - 2.75rem - 2.25rem - 2.25rem);
					height: calc(100% - 2.5rem - 2.75rem);
				}

				.but {
					width: 20.5625rem;
					height: 2.5rem;
					background: linear-gradient(179.10deg, rgba(51, 161, 165, 1.00) 11.326%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%);
					border-radius: .25rem;
					color: rgb(255, 255, 255);
					font-family: Noto Sans SC;
					font-size: 1rem;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 0.25rem;
					margin-bottom: 2.25rem;
				}
			}
		}
	}
</style>