<template>
	<view class="page-container" style="background-color: $divider-color;">
		<view class="content-box">
			<view class="upload-img-box">
				<!-- <mp-uploader max-count="1" delete="true" select="{{selectFile}}" upload="{{uploadFile}}" bind:delete="deleteImage" files="{{files}}" title=""></mp-uploader> -->
			</view>

			<view class="content-container">
				<view class="info-title">软著信息</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label star">软著名称</text>
						<view class="select-content-item">
							<input :class="['value',rightName != '' ? 'v-select':'']" placeholder="请输入软著名称"
								style="flex:1;align-self: center;" :value="rightName" @input="inputRightName" />
							<view @click="doClearRightName" v-if="rightName.length>0" class="icon-clear-line size-32">
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">软著分类</text>
						<view class="select-content-no-h">
							<view class="select-item-box" @click="onShowRightType">
								<view v-if="selRightType.length<=0" class="value-hint">请选择软著分类</view>
								<block v-else>
									<block v-for="(item,index) in selRightType" :key="index">
										<view class="select-item-item">
											<text>{{item.dataName}}</text>
										</view>
									</block>
								</block>
							</view>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selRightType.length>0" @click="clearRightType"
									class="icon-clear-line size-32"></view>
								<view v-if="selRightType.length<=0" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">售卖价格</text>
						<view class="select-content-item">
							<input :class="['value', rightPrice != 0 ? 'v-select':'']" type="number" placeholder="请输入售价"
								style="flex:1;align-self: center;" :value="rightPrice" @input="inputRightPrice" />
							<view @click="doClearPrice" v-if="rightPrice != 0" class="icon-clear-line size-32">
							</view>
						</view>
					</view>
					<view class="item">
						<view class="label star">截止售卖日期</view>
						<view class="select-content-item" style="align-items: center;">
							<picker mode="date" style="flex:1;" :value="rightStopDate" :start="curStartDate"
								end="2050-01-01" @change="bindDateChange">
								<view :class="['select-time', rightStopDate ==''? 'value-hint':'']">
									{{rightStopDate != ''? rightStopDate:'请选择截止售卖日期'}}
								</view>
							</picker>
							<view style="display: flex;flex-direction: row;">
								<view v-if="rightStopDate !=''" @click="clearTime" class="icon-clear-line size-32">
								</view>
								<view v-if="rightStopDate==''" class="icon-calendar-ind size-32"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="info-title">著作权人信息</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label star">类别</text>
						<view class="select-content-item">
							<picker mode="selector" style="flex:1;" :range="personType" range-key="dataName"
								@change="bindChangePersonType">
								<view :class="['select-time',selPersonType ==null? 'value-hint':'']">
									{{selPersonType != null? selPersonType.dataName:'请选择类别'}}
								</view>
							</picker>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selPersonType !=null" @click="clearPersonType"
									class="icon-clear-line size-32"></view>
								<view v-if="selPersonType==null" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">姓名或机构名称</text>
						<view class="select-content-item">
							<input :class="['value',orgName != '' ? 'v-select':'']" placeholder="请输入姓名或机构名称"
								style="flex:1;align-self: center;" :value="orgName" @input="inputOrgName" />
						</view>
					</view>
					<view class="item">
						<text class="label star">省市</text>
						<view class="select-content-item">
							<view @click="onShowArea" :class="['select-time',selArea ==null? 'value-hint':'']">
								{{selArea != null && selCity != null ? selArea.areaName+'/'+selCity.areaName:'请选择所在省市'}}
							</view>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selArea !=null" @click="clearArea" class="icon-clear-line size-32">
								</view>
								<view v-if="selArea==null" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">联系电话</text>
						<view class="select-content-item">
							<input :class="['value',orgPhone != '' ? 'v-select':'']" placeholder="请输入联系电话"
								style="flex:1;align-self: center;" :value="orgPhone" @input="inputOrgPhone" />
							<view v-if="orgPhone.length>0" @click="doClearPhone" class="icon-clear-line size-32">
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">证件类型</text>
						<view class="select-content-item">
							<picker mode="selector" style="flex:1;" :range="creType" range-key="dataName"
								@change="bindChangeCreType">
								<view :class="['select-time',selCreType ==null? 'value-hint':'']">
									{{selCreType != null? selCreType.dataName:'请选择证件类型'}}
								</view>
							</picker>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selCreType !=null" @click="clearCreType" class="icon-clear-line size-32">
								</view>
								<view v-if="selCreType==null" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">证件号码</text>
						<view class="select-content-item" style="border-bottom: none;">
							<input :class="['value',cardNumber != '' ? 'v-select':'']" placeholder="请输入证件号码"
								style="flex:1;align-self: center;" :value="cardNumber" @input="inputCardNumber" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer">
			<view class="bottom-btn-blue" @click="doSave">保存</view>
		</view>
	</view>
