<template>
	<view class="content">
		<view class="c-top">
			<view class="t-title">接单大厅</view>

			<view class="dis-b" style="margin-top: 16px;">
				<view class="t-left">
					<!-- <view class="touxiang" v-if="userInfo.avatar != ''">

				</view> -->
					<view class="touxiang">
						<image :src="baseImageUrl + uesrInfo.avatar" mode=""></image>
					</view>
					<view>
						<view class="t-zi1">{{uesrInfo.realName || '用户昵称'}}</view>
						<view class="t-biao">{{uesrInfo.avgScore || 5.0}} <uni-icons type="star-filled" size="18"
								color="#fffff"></uni-icons> </view>
					</view>
				</view>
				<view class="t-right">
					<view style="margin-bottom: 10px;">
						<u-switch v-model="checkedindex" @change="getcheckedindex()" color="#1243cb"
							style="transform:scale(0.7)" />
					</view>
					<view class="t-zi2" v-if="checkedindex==false">暂停</view>
					<view class="t-zi2" v-if="checkedindex==true">工作</view>
				</view>
			</view>
			<view class="t-bottom">
				<view class="top-box">
					<view class="t-lan">{{uesrInfo.dqrNum || 0}}</view>
					<view class="t-hui">待确认</view>
				</view>
				<view class="top-box">
					<view class="t-lan">{{uesrInfo.jxNum || 0 }}</view>
					<view class="t-hui">进行中</view>
				</view>
				<view class="top-box" style="border: none;">
					<view class="t-lan">{{uesrInfo.wcNum || 0 }}</view>
					<view class="t-hui">已完成</view>
				</view>
			</view>
		</view>
		<view class="t-ybr">
			<view class="ybr-box" v-for="(item,index) in topdata" :key="index" @click="gettab(index,item.id)">
				<text class="hui-text" :class="{'indexhei' : tabindex == index}">{{item.text}}</text>
				<view class="gang" :class="{'indexlan' : tabindex == index}"></view>
			</view>
		</view>
		<view class="mubu">
			<view class="hui-content">
				<view class="jsy" v-if="singleList.length == 0">
					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
				</view>

				<view class="content-box" v-for="(item,index) in singleList" :key="index">
					<view class="dis-bb">
						<view class="changimg" v-if="item.rescueTypeStr == '拖车' ">
							<image src="../../static/images/tche.png" mode=""></image>
						</view>
						<view class="changimg" v-if="item.rescueTypeStr == '扣车' ">
							<image src="../../static/images/kouche.png" mode=""></image>
						</view>
						<view class="changimg" v-if="item.rescueTypeStr == '送油' ">
							<image src="../../static/images/syou.png" mode=""></image>
						</view>
						<view class="changimg" v-if="item.rescueTypeStr == '搭电' ">
							<image src="../../static/images/ddian.png" mode=""></image>
						</view>
						<view class="changimg" v-if="item.rescueTypeStr == '换胎' ">
							<image src="../../static/images/htai.png" mode=""></image>
						</view>
						<view class="ja-you">{{item.rescuePosition || ''}}</view>
						<view class="anniua" @click="GOdetails(item.id)" v-if="rescueStatus == 5">
							<view class="shiwuimg">
								<image src="../../static/images/cldd.png" mode=""></image>
							</view>
							<text>详情</text>
						</view>
					</view>
					<view class="dix" style="margin: 10px auto;">
						<view class="htzit">
							<view class="shiwuimg">
								<image src="../../static/images/lxr.png" mode=""></image>
							</view>
							<text>联系人：</text>
						</view>
						<text class="xshui">{{item.connectionName || '' }}</text>
					</view>
					<view class="dix" style="margin: 10px auto;">
						<view class="htzit">
							<view class="shiwuimg">
								<image src="../../static/images/cllx.png" mode=""></image>
							</view>
							<text>车辆信息：</text>
						</view>
						<text class="xshui">{{item.carTypeStr||''}} {{item.licenseNum || ''}}</text>
					</view>
					<view class="dix" style="margin: 10px auto;">
						<view class="htzit">
							<view class="shiwuimg">
								<image src="../../static/images/fqsj.png" mode=""></image>
							</view>
							<text>救援时间：</text>
						</view>
						<text class="xshui">{{item.rescueTime || ''}}</text>
					</view>
					<view class="dis-tt" v-if="rescueStatus == 2">
						<view class="inanniu" @click="dialogToggle(item.rescueDriverId)">
							<uni-icons type="checkmarkempty" color="#3CBC6F" size="20"></uni-icons>
							<text>接受</text>
						</view>
						<view class="caanniu" @click="inputDialogToggle(item.rescueDriverId)">
							<uni-icons type="closeempty" color="#e43d33" size="20"></uni-icons>
							<text>拒绝</text>
						</view>
						<view class="anniua" @click="GOdetails(item.id)">
							<view class="shiwuimg">
								<image src="../../static/images/cldd.png" mode=""></image>
							</view>
							<text>查看详情</text>
						</view>
					</view>
					<view class="dis-tt" v-if="rescueStatus == 3">
						<view class="inanniu" @click="diyshow(item.id)">
							<uni-icons type="location" color="#3CBC6F" size="20"></uni-icons>
							<text>记录</text>
						</view>
						<view class="caanniu" v-if="!item.setMoney&&(!item.emptyNum||item.emptyNum==0)"
							@click="diyshow1(item.id)">
							<uni-icons type="wallet" color="#e43d33" size="20"></uni-icons>
							<text>收费</text>
						</view>
						<view class="inanniu" v-if="item.setMoney||(item.emptyNum||item.emptyNum>0)"
							@click="diyshow2(item.id)">
							<uni-icons type="checkmarkempty" color="#3CBC6F" size="20"></uni-icons>
							<text>完成</text>
						</view>
						<view class="anniua" @click="GOdetails(item.id)">
							<view class="shiwuimg">
								<image src="../../static/images/cldd.png" mode=""></image>
							</view>
							<text>查看详情</text>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%; height: 50px;"></view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您是否同意接单"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="拒绝原由" :value="evalue" placeholder="请输入拒绝原由"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<u-popup :show="show" mode="center" :round="10" @close="close2" @open="open">
			<view class="popup-box">
				<view class="p-title">描述</view>
				<!-- <view class="p-hui">已经到达救援现场</view> -->
				<!-- <view class="wrap-du">
						   <view class="wrap-div" v-for="(item,index) in dulist " :key="index">
							 <text>{{item.dictLabel}}</text>
						   </view>
					   </view> -->
				<view class="huinput" @click="gettype">
					<text>类型：</text>
					<text class="tshe">{{ dictLabel}}</text>
				</view>
				<view class="huinput">
					<text>现场情况：</text>
					<u--textarea v-model="remark" placeholder="请输入备注" border="bottom" autoHeight></u--textarea>
				</view>
				<view class="p-title">现场图片</view>
				<view class="huinput">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="5"></u-upload>
				</view>
				<view class="qzanniu" @click="getdaoda()">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="center" :round="10" @close="close" @open="open">
			<view class="popup-box">
				<view class="p-title">金额</view>
				<view class="huinput">
					<u--input type="number " v-model="setMoney" placeholder="请输金额" border="surround"
						clearable></u--input>
				</view>
				<view class="qzanniu" @click="getjine()">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show2" mode="center" :round="10" @close="close1" @open="open">
			<view class="popup-box">
				<view class="p-title" style="width: 100%;text-align: center; margin: 20px auto;">您确认完成吗</view>

				<view class="qzanniu" @click="yesitis()">
					<text>确认</text>
				</view>
			</view>
		</u-popup>
		<u-picker :show="show3" :columns="columns" keyName="label" @cancel="cancels()"
			@confirm="confirms"></u-picker>

		<tabBar :msg="msg "></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	import upload from '@/utils/upload.js'
	import {
		getToken
	} from '@/utils/auth'
	const keepAlivePlugin = uni.requireNativePlugin('Ba-KeepAlive')
	const jyJPush = uni.requireNativePlugin('JY-JPush');
	export default {
		data() {
			return {
				msgSocket: this.$msgSocket,
				id: '',
				value5: '',
				baseUrl: this.$baseUrl,
        baseImageUrl: this.$baseImageUrl,
				fileList1: [],
				uesrInfo: {},
				show: false,
				show1: false,
				show2: false,
				show3: false,
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				msg: '1',
				dictValue: '',
				dictLabel: '请选择类型',
				topdata: [{
						text: '待确认',
						id: 2
					},
					{
						text: '进行中',
						id: 3
					},
					{
						text: '已完成',
						id: 5
					}
				],
				columns: [],
				evalue: '',
				singleList: [],
				images: [],
				remark: '',
				longitude: '',
				latitude: '',
				tabindex: 0,
				rescueId: 0,
				setMoney: '',
				title: 'user',
				checkedindex: false,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				rescueStatus: 2,
				dulist: [],
				nowPageInterval: null,
				keepLive: {
					channelId: 'Ba-KeepAlive',
					channelName: "Ba-KeepAlive",
					title: "蓝安救援司机端正在运行",
					content: "蓝安救援司机端正在运行",
					dataResult: "",
					type: undefined
				}

			}
		},
		onLoad() {

			this.$startSocketConnect(uni.getStorageSync('driverInfo'))
			this.$startMsgSocket(uni.getStorageSync('userId'))
      // #ifdef APP
      this.register()
      this.jyPushStart()
      // #endif
			if (!this.nowPageInterval) {
				this.nowPageInterval = setInterval(() => {
					this.msgSocket = this.$msgSocket
				}, 3000);
			}
			setTimeout(() => {
				this.msgInfo()
			}, 2000);
		},
		watch: {
			msgSocket(newVal, oldVal) {
				this.msgInfo()
			},
			deep: true,
		},
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++
				this.driverRescuePage()
			}
		},
		onShow() {
			this.permissions()
			this.getthreelist()
			this.getStatus()
			this.pageNum = 1
			this.singleList = []
			this.driverRescuePage()
		},
		components: {
			tabBar,
		},
		methods: {
			jyPushStart() {
				//  暂时只有安卓支持
				jyJPush.registerSDKCallBack(sdkCallBack => {
					//  这里会返回regid，
					console.log("sdk Callback 结果 " + JSON.stringify(sdkCallBack));
				})

				// 此处只是演示 授权，实际应该弹出自己的隐私授权页面，或者用uniapp提供的隐私协议
				setTimeout(function() {
					jyJPush.setAuth({
						auth: "1"
					}, res => {
						console.log("auth 结果 " + JSON.stringify(res));
						if (res.errorCode == 0) {
							//  安卓需要单独调用
							if (uni.getSystemInfoSync().platform == 'android') {
								jyJPush.android_init(initRes => {
									console.log("init 结果 " + JSON.stringify(initRes));
									jyJPush.deleteJYJPushAlias({
										//  可以不用传值进去，但是需要配置这项数据
									}, result => {
										jyJPush.setJYJPushAlias({
											userAlias: uni.getStorageSync('userId')
										}, result => {
											//  设置成功或者失败，都会通过这个result回调返回数据；数据格式保持极光返回的安卓/iOS数据一致
											//  注：若没有返回任何数据，考虑是否初始化完成
											console.log('setJYJPushAlias', result);
											jyJPush.getJYJPushAlias({
												//  可以不用传值进去，但是需要配置这项数据
											}, result => {
												console.log(
													'getJYJPushAlias',
													result);
											});


										});
									});

								})
							}
						}
					})
				}, 5000);
			},
			msgInfo() {
				if (this.msgSocket) {

					this.msgSocket.onMessage(res => {
						console.log('触发首页的消息回调');
						this.singleList = []
						this.getthreelist()
						this.driverRescuePage()

					})
				}
			},
			register() { //注册
				console.log(keepAlivePlugin, 'keepAlive');
				keepAlivePlugin.register({
						channelId: this.keepLive.channelId,
						channelName: this.keepLive.channelName,
						title: this.keepLive.title,
						content: this.keepLive.content,
					},
					(res) => {
						console.log('保活注册', res);
					});
			},
			isRunning() { //是否正在运行
				keepAlive.isRunning((res) => {
					console.log('保活服务验证', res);

				});
			},
			restart() { //重启
				keepAlive.restart((res) => {
					console.log('重启保活服务', res);

				})
			},
			driverRescuePage() {
				let data = {
					rescueStatus: this.rescueStatus,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				this.getthreelist()
				request({
					url: '/app/driver/driverRescuePage',
					method: 'get',
					params: data
				}).then((res) => {
					if (res.code == 200) {
						this.singleList = this.singleList.concat(res.rows)
						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);
						console.log('this.singleList', this.singleList);
					}
				})
			},
			gettype() {
				this.columns = []
				this.newrecord()
				this.show3 = true
			},
			confirms(e) {
				this.dictValue = e.value[0].value
				this.dictLabel = e.value[0].label
				// console.log(zhi);

				this.show3 = false
			},
			cancels() {
				this.show3 = false
			},
			newrecord() {
				request({
					url: '/rescue/dict/data/type/rescue_driver_record_type',
					method: 'get',

				}).then((res) => {
					let arr = res.data
					arr.shift();
					this.columns.push(arr)
					console.log(res);
				})

				// request({
				//   url: '/system/dict-data/page?pageNo=1&pageSize=100&dictType=rescue_driver_record_type',
				//   method: 'get'
				// }).then(res => {
				//   console.log('res: ',res);
				//   if (res.data && res.data.list && res.data.list.length > 0) {
				//     const data = res.data.list.map(m => {
				//       return {
				//         dictValue: m.value,
				//         dictLabel: m.label
				//       }
				//     })
				// 		data.shift();
				//     this.columns.push(data)
				//   }
				// })

			},
			open() {

			},
			close2() {
				this.show = false
			},
			close() {
				this.show1 = false
			},
			close1() {
				this.show2 = false
			},
			getdaoda() {
				console.log(this.images);

				if (!this.dictValue) {
					uni.showToast({
						title: '类型不能有空',
						icon: 'none'
					})
					return
				}

				if (!this.images || this.images.length == 0) {
					uni.showToast({
						title: '请上传图片再完成',
						icon: 'none'
					})
					return
				}
				let tempImage = JSON.parse(JSON.stringify(this.images))
				let data = {
					rescueInfoId: this.rescueId,
					title: 1,
					images: tempImage.join(","),
					remark: this.remark,
					type: this.dictValue,

				}
				uni.getLocation({
					isHighAccuracy: true,
					success: (res) => {
						console.log('获取经纬度', res);
						data.lng = res.longitude
						data.lat = res.latitude

					},
					fail: (error) => {},
					complete: (msgdata) => {
						console.log("完成", msgdata);
					}
				});
				console.log("发出请求s");
				request({
					url: '/app/driver/uploadDetailByDriver',
					method: 'post',
					data: data

				}).then((res) => {
					if (res.code == 200) {
						this.images = [],
							this.remark = '',
							this.dictLabel = '请选择类型',
							this.dictValue = '',
							this.fileList1 = [],
							uni.showToast({
								title: '提交成功',
							})
						this.show = false
					}

				})


			},
			diyshow(id) {
				this.rescueId = id
				this.show = true
			},
			diyshow1(id) {
				this.rescueId = id
				this.show1 = true

			},
			diyshow2(id) {
				this.rescueId = id
				this.show2 = true
			},
			yesitis() {
				let data = {
					rescueId: this.rescueId,
				}
				request({
					url: '/app/driver/endRescue',
					method: 'post',
					params: data

				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
						})
						this.singleList = []
						this.driverRescuePage()
						this.show2 = false
					}

				})
			},
			getjine() {
				if (this.setMoney == '') {
					uni.showToast({
						title: '弹窗不能有空',
						icon: 'none'
					})
					return
				}
				let data = {
					rescueId: this.rescueId,
					setMoney: this.setMoney,

				}
				request({
					url: '/app/driver/setOrderMoney',
					method: 'post',
					params: data

				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
						})
						this.singleList = []
						this.driverRescuePage()
						this.show1 = false
					}

				})

			},
			getthreelist() {
				request({
					url: '/app/driver/driverInfoStatistics?driverId=' + uni.getStorageSync(
						'driverInfo'),
					method: 'get',

				}).then((res) => {
					this.uesrInfo = res.data
				})
			},
			getList() {
				request({
					url: '/app/driver/driverRescueList',
					method: 'get',

				}).then((res) => {
					console.log('列表', res);
					this.singleList = res.data
				})
			},
			GOdetails(id) {
				uni.navigateTo({
					url: '/pages/orderDetails/details?id=' + id
				})
			},
			getStatus() {
				request({
					url: '/app/driver/getStatus?driverId=' + uni.getStorageSync('driverInfo'),
					method: 'get',
				}).then((res) => {
					console.log(res);
					if (res.msg == 2) {
						this.checkedindex = false
					} else {
						this.checkedindex = true
					}


				})
			},
			dialogToggle(id) {
				this.id = id
				this.$refs.alertDialog.open()
			},
			inputDialogToggle(id) {
				this.id = id
				this.$refs.inputDialog.open()
			},
			dialogConfirm() {
				let data = {
					rescueDriverId: this.id,
					choose: 1,
				}
				request({
					url: '/app/driver/driverAccept',
					method: 'post',
					params: data
				}).then((res) => {
					console.log(res);
					this.getList()
					this.getthreelist()
				})

			},
			dialogClose() {

				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				console.log(val);
				let data = {
					rescueDriverId: this.id,
					choose: 0,
					rejectReason: val
				}
				request({
					url: '/app/driver/driverAccept',
					method: 'post',
					params: data
				}).then((res) => {
					console.log(res);
					this.getList()
					this.$refs.inputDialog.close()
					this.getthreelist()

				})

			},
			getnaiv() {
				uni.navigateTo({
					url: '/pages/rescue/rescue'
				})
			},
			getcheckedindex() {
				let data = {
					driverId: uni.getStorageSync('driverInfo')
				}
				request({
					url: '/app/driver/updateWork',
					method: 'post',
					params: data
				}).then((res) => {}).finally(() => {
					this.getStatus()
				})
			},
			gettab(index, id) {
				this.pageNum = 1
				this.singleList = []
				this.rescueStatus = id
				this.tabindex = index
				if (index == 0) {
					this.driverRescuePage(2)
				}
				if (index == 1) {
					this.driverRescuePage(3)
				}
				if (index == 2) {
					this.driverRescuePage(5)
				}

			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				upload({
					url: '/infra/file/upload',
					filePath: url,
				}).then((res) => {
					console.log('images', res.data.url);
					this.images.push(res.data.url)
				})

			},


			permissions() {

				// #ifdef APP-PLUS
				if (plus.os.name == 'Android') { // 判断是Android
					console.log('1212');
					var main = plus.android.runtimeMainActivity();
					var pkName = main.getPackageName();
					var uid = main.getApplicationInfo().plusGetAttribute("uid");
					var NotificationManagerCompat = plus.android.importClass(
						"android.support.v4.app.NotificationManagerCompat");
					if (NotificationManagerCompat == null) {
						NotificationManagerCompat = plus.android.importClass(
							"androidx.core.app.NotificationManagerCompat");
					}
					console.log(NotificationManagerCompat, 'NotificationManagerCompat');
					console.log('areNotificationsEnabled12');
					var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
					// 未开通‘允许通知’权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置
					console.log(areNotificationsEnabled, 'areNotificationsEnabled');
					if (!areNotificationsEnabled) {
						uni.showModal({
							title: '通知权限开启提醒',
							content: '您还没有开启通知权限，无法接受到消息通知，是否前往设置？',
							success: function(res) {
								if (res.confirm) {
									var Intent = plus.android.importClass('android.content.Intent');
									var Build = plus.android.importClass("android.os.Build");
									//android 8.0引导
									if (Build.VERSION.SDK_INT >= 26) {
										var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
										intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
									} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0
										var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
										intent.putExtra("app_package", pkName);
										intent.putExtra("app_uid", uid);
									} else { //(<21)其他--跳转到该应用管理的详情页
										intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
										var uri = Uri.fromParts("package", mainActivity.getPackageName(),
											null);
										intent.setData(uri);
									}
									// 跳转到该应用的系统通知设置页
									main.startActivity(intent);
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				} else if (plus.os.name == 'iOS') { // 判断是ISO
					var isOn = undefined;
					var types = 0;
					var app = plus.ios.invoke('UIApplication', 'sharedApplication');
					var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
					if (settings) {
						types = settings.plusGetAttribute('types');
						plus.ios.deleteObject(settings);
					} else {
						types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
					}
					plus.ios.deleteObject(app);
					isOn = (0 != types);
					if (isOn == false) {
						uni.showModal({
							title: '通知权限开启提醒',
							content: '您还没有开启通知权限，无法接受到消息通知，是否前往设置？',
							success: function(res) {
								if (res.confirm) {
									var app = plus.ios.invoke('UIApplication', 'sharedApplication');
									var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
									plus.ios.invoke(app, 'openURL:', setting);
									plus.ios.deleteObject(setting);
									plus.ios.deleteObject(app);
								}
							},
						})
					}
				}
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.tshe {
		color: #0D2E8D;
		font-size: 16px;
	}

	.wrap-du {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}

	.wrap-div {
		margin: 5px 10px;
		font-size: 14px;
		box-sizing: border-box;
		padding: 5px;
		// dbackground: #E1E7FB;
		border-radius: 3px 3px 3px 3px;
		opacity: 1;
		border: 1px solid #DDDDDD;
		color: #333333;
	}

	.content {
		box-sizing: border-box;
		padding-top: 40px;
		// background: #F4F4F4;
		width: 100%;
		// height: calc(100vh);
	}

	.dix {
		display: flex;
		align-items: center;
	}

	.htzit {
		display: flex;
		align-items: center;
		font-size: 15px;
		color: #999999;

	}

	.xshui {
		font-size: 15px;
		font-weight: 400;
		color: #333333;
	}

	.changimg {
		width: 58px;
		height: 20px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.shiwuimg {
		width: 15px;
		height: 15px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.inanniu {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #3CBC6F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #3CBC6F;
	}

	.caanniu {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #e43d33;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #e43d33;
	}

	.lanniu {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #3C9CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #3C9CFF;
	}

	.anniua {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		background: #0D2E8D;
		color: #ffffff;
	}

	.dis-bb {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 15px;
		border-bottom: 1px solid #EEEEEE;
	}

	.dis-tt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-top: 15px;
		border-top: 1px solid #EEEEEE;
	}

	.c-top {
		width: 100%;
		height: 150px;
		background: #0D2E8D;
		box-sizing: border-box;
		padding: 15px;
	}

	.t-title {
		font-size: 18px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.dis-b {
		display: flex;
		justify-content: space-between;
	}

	.t-left {
		display: flex;

		.touxiang {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			overflow: hidden;
			// background-color: #E3E3E3;
			border: 1px solid white;
			margin-right: 15px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.t-zi1 {
		font-size: 16px;
		font-weight: bold;
		color: white;
		margin-bottom: 10px;
	}

	.t-biao {
		width: 60px;
		border-radius: 11px 11px 11px 0px;
		background: linear-gradient(90deg, #EE8342 0%, #EA3942 100%);
		color: white;
		text-align: center;
	}

	.t-right {}

	.t-zi2 {
		font-size: 14px;
		font-weight: bold;
		color: white;
		text-align: center;
	}

	.t-bottom {
		// height: 77px;
		background: #FFFFFF;
		box-shadow: 0px 4px 4px 0px rgba(13, 46, 141, 0.15);
		border-radius: 8px;
		margin-top: 10px;
		box-sizing: border-box;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		z-index: 99;
	}

	.top-box {
		width: 33%;
		height: 100%;
		border-right: 1px solid #EEEEEE;
		text-align: center;

	}

	.t-lan {
		font-size: 28px;
		font-weight: bold;
		color: #0D2E8D;
	}

	.t-hui {
		font-size: 14px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.t-ybr {
		width: 100%;
		z-index: -99;
		height: 120px;
		box-sizing: border-box;
		padding-top: 90px;
		display: flex;
		justify-content: space-around;

		// background-color: white;
	}

	.anniu {
		width: 95%;
		height: 44%;
		border-radius: 6px;
		background-color: #0D2E8D;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gang {
		width: 24px;
		height: 4px;
		background: #ffffff;
		border-radius: 4px 4px 4px 4px;
		margin: 2px auto;
	}

	.hui-content {
		width: 100%;
		// height: calc(60vh);
		background-color: #f4f4f4;
		box-sizing: border-box;
		padding: 10px 15px;

	}

	.content-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		// height: 222px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		margin-bottom: 10px;
	}

	.hui-text {
		font-size: 16px;
		font-weight: 400;
		color: #666666;
	}

	.indexhei {
		color: #333333 !important;
		font-weight: bold !important;
	}

	.indexlan {
		background: #0D2E8D !important;
	}

	.mubu {
		width: 100%;
		height: calc(60vh);
		background-color: #f4f4f4;
	}

	.jsy {
		margin: 10px auto;
		width: 90%;

		image {
			width: 100%;
		}
	}

	.ja-you {
		width: 60%;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.popup-box {
		width: 320px;
		box-sizing: border-box;
		padding: 15px;
		background-color: white;
		border-radius: 10px;
	}

	.p-title {
		font-size: 20px;
		color: rgb(26, 26, 26);
		font-weight: bold;
	}

	.p-hui {
		color: rgb(156, 156, 156);
		font-size: 14px;
		margin: 15px auto;
	}

	.p-hei {
		color: rgb(26, 26, 26);
		font-family: 思源黑体;
		font-size: 14px;
	}

	.huinput {
		width: 100%;
		box-sizing: border-box;
		// padding: 10px;
		// background: rgb(246, 246, 246);
		display: flex;
		align-items: center;
		border-radius: 8px;
		margin: 15px auto;
	}

	.qzanniu {
		width: 100%;
		height: 40px;
		border-radius: 6px;
		// background: linear-gradient(270.00deg, rgb(3, 163, 128) 0.028%,rgb(0, 204, 126) 100%);
		background: #0D2E8D !important;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(255, 255, 255);
		font-size: 16px;
		font-weight: 700;
	}
</style>
