<template>
	<view class="content">
		<u-overlay :show="overlayShow"></u-overlay>
		<view class="container">
			<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
			<view class="box_">
				<!--  -->
				<view class="box_bs">
					<view class="">证件类型</view>
					<view class="dis_" @click="selectPick('certSelect')">
						<view class="size_">{{this.formData.legalPerson.certTypeName}}</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<!--  -->
				<view class="title_">
					上传证件照片
				</view>
				<view class="upload-box">

					<view class="upload-title">
						<view class="hei-size">头像面:</view>
						<view class="hui-size">上传您的证件头像面</view>
					</view>
					<view class="right-upload">
						<u-upload :fileList="fileList1" @afterRead="addFigure" imageMode="scaleToFill"
							@delete="deletePic" name="1" :maxCount="1" width="140" height="70">
							<image src="/static/imgs/rx.png" mode="widthFix" style="width: 140px;height: 70px;">
							</image>
						</u-upload>
					</view>

				</view>
				<view class="upload-box">

					<view class="upload-title">
						<view class="hei-size">国徽面:</view>
						<view class="hui-size">上传您的证件国徽面</view>
					</view>
					<view class="right-upload">
						<u-upload :fileList="fileList2" imageMode="scaleToFill" @afterRead="addFigureBack"
							@delete="deletePic" name="2" :maxCount="1" width="140" height="70">
							<image src="/static/imgs/gh.png" mode="widthFix" style="width: 140px;height: 70px;">
							</image>
						</u-upload>
					</view>

				</view>
				<view class="title_">
					法人或负责人信息
				</view>
				<view class="box_bs">
					<view class="">法人姓名</view>
					<view class="right_size">
						<input type="text" placeholder="请输入" v-model="formData.legalPerson.participantName" />
					</view>
				</view>
				<view class="box_bs">
					<view class="">法人手机号</view>
					<view class="right_size">
						<input type="number" maxlength="11" placeholder="请输入" v-model="formData.legalPerson.mobileNo" />
					</view>
				</view>
				<view class="box_bs">
					<view class="">法人性别</view>
					<view class="dis_" @click="selectPick('genderSelect')">
						<view class="size_">{{genderName}}</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<view class="box_bs">
					<view class="">法人国籍</view>
					<view class="dis_" @click="goSelect()">
						<view class="size_">{{formData.legalPerson.nationLabel}}</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<view class="box_bs">
					<view class="">身份证号</view>
					<view class="right_size">
						<input type="text" placeholder="请输入" v-model="formData.legalPerson.certNo" />
					</view>
				</view>
				<view class="box_bs">
					<view class="">有效期</view>
					<view class="dis_">
						<view class="dis_" @click="pickTime(1)">
							<view v-if="!formData.legalPerson.certEffectDate" style="margin: 0px 5px;">开始日期</view>
							<view v-else style="color:#000;margin: 0px 5px;">{{formData.legalPerson.certEffectDate}}
							</view>
							<u-icon name="arrow-down-fill" color="#2e2e2e" size="18"></u-icon>
						</view>



						<view class="size_" style="margin: 0px 5px;">至</view>
						<view class="dis_" @click="timePopup()">
							<view v-if="!formData.legalPerson.certExaDate" style="margin: 0px 5px;">
								截至日期</view>
							<view v-else style="color:#000;margin: 0px 5px;">{{formData.legalPerson.certExaDate}}</view>
							<u-icon name="arrow-down-fill" color="#2e2e2e" size="18"></u-icon>
						</view>


					</view>
				</view>
				<view class="box_bs">
					<view class="" style="width: 20%;">职业</view>
					<view class="dis_" style="width: 80%; justify-content: flex-end; " @click="selectCareerInfPick(1)">
						<view v-if="!formData.legalPerson.firstCareerNo" style="color: #7c7c7c;" class="size_">请选择
						</view>
						<view v-else style="color: #000;text-align: right;" class="size_">
							{{this.formData.legalPerson.firstCareerName}}
						</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<view class="box_bs" v-if="this.formData.legalPerson.secondCareerNo">
					<view class=""></view>

					<view class="dis_" style="width: 80%; justify-content: flex-end; " @click="selectCareerInfPick(2)">

						<view class="size_">{{this.formData.legalPerson.secondCareerName}}
						</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<view class="box_bs" v-if="this.formData.legalPerson.thirdCareerNo">
					<view class=""></view>
					<view class="dis_" @click="selectCareerInfPick(3)">

						<view style="color: #000;" class="size_">{{this.formData.legalPerson.thirdCareerName}}
						</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<view class="box_bs">
					<view class="">归属地</view>
					<view class="dis_" @tap="openLevel">
						<view v-if="!this.formData.legalPerson.countyName" class="size_" style="color: #7c7c7c;">
							{{"请选择"}}
						</view>
						<view v-else class="size_">
							{{this.formData.legalPerson.provinceName+this.formData.legalPerson.cityName+this.formData.legalPerson.countyName}}
						</view>
						<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
					</view>
				</view>
				<view class="box_bs">
					<view class="">地址</view>
					<view class="right_size" style="color: #000;">
						<textarea type="textarea" auto-height maxlength="200" placeholder="请输入"
							v-model="formData.legalPerson.address"></textarea>

					</view>
				</view>
				<view class="box_bs">
					<view class="">邮箱</view>
					<view class="right_size">
						<input type="text" placeholder="请输入" v-model="formData.legalPerson.email" />
					</view>
				</view>
			</view>
			<view class="box_">
				<view class="title_">
					法人手持身份证
				</view>
				<view class="upload-box" style="justify-content: center; padding-top: 30px; ">
					<view class="y-img">
						<u-upload :fileList="fileList3" imageMode="scaleToFill" @afterRead="addInfoImg"
							@delete="deletePic" name="3" :maxCount="1" width="350" height="135">
							<image src="/static/imgs/sctp.png" mode="widthFix"
								style="width: 190px;height: 120px;margin: 0 auto;">
							</image>
						</u-upload>
					</view>

				</view>
			</view>
			<view class="button_p" @click="nextStep()">
				<view class="">下一步</view>
			</view>
			<u-picker :show="pickData.show" :columns="pickData.columns" :title="pickData.title" keyName="label"
				@confirm="confirm" @cancel="cancel" @close="cancel"></u-picker>
			<level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"
				themeColor='#007AFF'></level-linkage>
			<u-popup :show="pickData.timePopup" mode="center">
				<view class="box-popup">
					<view class="x-size" @click="selectExaDate(1)">长期</view>
					<view class="x-size" @click="selectExaDate(2)">日期</view>
					<view class="x-size" @click="selectExaDate(3)">取消</view>
				</view>
			</u-popup>
			<u-datetime-picker :closeOnClickOverlay="true" :show="pickData.timeShow" v-model="pickData.certEffectDate"
				:formatter="formatter" @confirm="timeConfirm" @cancel="timeCancel" @close="timeCancel"
				mode="date"></u-datetime-picker>
			<u-picker :show="careerInfPick.show" :columns="careerInfPick.columns" :title="careerInfPick.title"
				keyName="careerName" @confirm="careerInfConfirm" @cancel="careerInfCancel"
				@close="careerInfCancel"></u-picker>
		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '../../utils/request.js'
	import upload from '@/utils/upload.js'
	import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
	export default {
		data() {
			return {
				titles: "法人或负责人信息录入",
				msg: "1",
				dataList: [],
				fileList1: [],
				fileList2: [],
				fileList3: [],
				overlayShow: false,
				pickData: {
					columns: [],
					show: false,
					pickType: null, //下部选择器类型：certSelect 证件选择
					title: "",
					timeShow: false,
					timePopup: false,
					certEffectDate: Number(new Date()),
					certExaDate: Number(new Date()),
					timeType: 1
				},
				careerInfPick: {
					columns: [],
					columns2: [],
					columns3: [],
					show: false,
					pickType: null, //下部选择器类型：certSelect 证件选择
					title: "",
					level: 1
				},
				timeShow: false,
				status: 'loading',
				certTypes: [], //证件类型  数据字典获取
				sexList: [], //性别  数据字典获取
				careerInfData: [], //职业信息数据
				chinaArea: [],
				formData: {
					areaType: "7", //商户类型 7 小微 写死
					legalPerson: {
						address: "",
						backPic: "",
						backPicUrl: "",
						certEffectDate: "",
						certExaDate: "",
						certNo: "",
						certType: "11",
						certTypeName: "身份证",
						city: "",
						cityName: "",
						county: "",
						countyName: "",
						email: "",
						facePic: "",
						facePicUrl: "",
						firstCareerName: "",
						firstCareerNo: "",
						gender: "1",
						mobileNo: "",
						nation: "CHN",
						nationLabel: "中国",
						participantName: "",
						province: "",
						provinceName: "",
						secondCareerName: "",
						secondCareerNo: "",
						sort: 0,
						thirdCareerName: "",
						thirdCareerNo: ""
					},
					openAccount: "",
					openAccountUrl: "",
					rate: "0.25",
					steps: "1" //步骤当前页面写死第一页
				},
				pickerValueDefault: [14, 0, 0],
				merchantId: null

			}
		},
		onLoad(options) {
			if (options && options.merchantId) {
				this.merchantId = options.merchantId
				this.getMerchantInfo()
			}
			let data = uni.getStorageSync("userAddress")
			this.dealPosition(data)
			this.getCertTypes()
			this.getSexList()
			this.getCareerInf()
			this.getChinaArea()
			let that = this
			uni.$on('selectNation', function(data) {
				that.formData.legalPerson.nation = data.value
				that.formData.legalPerson.nationLabel = data.label

			})
		},

		components: {
			headers,
			levelLinkage

		},
		computed: {
			genderName() {
				if (this.sexList && this.sexList.length > 0) {
					let tempData = this.sexList.find(item => item.value == this.formData.legalPerson.gender)
					return tempData.label
				} else {
					return '男'
				}
			}
		},
		methods: {
			dealPosition(data) {
				if (data) {
					//处理省市区
					this.formData.legalPerson.provinceName = data.merProvinceName
					this.formData.legalPerson.province = data.merProvinceCode
					this.formData.legalPerson.cityName = data.merCityName
					this.formData.legalPerson.city = data.merCityCode
					this.formData.legalPerson.countyName = data.merRegionName
					this.formData.legalPerson.county = data.merRegionCode
					this.pickerValueDefault = [data.merProvinceIdx, data.merCityIdx, data.merRegionIdx]
				}
			},
			async getMerchantInfo() {
				uni.showLoading({
					title: '加载中'
				});
				this.overlayShow = true
				let ress = await request({
					url: 'app/report/newBaseInfo',
					method: 'post',
					data: {
						objectId: this.merchantId
					}
				})
				this.formData = ress.data
				this.formData.steps = '1'
				//处理图片问题
				if (this.formData.legalPerson.facePicUrl) {
					this.fileList1 = []
					let tempImg1 = {
						url: this.formData.legalPerson.facePicUrl,
					}
					this.fileList1.push(tempImg1)
				}
				if (this.formData.legalPerson.backPicUrl) {
					this.fileList2 = []
					let tempImg2 = {
						url: this.formData.legalPerson.backPicUrl
					}
					this.fileList2.push(tempImg2)
				}

				if (this.formData.openAccountUrl) {
					this.fileList3 = []
					let tempImg3 = {
						url: this.formData.openAccountUrl
					}
					this.fileList3.push(tempImg3)
				}
				uni.hideLoading()
				this.overlayShow = false

			},
			selectExaDate(type) {
				if (type == 3) {
					//取消
					this.pickData.timePopup = false
				} else if (type == 1) {
					//长期
					this.formData.legalPerson.certExaDate = '99991231'
					this.pickData.timePopup = false
				} else {
					//日期
					this.pickData.timePopup = false
					this.pickData.timeShow = true
					this.pickData.timeType = 2
				}
			},
			timePopup() {
				this.pickData.timePopup = true
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			timeConfirm(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				if (this.pickData.timeType == 1) {
					//证件有效期
					this.formData.legalPerson.certEffectDate = year + month + day
				} else {
					//证件有效期
					this.formData.legalPerson.certExaDate = year + month + day
				}


				this.pickData.timeShow = false
			},
			pickTime(type) {
				//选择时间
				this.pickData.timeShow = true
				this.pickData.timeType = type
			},
			openLevel() {
				this.$refs.levelLinkage.open();
			},
			onConfirm(data) {
				// 地区选择确认后选中的数据
				this.formData.legalPerson.provinceName = data.firstPick.name
				this.formData.legalPerson.province = data.firstPick.code
				this.formData.legalPerson.cityName = data.secondPick.name
				this.formData.legalPerson.city = data.secondPick.code
				this.formData.legalPerson.countyName = data.thirdPick.name
				this.formData.legalPerson.county = data.thirdPick.code
			},
			selectPick(pickType) {
				//选择证件类型
				this.pickData.columns = []
				this.pickData.pickType = pickType

				this.pickData.show = true
				if (pickType == 'certSelect') {
					this.pickData.columns.push(this.certTypes)
					this.pickData.title = '选择证件类型'
				}
				if (pickType == 'genderSelect') {
					this.pickData.columns.push(this.sexList)
					this.pickData.title = '选择法人性别'
				}

			},
			selectCareerInfPick(type) {
				this.careerInfPick.columns = []

				if (type == 1) {
					this.careerInfPick.columns.push(this.careerInfData)
				} else if (type == 2) {
					this.careerInfPick.columns.push(this.careerInfPick.columns2)
				} else if (type == 3) {
					this.careerInfPick.columns.push(this.careerInfPick.columns3)
				}
				this.careerInfPick.level = type
				this.careerInfPick.show = true
				this.careerInfPick.title = '选择职业'

			},
			open() {
				// console.log('open');
			},
			timeCancel() {
				this.pickData.timeShow = false

			},
			// 性别点击取消
			careerInfCancel() {
				this.careerInfPick.columns = []
				this.careerInfPick.show = false
			},
			// 弹窗确认
			careerInfConfirm(data) {
				this.careerInfPick.show = false
				this.careerInfPick.columns = []
				if (this.careerInfPick.level == 1) {
					this.formData.legalPerson.firstCareerNo = data.value[0].careerNo
					this.formData.legalPerson.firstCareerName = data.value[0].careerName
					this.careerInfPick.level = 2
					this.careerInfPick.show = false
					this.formData.legalPerson.secondCareerNo = ""
					this.formData.legalPerson.secondCareerName = ""
					setTimeout(() => {
						if (data.value[0].inferior && data.value[0].inferior.length > 0) {
							this.careerInfPick.show = true
							this.careerInfPick.columns = []
							this.careerInfPick.columns.push(data.value[0].inferior)
							this.careerInfPick.columns2 = data.value[0].inferior
							this.careerInfPick.title = '选择职业'
						}
					}, 300);

				} else if (this.careerInfPick.level == 2) {
					this.formData.legalPerson.secondCareerNo = data.value[0].careerNo
					this.formData.legalPerson.secondCareerName = data.value[0].careerName
					this.careerInfPick.level = 3
					this.careerInfPick.show = false
					this.formData.legalPerson.thirdCareerNo = ""
					this.formData.legalPerson.thirdCareerName = ""
					setTimeout(() => {
						if (data.value[0].inferior && data.value[0].inferior.length > 0) {
							this.careerInfPick.show = true
							this.careerInfPick.columns = []
							this.careerInfPick.columns.push(data.value[0].inferior)
							this.careerInfPick.columns3 = data.value[0].inferior
							this.careerInfPick.title = '选择职业'
						}
					}, 300);
				} else if (this.careerInfPick.level == 3) {
					this.formData.legalPerson.thirdCareerNo = data.value[0].careerNo
					this.formData.legalPerson.thirdCareerName = data.value[0].careerName
					this.careerInfPick.level = 1
					this.careerInfPick.show = false
				}
				console.log(data, '选择职业');


			},
			// 性别点击取消
			cancel() {
				this.pickData.columns = []
				this.pickData.show = false
			},
			// 弹窗确认
			confirm(e) {
				this.pickData.show = false
				this.pickData.columns = []
				if (this.pickData.pickType == 'certSelect') {
					//证件选择
					this.formData.legalPerson.certType = e.value[0].value
					this.formData.legalPerson.certTypeName = e.value[0].label
				}
				if (this.pickData.pickType == 'genderSelect') {
					//性别选择
					this.formData.legalPerson.gender = e.value[0].value
				}

			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)

			},

			async uploadFile(url, fileName, type) {
				uni.showLoading({
					title: '上传中'
				});
				this.overlayShow = true
				upload({
					url: 'app/report/fileUplod',
					filePath: url,
					formData: {
						type: type,
						fileName: fileName
					}

				}).then((res) => {

					if (res.code == 0) {
						if (type == 1) {
							this.formData.legalPerson.facePic = res.data.externalKey
							this.formData.legalPerson.facePicUrl = res.data.imgUrl
							//身份证正面
							let idCardData = JSON.parse(res.data.idCardData)

							if (idCardData && idCardData.code == '0' && idCardData.data) {

								//地址
								this.formData.legalPerson.address = idCardData.data.address
								//证件号
								this.formData.legalPerson.certNo = idCardData.data.number
								//姓名
								this.formData.legalPerson.participantName = idCardData.data.name
								let tempData = this.sexList.find(item => item.label == idCardData.data.sex)
								this.formData.legalPerson.gender = tempData.value

							}
						} else if (type == 2) {
							this.formData.legalPerson.backPic = res.data.externalKey
							this.formData.legalPerson.backPicUrl = res.data.imgUrl
							let idCardData = JSON.parse(res.data.idCardData)

							//身份证正面反面
							if (idCardData && idCardData.code == '0' && idCardData.data) {
								//证件有效期
								this.formData.legalPerson.certEffectDate = idCardData.data.expireDate.split(
									"-")[0]
								this.formData.legalPerson.certExaDate = idCardData.data.expireDate.split("-")[
									1]
								if (this.formData.legalPerson.certExaDate == '长期') {
									this.formData.legalPerson.certExaDate = '99991231'
								}
							}
						} else {
							console.log("法人");
							//法人手持身份证
							this.formData.openAccount = res.data.externalKey
							this.formData.openAccountUrl = res.data.imgUrl

						}

					}


				}).finally((res) => {
					this.overlayShow = false
					uni.hideLoading();
				})
			},
			//法人手持身份证
			async addInfoImg(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.uploadFile(lists[i].url, lists[i].url.split('/').pop(), null)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}

			},
			// 新增国徽面
			async addFigureBack(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.uploadFile(lists[i].url, lists[i].url.split('/').pop(), 2)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 新增人像面
			async addFigure(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.uploadFile(lists[i].url, lists[i].url.split('/').pop(), 1)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}

			},
			async getCertTypes() {
				this.certTypes = await this.$getDictList('pos_report_certType')

			},
			async getSexList() {
				this.sexList = await this.$getDictList('gender')

			},
			async getCareerInf() {
				let res = await request({
					url: 'app/drop/getCareerInf',
					method: 'get'
				})
				if (res.code == 0) {
					this.careerInfData = res.data

				}
			},
			async getChinaArea() {
				let res = await request({
					url: 'app/drop/getChinaArea',
					method: 'get'
				})
				if (res.code == 0) {
					this.chinaArea = res.data
					this.$refs.levelLinkage.init(res.data);

				}
			},
			async nextStep() {
				uni.showLoading({
					title: '提交中'
				});
				this.overlayShow = true
				let that = this
				let res = await request({
					url: 'app/report/newBaseInfoSaveOrUpdate',
					method: 'post',
					data: this.formData
				})
				uni.hideLoading()
				that.overlayShow = false
				if (res.code == 0) {

					that.formData.merchantId = res.merchantId
					uni.navigateTo({
						url: '/homePages/merchantsMerchant/InformationEntry?merchantId=' + res.merchantId
					})

				}

			},
			goSelect() {
				uni.navigateTo({
					url: '/components/select/nationality'
				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;

		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
		padding-bottom: 88px;
	}

	.box_ {
		width: 95%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		background: #fff;
		margin: 15px auto;
	}

	.box_bs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10px 0px;
		color: #aeaeae;
		border-bottom: 1px solid #eeeeee;
	}

	.dis_ {
		display: flex;
	}

	.size_ {
		margin-right: 5px;
		color: #000;
	}

	.title_ {
		font-size: 18px;
		font-weight: bold;
		margin: 10px 0px;
		margin-bottom: 20px;
	}

	.upload-box {
		width: 100%;
		margin: 5px 0px;
		background: #f7f9f8;
		display: flex;
		text-align: center;
		justify-content: space-between;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 15px;
	}

	.upload-title {
		font-size: 16px;
		font-weight: bold;


	}

	.right_size {
		text-align: right;

		input {
			color: #000;
		}
	}

	.button_p {
		width: 100%;
		background: #E4612E;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 4px;
		position: fixed;
		bottom: 0px;
	}



	.right-upload {
		width: 140px;
		height: 100px;


	}

	.hei-size {
		text-align: left;
	}

	.hui-size {
		font-size: 14px;
		font-weight: 400;
		color: #a4a6a5;
	}

	.y-img {
		width: 180;
		height: 90px;


	}

	.box-popup {
		width: 300px;
		// height: 150px;
		background: #eeeeee;
		box-sizing: border-box;
		padding: 0px 20px;
		border-radius: 4px;
	}

	.x-size {
		margin: 15px 0px;
		color: #8e8e8f;

	}
</style>