</template>

<script>
	import Shop from '@/common/js/net/shop.js'
	import {
		upShopImgUrl,
		sImgPrefix
	} from '@/common/js/net/mainUrl.js'
	import {
		isValidPhone
	} from '../../../common/js/validator.js'
	import {
		get
	} from '@/common/js/cache/storage.js'
	import {
		currentDate
	} from '@/common/js/util.js'
	export default {
		setup() {},
		data() {
			return {
				curStartDate: currentDate(),
				personType: [{
					dataName: '自然人',
					dataId: '1'
				}, {
					dataName: '法人',
					dataId: '2'
				}, {
					dataName: '非法人组织或其他',
					dataId: '3'
				}],
				selPersonType: null,
				creType: [],
				rightType: [],
				areaList: [], //省
				cityList: [], //市
				rightName: '', //软著名称
				orgName: '', //著作权人姓名
				orgPhone: '', //联系电话
				cardNumber: '', //证件号码
				selRightType: [], //选中分类
				rightPrice: '', //售价
				rightStopDate: '', //停止日期
				selCreType: null, //选中证件类型
				showArea: false,
				prevValue: [0, 0], // 用于存储上一次的值
				selArea: null,
				selCity: null,
				msgHint: '',
				msgType: 'info',
				msgShow: false,
				files: [],
				showType: false,
				goodsId: '',
				goods: null,
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "发布商品",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.selPersonType = this.personType[0]
			var id = options.id
			if (id && id != '') {
				this.goodsId = id
				this.doGetGoodsDetail()
			} else {
				this.getDic()
			}
		},
		methods: {
			//获取商品详情
			doGetGoodsDetail: function() {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this
				Shop.doGetGoodsDetail(that.goodsId)
					.then(function(res) {
						uni.hideLoading()
						var tempFile = [{
							fileId: res.goodsLocalPhoto,
							fileName: 'image',
							fileSize: 0,
							fileUrl: sImgPrefix + res.goodsLocalPhoto,
							url: sImgPrefix + res.goodsLocalPhoto
						}]
						that.rightName = res.goodsName
						that.rightPrice = res.goodsPrice
						that.rightStopDate = res.goodsLastTime
						that.orgName = res.goodsLeader
						that.orgPhone = res.goodsLeaderPhone
						that.cardNumber = res.goodsLeaderIdcard
						that.files = tempFile
						that.goods = res
						that.getDic()
					})
					.catch(function(err) {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					})
			},
			inputRightName: function(e) {
				this.rightName = e.detail.value
			},
			doClearRightName: function() {
				this.rightName = ''
			},
			inputRightPrice: function(e) {
				this.rightPrice = e.detail.value
			},
			doClearPrice: function() {
				this.rightPrice = 0
			},
			inputOrgName: function(e) {
				this.orgName = e.detail.value
			},
			inputCardNumber: function(e) {
				this.cardNumber = e.detail.value
			},
			//著作权人类别
			bindChangePersonType: function(e) {
				this.selPersonType = this.personType[e.detail.value]
			},
			clearPersonType: function() {
				this.selPersonType = null
			},
			//证件类型
			bindChangeCreType: function(e) {
				this.selCreType = this.creType[e.detail.value]
			},
			clearCreType: function() {
				this.selCreType = null
			},
			//选择软著分类
			onShowRightType: function() {
				this.showType = true
			},
			//选择软著分类
			bindChangeRightType: function(e) {
				var selectedIds = e.detail.value;
				var selectedItems = [];
				for (var i = 0; i < this.rightType.length; i++) {
					var item = this.rightType[i];
					item.checked = selectedIds.indexOf(item.dataId) !== -1;
					if (item.checked) {
						selectedItems.push(item);
					}
				}
				this.rightType = this.rightType
				this.selRightType = selectedItems
			},
			clearRightType: function() {
				this.rightType.forEach(function(item) {
					item.checked = false
				})
				this.selRightType = []
				this.rightType = this.rightType
			},
			confirmSelRightType: function() {
				this.showType = false
			},
			//显示日期选择
			bindDateChange: function(e) {
				this.rightStopDate = e.detail.value
			},
			clearTime: function() {
				this.rightStopDate = ''
			},
			deleteImage: function(e) {
				var index = e.detail.index;
				this.files.splice(index, 1);
			},
			selectFile: function(files) {
				console.log('files', files)
			},
			uploadFile: function(files) {
				var tempFilePaths = files.tempFilePaths;
				var token = get('token')
				var header = {}
				if (token) {
					header.Auth = 'Bearer ' + token;
				}
				var that = this
				for (var i = 0; i < tempFilePaths.length; i++) {
					uni.uploadFile({
						url: upShopImgUrl,
						header: header,
						filePath: tempFilePaths[i],
						name: 'image',
						success: function(res) {
							console.log(res)
							var result = JSON.parse(res.data)
							that.files.push(result.data)
						},
						fail: function(err) {
							console.log(err);
						}
					})
				}

				// 文件上传的函数，返回一个promise
				return new Promise(function(resolve, reject) {
					var result = {};
					result['urls'] = tempFilePaths;
					resolve(result);
				})
			},
			//显示地区选择
			onShowArea: function() {
				this.showArea = true
			},
			clearArea: function() {
				this.selArea = null
				this.selCity = null
			},
			confirmSelArea: function() {
				this.showArea = false
			},
			inputOrgPhone: function(e) {
				this.orgPhone = e.detail.value
			},
			doClearPhone: function() {
				this.orgPhone = ''
			},
			//获取字典
			getDic: function() {
				var that = this
				var cre = Shop.doGetGoodsDic('0b00884a-f7a2-425f-93e5-599fbaad4bde') //软著分类
				var right = Shop.doGetGoodsDic('ce3ded65-68ed-4f42-89da-de1b813b8f7e') //证件类型
				var area = Shop.doGetAreaList('0')
				var list = [cre, right, area]
				Promise.all(list)
					.then(function(res) {
						if (res) {
							that.rightTyp = res[0]
							that.creType = res[1]
							that.areaList = res[2]
							that.rightType.forEach(function(item) {
								item.checked = false
							})
							//判断是否是编辑
							if (that.goodsId != '') {
								that.rightType.forEach(function(item) {
									// selRightType
									if (that.goods.goodsType.indexOf(item.dataId) != -1) {
										item.checked = true
										that.selRightType.push(item)
									}
								})
								var tempPersonType
								that.personType.forEach(function(item) {
									if (that.goods.goodsLeaderType == item.dataId) {
										tempPersonType = item
									}
								})
								var tempCreType
								that.creType.forEach(function(item) {
									if (that.goods.goodsLeaderIdcardType == item.dataId) {
										tempCreType = item
									}
								})
								var tempSelArea = null
								var tempIndex = 0
								that.areaList.forEach(function(item, index) {
									if (that.goods.goodsLeaderCity1 == item.areaId) {
										tempSelArea = item
										tempIndex = index
									}
								})
								that.rightType = that.rightType
								that.selRightType = that.selRightType
								that.selPersonType = tempPersonType
								that.selCreType = tempCreType
								that.selArea = tempSelArea
								that.prevValue[0] = tempIndex
								that.doGetArea(that.selArea.areaId)
							} else {
								//默认加载第一个area
								that.selCreType = that.creType[0]
								that.selArea = that.areaList[0]
								that.rightType = that.rightType
								that.doGetArea(that.selArea.areaId)
							}
						}
					})
					.catch(function(err) {
						that.msgHint = err.msg ? err.msg : '数据加载错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					})

			},
			//获取省
			doGetProvince: function(id) {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this
				Shop.doGetAreaDetail(id)
					.then(function(res) {
						uni.hideLoading()
						that.selArea = res
						that.doGetArea(that.selArea.areaId)
					})
					.catch(function(err) {
						uni.hideLoading()
						//重置selArea selCity
						that.selArea = null
						that.selCity = null
					})
			},
			//获取区域
			doGetArea: function(pId) {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this
				Shop.doGetAreaList(pId)
					.then(function(res) {
						uni.hideLoading()
						if (res) {
							that.cityList = res
							if (that.goodsId != '') {
								var tempCity = null
								var tempIndex = 0
								that.cityList.forEach(function(item, index) {
									if (that.goods.goodsLeaderCity2 == item.areaId) {
										tempCity = item
										tempIndex = index
									}
								})
								that.selCity = tempCity
								that.prevValue[1] = tempIndex
							} else {
								that.selCity = res[0]
							}
						}
					})
					.catch(function(err) {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '数据加载错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
					})
			},
			//选中省市
			areaChange: function(e) {
				// var that = this
				// var currentValue = e.detail.value;
				// var prevValue = that.prevValue;
				// that.prevValue = currentValue
				// for (var i = 0; i < currentValue.length; i++) {
				// 	if (currentValue[i] !== prevValue[i]) {
				// 		if (i == 0) {
				// 			//获取city
				// 			var area = that.data.areaList[currentValue[0]]
				// 			that.setData({
				// 				selArea: area
				// 			})
				// 			that.doGetArea(area.areaId)
				// 		} else {
				// 			var city = that.data.cityList[currentValue[1]]
				// 			that.setData({
				// 				selCity: city
				// 			})
				// 		}
				// 	}
				// }
			},
			//发布新商品
			doConfirmPublish: function() {
				var isLegal = this.checkParams()
				if (isLegal) {
					var that = this
					var data = that.buildParams()
					uni.showLoading({
						title: '保存中...',
					})
					Shop.doSaveGoods(data)
						.then(function(res) {
							uni.hideLoading()
							that.msgType = 'success'
							that.msgHint = '保存成功'
							that.$refs.msg.open()
							setTimeout(function() {
								that.backPageRefresh()
							}, 1500);
						})
						.catch(function(err) {
							uni.hideLoading()
							that.msgType = 'error'
							that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
							that.$refs.msg.open()
						})
				}
			},
			//修改新商品
			doConfirmUpdate: function() {
				var isLegal = this.checkParams()
				if (isLegal) {
					var that = this
					var data = that.buildParams()
					uni.showLoading({
						title: '保存中...',
					})
					Shop.doUpdateGoods(that.data.goodsId, data)
						.then(function(res) {
							uni.hideLoading()
							//修改成功
							that.msgType = 'success'
							that.msgHint = '修改成功'
							that.$refs.msg.open()
							setTimeout(function() {
								that.backPageRefresh()
							}, 1500);
						})
						.catch(function(err) {
							uni.hideLoading()
							that.msgType = 'error'
							that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
							that.$refs.msg.open()
						})
				}
			},
			//保存商品
			doSave: function() {
				if (this.goodsId != '') {
					//编辑
					this.doConfirmUpdate()
				} else {
					//新增
					this.doConfirmPublish()
				}
			},
			//校验参数
			checkParams: function() {
				var rules = [{
						field: 'rightName',
						message: '请输入软著名称',
						validator: function(v) {
							// 先判断是否为字符串，再调用trim()
							return typeof v === 'string' && v.trim().length > 0;
						}
					},
					{
						field: 'selRightType',
						message: '请选择软著分类',
						validator: function(v) {
							return v !== null && v.length > 0;
						}
					},
					{
						field: 'rightPrice',
						message: '请输入软著售价',
						validator: function(v) {
							// 价格字段可能为数字类型，先转为字符串再处理
							return typeof v === 'string' || typeof v === 'number' ?
								('' + v).trim().length > 0 : false;
						}
					},
					{
						field: 'rightStopDate',
						message: '请选择截止售卖日期',
						validator: function(v) {
							return typeof v === 'string' && v.trim().length > 0;
						}
					},
					{
						field: 'files',
						message: '请上传软著图片',
						validator: function(v) {
							return v && v.length > 0;
						}
					},
					{
						field: 'selPersonType',
						message: '请选择著作权人类别',
						validator: function(v) {
							return v !== null;
						}
					},
					{
						field: 'orgName',
						message: '请输入姓名或机构名称',
						validator: function(v) {
							return typeof v === 'string' && v.trim().length > 0;
						}
					},
					{
						field: ['selArea', 'selCity'],
						message: '请选择所在省市',
						validator: function(_, data) {
							return data.selArea !== null && data.selCity !== null;
						}
					},
					{
						field: 'orgPhone',
						message: '请输入合法的联系电话',
						validator: function(v) {
							// 先确保是字符串，再进行电话格式验证
							return typeof v === 'string' && v.trim().length > 0 && isValidPhone(v.trim());
						}
					},
					{
						field: 'selCreType',
						message: '请选择证件类型',
						validator: function(v) {
							return v !== null;
						}
					},
					{
						field: 'cardNumber',
						message: '请输入证件号码',
						validator: function(v) {
							return typeof v === 'string' && v.trim().length > 0;
						}
					}
				];

				for (var i = 0; i < rules.length; i++) {
					var rule = rules[i];
					var isValid;
					if (Array.isArray(rule.field)) {
						// 多字段联合验证
						isValid = rule.validator(null, this.rule);
					} else {
						// 单字段验证
						var value = this.data[rule.field];
						isValid = rule.validator(value, this.data);
					}

					if (!isValid) {
						this.setData({
							msgType: 'error',
							msgHint: rule.message,
							msgShow: true
						});
						return false;
					}
				}
				return true;
			},
			buildParams: function() {
				var typeIds = this.selRightType.map(function(item) {
					return item.dataId
				}).join(',');
				this.goodsLastTime = this.rightStopDate;
				this.goodsLeader = this.orgName;
				this.goodsLeaderCity1 = this.selArea.areaId;
				this.goodsLeaderCity2 = this.selCity.areaId;
				this.goodsLeaderIdcard = this.cardNumber;
				this.goodsLeaderIdcardType = this.selCreType.dataId;
				this.goodsLeaderPhone = this.orgPhone;
				this.goodsLeaderType = this.selPersonType.dataId;
				this.goodsName = this.rightName;
				this.goodsLocalPhoto = this.files[0].fileId;
				this.goodsPrice = this.rightPrice;
				this.goodsType = typeIds;
				return data
			},
			backPageRefresh: function() {
				var pages = getCurrentPages();
				var beforePage = pages[pages.length - 2];
				beforePage.setData({
					needRefresh: true
				})
				wx.navigateBack()
			}
		},
	};
</script>

<style lang="scss" scoped>
	.content-box {
		border-radius: 20rpx;
		margin-top: -10rpx;
	}

	.upload-img-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.content-container {
		margin: 0rpx -30rpx 80rpx -30rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.info-title {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.info-title::before {
		content: "";
		width: 10rpx;
		height: 36rpx;
		margin-right: 5rpx;
		border-left: 15rpx solid $blue-color;
		vertical-align: middle;
	}

	.section {
		margin-bottom: 15rpx;
		margin-left: 20rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
		padding: 20rpx 10rpx;
		font-size: 28rpx;
	}

	.label {
		color: $text-color;
		font-weight: bold;
	}

	.select-content {
		margin-top: 15rpx;
		display: flex;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		background-color: $bg-gray-input-color;
		padding: 0rpx 10rpx;
	}

	.select-content-no-h {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-content-item {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-item-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 5rpx;
	}

	.select-item-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $divider-color;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 15rpx;
		margin-top: 5rpx;
		color: $text-color;
	}

	.desc {
		flex: 1;
		color: #999;
		text-align: left;
		padding-left: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 10px;
		align-items: center;
	}

	.select-time {
		color: $text-color;
		flex: 1;
		font-size: 28rpx;
		text-align: left;
	}

	.clear-icon {
		width: 20px;
		height: 20px;
		margin-right: 20rpx;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
	}


	.value-hint {
		color: $text-gray-hint-color;
	}

	.v-select {
		color: $text-color;
	}

	.v-normal {
		color: $text-gray-hint-color;
	}

	.custom-dialog {
		background-color: $white-color;
	}

	.custom-tips {
		margin-top: 80px;
	}

	/* 上传图片 */

	.weui-uploader {
		margin-top: 10rpx;
		width: 100%;
	}

	.weui-uploader__bd {
		display: flex;
		flex-direction: row;
		margin-bottom: 0;
	}

	.weui-uploader__hd {
		display: none;
	}

	.weui-uploader__input-box {
		width: 280rpx;
		height: 380rpx;
		border-radius: 5px;
		background-color: transparent;
	}

	.weui-uploader__file {
		width: 280rpx;
		height: 380rpx;
		border-radius: 5px;
	}

	.weui-uploader__img {
		border-radius: 5px;
	}

	.weui-uploader__overview {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 65vw;
	}

	.weui-uploader__input-box {
		border: 1rpx solid $bg-bottom-color;
		background-color: transparent;
	}
</style>