<template>
	<view style="width: 100%;height: 100%;">
		<!--医院列表 -->
		<u-select v-model="hospitalListShow" :list="hospitalList" @confirm="setSelectHospital"></u-select>
		<u-select v-model="timeShow" mode="mutil-column-auto" :list="timeList" @confirm="yearConfirm" :default-value="defaultIndex"></u-select>
		<!--日视图弹出层-->
		<u-popup v-model="popupShow" mode="bottom" border-radius="50" @close="closePopup">
			<!-- <view style="margin: 20rpx 0;" class="flex justify-center align-center">
				<u-icon name="arrow-down" @click="close()"></u-icon>
			</view> -->
			<!-- 标题按钮 -->
			<view class="flex justify-center align-center" style="padding: 30rpx 0;font-size: 38rpx;font-weight: bold;">
				<text style="flex-grow: 1;text-align: center;">{{day}}日排班详情</text>
			</view>
			<view v-if="monthList[day+empty-1].mon==0&&monthList[day+empty-1].aft==0&&monthList[day+empty-1].nig==0" style="height: 500rpx;"
			 class="flex justify-center align-center">
				<view style="width: 80%;">
					<u-button shape="circle" :custom-style="otherStyle" @click="modify(0)">暂无排班 点击新增</u-button>
				</view>
			</view>
			<!-- 上下晚显示 -->
			<view class="flex justify-center align-center" style="" v-else>
				<view style="width: 80%;margin: 20rpx 0;text-align: center;font-size: 38rpx;">
					<view :class="monthList[day+empty-1].mon==0 ? 'nullStyle' : monthList[day+empty-1].mon==1 ? 'monStyle' :'otherStyle' "
					 @click="modify(1)">上午</view>
					<text>{{hospitalTimes.zao.amStartTime}} 至 {{hospitalTimes.zao.amEndTime}}</text>
					<view :class="monthList[day+empty-1].aft==0 ? 'nullStyle' : monthList[day+empty-1].aft==1 ? 'aftStyle' :'otherStyle' "
					 @click="modify(2)">下午</view>
					<text>{{hospitalTimes.zhong.pmStartTime}} 至 {{hospitalTimes.zhong.pmEndTime}}</text>
					<view :class="monthList[day+empty-1].nig==0 ? 'nullStyle' : monthList[day+empty-1].nig==1 ? 'nigStyle' :'otherStyle' "
					 @click="modify(3)">晚上</view>
					<text>{{hospitalTimes.wan.nightStartTime}} 至 {{hospitalTimes.wan.nightEndTime}}</text>
				</view>
			</view>
			<view style="height: 100rpx;background-color: #007AFF;color: #FFF;font-size: 36rpx;" class="flex justify-center align-center"
			 @click="close()">
				保 存
			</view>
		</u-popup>
		<!-- 顶部标题和按钮 -->
		<view class="flex justify-between align-center" style="margin: 40rpx 28rpx;">
			<view style="flex-grow: 2;" class="drop-down" @click="timeShow=true ">
				<text>{{year}}年{{month+1}}月</text>
				<u-icon name="arrow-down-fill" size="32" color="#848484" v-show="!timeShow"></u-icon>
				<u-icon name="arrow-up-fill" size="32" color="#848484" v-show="timeShow"></u-icon>
			</view>
			<view class="flex justify-around align-center" style="flex-grow: 3;">
				<view class="drop-down" @click="hospitalListShow=!hospitalListShow">
					<text>{{hospital}}</text>
					<u-icon name="arrow-down-fill" size="32" color="#848484" v-show="!hospitalListShow"></u-icon>
					<u-icon name="arrow-up-fill" size="32" color="#848484" v-show="hospitalListShow"></u-icon>
				</view>
				<view style="background-color: #5555ff; padding: 8rpx;border-radius: 5rpx;">
					<u-icon name="list-dot" size="38" color="#fff" @click="jumpWeek"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<!-- 一排星期 -->
			<view class="flex justify-around align-center" style="height: 80rpx;background-color: #CCE6FF;">
				<text v-for="item,index in weekList" :key="index" style="font-size: 28rpx;">{{item.text}}</text>
			</view>
			<view class="flex flex-wrap ">
				<view class="" style="width: 14%;padding: 0 0 20rpx 0;font-size: 32rpx;font-weight: 590;height: auto;font-weight: bold;"
				 v-for="item,index in monthList" :key="index" @click="setDay(index,item.text)">
					<view class="flex justify-center align-center" :style="!item.select?
							'height: 100rpx;width: 100rpx;border-radius:50%;font-weight: bold;'
							:'height: 100rpx;width: 100rpx;border-radius:50%;background:#00aaff;color:#fff;font-weight: bold;'">{{item.text}}</view>
					<!-- 排班情况 -->
					<view style="color: #FFF;text-align: center;font-size: 28rpx;">
						<view :style="item.mon > 0?'opacity:1.0':'opacity:0.0'">
							<view :style="item.mon==1?
							'margin: 5rpx 10rpx;background:#00aaff;border-radius: 50rpx;font-size: 20rpx;padding:6rpx 0;'
							:'margin: 5rpx 10rpx;background:#cccccc;border-radius: 50rpx;font-size: 20rpx;padding:6rpx 0'">上午</view>
						</view>
						<view :style="item.aft > 0?'opacity:1.0':'opacity:0.0'">
							<view :style="item.aft==1?
							'margin: 5rpx 10rpx;background:#ffaa00;border-radius: 50rpx;font-size: 20rpx;padding:6rpx 0;'
							:'margin: 5rpx 10rpx;background:#cccccc;border-radius: 50rpx;font-size: 20rpx;padding:6rpx 0'">下午</view>
						</view>
						<view :style="item.nig > 0?'opacity:1.0':'opacity:0.0'">
							<view :style="item.nig==1?
							'margin: 5rpx 10rpx;background:#55aa00;border-radius: 50rpx;font-size: 20rpx;padding:6rpx 0;'
							:'margin: 5rpx 10rpx;background:#cccccc;border-radius: 50rpx;font-size: 20rpx;padding:6rpx 0'">晚上</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 	  <view class="bottomButton" @click="paiban">
		   保存
		  </view> -->
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.$nextTick(function() {
				// this.getListTime()
				this.getHostail()
				this.getNowTime()
				this.getMonthList();
				// this.getMonthList();
				// this.getNowmonth()
				console.log("排班数据", this.schedulingList)
			})
		},
		onShow() {
			this.defaultIndex = [0, 0]
			this.getNowTime()
			if (this.refresh) {
				this.monthList.splice(0, this.monthList.length);
				this.schedulingList.splice(0, this.schedulingList.length);
				this.$nextTick(function() {
					this.getHostail()
					this.getMonthList();
				})
				this.refresh = false
			}

		},
		data() {
			return {
				//保存医院下标
				defaultIndex: [0, 0],

				refresh: false,
				timeShow: false,
				timeList: [],
				year: 0, //年
				month: 0, //月
				day: 0, //日
				empty: 0, // 一号前面有几个空
				load: false, //控制加载，从年视图返回执行onshow
				popupShow: false, //控制弹窗弹出层
				weekList: [{
					text: "日"
				}, {
					text: "一"
				}, {
					text: "二"
				}, {
					text: "三"
				}, {
					text: "四"
				}, {
					text: "五"
				}, {
					text: "六"
				}],
				monthList: [], //这个月的数据,不要动

				hospital: "", //现在选中的医院
				hospitalID: "1", //选中的医院ID
				hospitalListShow: false, //控制医院选择器
				hospitalTimes: 0,
				// 医院列表
				hospitalList: [],
				saveDayType: {
					mon: 0,
					aft: 0,
					nig: 0
				},
				// 一个月的排班数据 从一号开始
				//下标0为一号,值为医院ID
				// 没有排班记录为0
				schedulingList: [],

				mothonStart: '',
				mothonEnd: '',
				// 弹出层数据
				//空按钮样式
				nullStyle: {
					backgroundColor: '#FFF',
					color: '#000',
					fontWeight: "bold",
					margin: '20rpx 0 10rpx 0'
				},
				saveDay: 0,
			}
		},
		methods: {
			closePopup() {
				this.saveDayType.mon = 0
				this.saveDayType.aft = 0
				this.saveDayType.nig = 0
			},

			close: async function() {
				this.popupShow = false;
				let SaveLists = [];
				let SaveDate = JSON.parse(JSON.stringify(this.saveDay));
				console.log('修改数据：', this.saveDayType)
				console.log(this.saveDay)
				if (this.saveDay != 0) {
					if (this.hospitalID != 0) {
						// if (this.saveDayType.mon == this.hospitalID) {
						// 	SaveLists.push(1)
						// } else if (this.saveDayType.mon == 0) {
						// 	SaveLists.push(0)
						// }
						// if (this.saveDayType.aft == this.hospitalID) {
						// 	SaveLists.push(2)
						// } else if (this.saveDayType.aft == 0) {
						// 	SaveLists.push(0)
						// }
						// if (this.saveDayType.nig == this.hospitalID) {
						// 	SaveLists.push(3)
						// } else if (this.saveDayType.nig == 0) {
						// 	SaveLists.push(0)
						// }

						// if (SaveLists.length != 0) {
						if (this.saveDayType.length != 0) {

							// let s = SaveLists.join(",");
							let s = this.saveDayType;
							if (typeof s == 'object') {
								s = JSON.stringify(s);
							}
							let tj = {
								'schedule_date': SaveDate.date,
								'week': SaveDate.week,
								'type': s,
								'organization_id': this.hospitalID,
							}


							let res = await this.$request.post("doctor/saveDay", tj);
							if (res.status == 0) {
								uni.showToast({
									title: "修改成功！",
								})
								SaveLists = [];
								this.saveDay = 0;
								SaveDate = 0;

							}

						}

					} else {
						uni.showModal({
							title: '请选择医院'
						})
					}
				}
			},

			/**
			 * 获取接口医院
			 * 渲染颜色
			 * */
			getHostail: async function() {
				let res = await this.$request.post("doctor/organizationList");
				if (res.status == 0) {
					let data = res.data;
					let newList = [];
					if (data.length == 0) {
						uni.showModal({
							title: '请先认证医院',
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: "/pages/login/doctorRenzheng"
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}

							}
						})
					} else {
						for (let i = 0; i < data.length; i++) {
							newList.push({
								value: data[i].value,
								label: data[i].label,
							})
						}
					}
					console.log('机构获取，', res);
					this.hospitalList = newList;
					this.getListTime(this.hospitalList[0].value)
					this.hospital = this.hospitalList[0].label
					this.hospitalID = this.hospitalList[0].value + ""
					// let day = new Date();
					// let a = day.getDate()
					// for (let x = 0; x < this.monthList.length - this.empty; x++) {
					// 	this.monthList[x + this.empty].mon = this.schedulingList[x].mon == "0" ? 0 : this.schedulingList[x].mon == this.hospitalID &&
					// 		this.overdue(x) ?
					// 		1 : 2
					// 	this.monthList[x + this.empty].aft = this.schedulingList[x].aft == "0" ? 0 : this.schedulingList[x].aft == this.hospitalID &&
					// 		this.overdue(x) ?
					// 		1 : 2
					// 	this.monthList[x + this.empty].nig = this.schedulingList[x].nig == "0" ? 0 : this.schedulingList[x].nig == this.hospitalID &&
					// 		this.overdue(x) ?
					// 		1 : 2
					// }

					// for (let x = 0; x < this.monthList.length - this.empty - a; x++) {
					// 	this.monthList[x + this.empty - a].mon = this.schedulingList[x - a].mon == "0" ? 0 : 2
					// 	this.monthList[x + this.empty - a].aft = this.schedulingList[x - a].aft == "0" ? 0 : 2
					// 	this.monthList[x + this.empty - a].nig = this.schedulingList[x - a].nig == "0" ? 0 : 2
					// }
				}
			},


			/**
			 * 判断时间  过去显示灰
			 * */
			overdue(day) {
				let date = new Date();
				if (this.year == date.getFullYear() && this.month == date.getMonth() && day + 1 <= date.getDate()) {
					return false
				} else {
					return true
				}

			},


			getMonthList: async function() {
				console.log("请求数据", this.mothonStart, this.mothonEnd)
				let res = await this.$request.post("doctor/monthDetail", {
					'start_day': this.mothonStart,
					'end_day': this.mothonEnd
				});
				console.log("收到数据", res)
				if (res.status == 0) {
					let data = res.data;
					let newList = [];
					let date = new Date()
					date.setFullYear(this.year, this.month + 1, 0);
					console.log('请求数据的接口,需要查看这个月有几天', date.getDate())
					for (let i = 0,j = 0; i < date.getDate(); i++) {
						// console.log("数组长度",data.length ,"i",i,"j",j,data[j].schedule_date.substr(-2))
						if (data.length > j) {
							if (data[j].schedule_date.substr(-2) == i + 1) {
								this.schedulingList.push({
									mon: data[j].ident.zao,
									aft: data[j].ident.xia,
									nig: data[j].ident.wan
								})
								j++
								
							} else {
								this.schedulingList.push({
									mon: 0,
									aft: 0,
									nig: 0
								})
							}
						} else {
							this.schedulingList.push({
								mon: 0,
								aft: 0,
								nig: 0
							})
						}

					}
					console.log("渲染后的数组",this.schedulingList)
					this.getNowmonth() //渲染方法
				} else {
					uni.showModal({
						title: '请求错误'
					})
				}
			},
			/**
			 * 获取现在的日期
			 * */
			getNowTime() {
				var d = new Date();
				this.year = d.getFullYear()
				this.month = d.getMonth()
				this.day = d.getDate()
				this.mothonStart = this.year + '-' + (this.month + 1) + '-' + '01'
				d.setFullYear(this.year, this.month + 1, 0);
				this.mothonEnd = this.year + '-' + (this.month + 1) + '-' + d.getDate()

				let yearList = [] //一年的月份
				for (let x = 1; x < 13; x++) {
					yearList.push({
						label: x + "月",
						value: x,
						extra: x - 1
					})
				}
				this.timeList.splice(0, this.timeList.length)
				for (let x = 0; x < 3; x++) {
					this.timeList.push({
						label: (this.year + x) + "年",
						value: this.year + x,
						extra: x,
						children: yearList.slice(0)
					})
				}
				this.timeList[0].children.splice(0, d.getMonth()) //删除之前的月份
			},
			/**
			 * 拿到一个月的数据
			 * */
			getNowmonth() {
				let oneDayTime = 24 * 60 * 60 * 1000; //固定数据 一天的时长
				var date = new Date()
				this.day = date.getDate()
				date.setFullYear(this.year, this.month, 1); //这个月的一号
				for (let b = 0; b < date.getDay(); b++) {
					this.monthList.push({
						text: "",
						select: false
					})
				}
				this.empty = date.getDay()

				date.setFullYear(this.year, this.month + 1, 0); //查看这个月有几天
				//接口用到的开始时间和结束时间
				this.mothonStart = this.year + '-' + (this.month + 1) + '-' + '01'
				this.mothonEnd = this.year + '-' + (this.month + 1) + '-' + date.getDate()

				for (let c = 0; c < date.getDate(); c++) {
					let months = (this.month + 1);
					if (months < 10) {
						months = "0" + months;
					}
					let days = (c + 1);
					if (days < 10) {
						days = "0" + days;
					}
					this.monthList.push({
						text: c + 1,
						date: this.year + '-' + months + '-' + days,
						week: this.getWeekList(this.year + '-' + months + '-' + days),
						select: false,
						//判断方法，通过判断是不是选中的医院ID
						//0没有排班，1有排班，2有排班，但不是这个医院
						mon: this.schedulingList[c].mon == "0" ? 0 : this.schedulingList[c].mon == this.hospitalID && this.overdue(c) ?
							1 : 2,
						aft: this.schedulingList[c].aft == "0" ? 0 : this.schedulingList[c].aft == this.hospitalID && this.overdue(c) ?
							1 : 2,
						nig: this.schedulingList[c].nig == "0" ? 0 : this.schedulingList[c].nig == this.hospitalID && this.overdue(c) ?
							1 : 2
					})

				}
				console.log(this.monthList)

			},

			getWeekList(strs) {;
				var weekDay = [7, 1, 2, 3, 4, 5, 6];
				let times = strs.replace(/-/g, '/');
				var myDate = new Date(Date.parse(times));
				return weekDay[myDate.getDay()];
			},

			getimePate(str) {
				var date = new Date(str.replace(/-/g, '/'));
				return Date.parse(date);
			},

			getListTime: async function(org_id) {
				let res = await this.$request.post('doctor/getOrgTimes', {
					org_id: org_id
				});
				let newLists = [];
				if (res.status == 0) {
					if (res.data.length == 0) {
						uni.showModal({
							title: '请先去设置排班',
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: "/pages/service/more"
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}

							}
						})
						return false;
					} else {
						this.hospitalTimes = res.data;

						console.log('时间：', this.hospitalTimes)
					}
				}
			},
			/**
			 * 切换医院
			 * */
			setSelectHospital(e) {
				this.getListTime(e[0].value)
				this.hospital = e[0].label
				this.hospitalID = e[0].value + ""
				console.log('月份：', this.monthList);
				for (let x = 0; x < this.monthList.length - this.empty; x++) {
					this.monthList[x + this.empty].mon = this.schedulingList[x].mon == "0" ? 0 : this.schedulingList[x].mon == this
						.hospitalID && this.overdue(x) ?
						1 : 2
					this.monthList[x + this.empty].aft = this.schedulingList[x].aft == "0" ? 0 : this.schedulingList[x].aft == this
						.hospitalID && this.overdue(x) ?
						1 : 2
					this.monthList[x + this.empty].nig = this.schedulingList[x].nig == "0" ? 0 : this.schedulingList[x].nig == this
						.hospitalID && this.overdue(x) ?
						1 : 2
				}
			},
			/**
			 * 点击对应日期
			 * */
			setDay(index, text) {
				// 获取当前日期
				var date = new Date();
				// 获取当前月份
				var nowMonth = date.getMonth() + 1;
				// 获取当前是几号
				var strDate = date.getDate();
				// 添加分隔符“-”
				var seperator = "-";
				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				var nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate
				if (this.getimePate(nowDate) >= this.getimePate(this.monthList[index].date)) {
					uni.showModal({
						title: '只能修改今天之后的数据！'
					})
					return false;
				}
				if (index >= this.empty) {
					this.monthList.map(val => {
						val.select = false
					})
					this.saveDayType.mon = this.schedulingList[index - this.empty].mon;
					this.saveDayType.aft = this.schedulingList[index - this.empty].aft;
					this.saveDayType.nig = this.schedulingList[index - this.empty].nig;
					this.monthList[index].select = true
					this.day = text
					this.popupShow = true
				}

			},

			/**
			 * 跳转到年视图
			 * */
			jumpYear() {
				setTimeout(function() {
					uni.navigateTo({
						url: "year_Scheduling"
					})
				}, 300)
			},
			/**
			 * 确认选择年月
			 * */
			yearConfirm(e) {
				console.log("选择了年月", e)
				this.defaultIndex[0] = e[0].extra
				this.defaultIndex[1] = e[1].extra

				this.year = e[0].value
				this.month = e[1].value - 1
				let d = new Date();
				this.mothonStart = this.year + '-' + (this.month + 1) + '-' + '01'
				d.setFullYear(this.year, this.month + 1, 0);
				this.mothonEnd = this.year + '-' + (this.month + 1) + '-' + d.getDate()
				this.monthList.splice(0, this.monthList.length);
				this.schedulingList.splice(0, this.schedulingList.length);
				this.$nextTick(function() {
					this.getHostail()
					this.getMonthList();
					this.day = 0
				})

			},
			/**
			 * 日视图按钮点击
			 * id 1早上 2下午 3晚上
			 * */
			modify(id) {
				this.saveDay = this.monthList[this.day + this.empty - 1];
				if (id == 0) {
					this.monthList[this.day + this.empty - 1].mon = 1 //
					this.schedulingList[this.day - 1].mon = this.hospitalID
					this.saveDayType.mon = this.hospitalID;

					this.monthList[this.day + this.empty - 1].aft = 1 //
					this.schedulingList[this.day - 1].aft = this.hospitalID
					this.saveDayType.aft = this.hospitalID;

					this.monthList[this.day + this.empty - 1].nig = 1 //
					this.schedulingList[this.day - 1].nig = this.hospitalID
					this.saveDayType.nig = this.hospitalID;
				} else {
					switch (id) {
						case 1:
							if (this.monthList[this.day + this.empty - 1].mon == 1) { //当这个按钮状态为1 选择了医院且是当前医院
								this.monthList[this.day + this.empty - 1].mon = 0 //就取消选择
								this.schedulingList[this.day - 1].mon = 0
								this.saveDayType.mon = 0;
							} else if (this.monthList[this.day + this.empty - 1].mon == 0) {
								this.monthList[this.day + this.empty - 1].mon = 1 //
								this.schedulingList[this.day - 1].mon = this.hospitalID
								this.saveDayType.mon = this.hospitalID;
							}
							break;
						case 2:
							if (this.monthList[this.day + this.empty - 1].aft == 1) { //当这个按钮状态为1 选择了医院且是当前医院
								this.monthList[this.day + this.empty - 1].aft = 0 //就取消选择
								this.schedulingList[this.day - 1].aft = 0
								this.saveDayType.aft = 0;
							} else if (this.monthList[this.day + this.empty - 1].aft == 0) {
								this.monthList[this.day + this.empty - 1].aft = 1 //
								this.schedulingList[this.day - 1].aft = this.hospitalID
								this.saveDayType.aft = this.hospitalID;
							}
							break;
						case 3:
							if (this.monthList[this.day + this.empty - 1].nig == 1) { //当这个按钮状态为1 选择了医院且是当前医院
								this.monthList[this.day + this.empty - 1].nig = 0 //就取消选择
								this.schedulingList[this.day - 1].nig = 0
								this.saveDayType.nig = 0;
							} else if (this.monthList[this.day + this.empty - 1].nig == 0) {
								this.monthList[this.day + this.empty - 1].nig = 1 //
								this.schedulingList[this.day - 1].nig = this.hospitalID
								this.saveDayType.nig = this.hospitalID;
							}
							break;
					}
					// this.saveDay = this.monthList[this.day + this.empty - 1];
					console.log('选择的日期：', this.monthList[this.day + this.empty - 1]);
					console.log('ID：', id);
					// this.$forceUpdate();
				}
			},
			/**
			 * 跳转周视图
			 * */
			jumpWeek() {
				uni.navigateTo({
					url: 'week_Scheduling'
				})
			},
		}
	}
</script>

<style>
	/* 下拉按钮 */
	.drop-down {
		border: 1rpx solid #AAAAAA;
		font-size: 32rpx;
		flex-grow: 1;
		margin-right: 30rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 15rpx;
	}

	/* //空按钮样式 */
	.nullStyle {
		text-align: center;
		padding: 10rpx 0;
		border: 0.3rpx solid #909399;
		background-color: #FFF;
		border-radius: 30rpx;
		color: #000;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
	}

	,
	/* //上午按钮样式 */
	.monStyle {
		text-align: center;
		padding: 10rpx 0;
		border: 0.3rpx solid #5667c8;
		background-color: #5667c8;
		border-radius: 30rpx;
		color: #fff;
		fontWeight: bold;
		margin: 20rpx 0 10rpx 0;
	}

	,
	/* //下午按钮样式 */
	.aftStyle {
		text-align: center;
		padding: 10rpx 0;
		color: #FFF;
		border-radius: 30rpx;
		border: 0.3rpx solid #ec9d75;
		background-color: #ec9d75;
		color: #fff;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
	}

	,
	/* //晚上按钮样式 */
	.nigStyle {
		text-align: center;
		padding: 10rpx 0;
		border: 0.3rpx solid #55aa7f;
		background-color: #55aa7f;
		color: #fff;
		border-radius: 30rpx;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
	}

	,
	/* //其他医院按钮样式 */
	.otherStyle {
		text-align: center;
		padding: 10rpx 0;
		border: 0.3rpx solid #989898;
		background-color: #989898;
		border-radius: 30rpx;
		color: #fff;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
	}
</style>
