<template>
	<view class="content">

		<view class="content-middle">
		
			<form report-submit='true'>
				<view class='merchantsSettled'>
					<view class='list' style="padding-bottom: 30rpx;">


						<view class="item">
							<view class="acea-row row-middle">
								<text class="item-name">项目名称:</text>
								<input placeholder="请输入项目名称" type="text" readonly v-model="merchantData.name">
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<text class="item-name">开始时间:</text>
								<input placeholder="请输入项目开始时间" type="text" disabled readonly
									v-model="merchantData.start_time" >
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<text class="item-name">结束时间:</text>
								<input placeholder="请输入项目结束时间" type="text" disabled readonly
									v-model="merchantData.end_time" >
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<text class="item-name">项目负责人:</text>
								<input placeholder="请输入项目负责人" type="text" disabled readonly
									v-model="buname">
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<text class="item-name">项目简介:</text>
								<input placeholder="请输入项目简介" type="text" readonly v-model="merchantData.content">
							</view>
						</view>


						<view class="" v-for="(phase, index) in phases" :key="index">
							<view class="item">
								<view class="acea-row row-middle">
									<text class="item-name">阶段名称:</text>
									<input placeholder="请输入阶段名称" type="text" disabled readonly v-model="phase.name">
								</view>
							</view>
							<view class="item">
								<view class="acea-row row-middle" >
									<text class="item-name">阶段负责人:</text>
									<input placeholder="请输入阶段负责人" type="text" disabled readonly
										v-model="phase.companyrole">
								</view>
							</view>

							<view class="item">
								<view class="acea-row row-middle">
									<text class="item-name">阶段开始时间:</text>
									<input placeholder="请输入阶段开始时间" type="text" disabled readonly
										v-model="phase.start_time" @click="project1_start(index)">
								</view>
							</view>

							<view class="item">
								<view class="acea-row row-middle">
									<text class="item-name">阶段结束时间:</text>
									<input placeholder="请输入阶段结束时间" type="text" disabled readonly
										v-model="phase.end_time" >
								</view>
							</view>
							<view class="item">
								<view class="acea-row row-middle" >
									<text class="item-name">阶段成员:</text>
									<input placeholder="请输入阶段成员" type="text" disabled readonly v-model="phase.role">
								</view>
							</view>
						</view>




					</view>
				</view>

				<view class='merchantsSettled' v-if="type==1">
					<view class='list' style="padding-bottom: 30rpx; margin-top: 30rpx;">


						

						<view class="item" style="display: flex; justify-content: space-between;margin-top: -10rpx;">
							<view>
								<view class="title">添加项目附件</view>
								<view class="text">
									上传前，请规范命名，最多只能上传6个文件<br />
									超过请压缩成多个文件上传。
								</view>
							</view>
							<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
								style="margin-top: 28rpx;" :debug="false"
								:formats="'pdf,txt,zip,rar,jpg,png,mp3,avi,mov,mp4,gif'" :multiple="false" :count="3"
								:instantly="true" @change="changeFile" @uploadEnd='onuploadEnd' @progress='onprogre'>
								<!-- <view class="change-file">请选择PDF类型的发票</view> -->
								<u-icon name="plus-circle" color="#333333" size="28"
									style="margin-top: 40rpx; margin-left: 60rpx;"></u-icon>
							</lsjUpload>
						</view>
						<view class="itemfile">
							<view class="fileList" v-for="(item,index) in files.values()" :key="index"   @click="downloadFile(item)">
								<view class="name">
									<image src="@/static/pdf.png"
										style="width: 40rpx;height: 40rpx;margin-right: 12rpx;"></image>
									{{item.name}}
								</view>
								<view class="btn">
									<!-- <text @click="resetUpload(item.name)" v-if="item.type=='fail'">重新上传</text> -->
									<text @click="clear(item)">删除</text>
								</view>
							</view>
						</view>


					</view>
				</view>
			
			<view class='merchantsSettled' v-if="type==1">
				<view class='list' style="padding-bottom: 30rpx; margin-top: 30rpx;">
			
			
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name">项目链接:</text>
							<input placeholder="请输入项目链接" type="text" readonly v-model="add_link.url">
						</view>
			
					</view>
					<view class="item">
			
						<view class="acea-row row-middle">
							<text class="item-name">项目链接说明:</text>
							<input placeholder="请输入项目链接说明" type="text" readonly v-model="add_link.desc">
						</view>
					</view>
					<view class="itemfile">
						<view class="fileList" v-for="(item,index) in files1" :key="index">
							<view class="name">
								<image src="@/static/pdf.png"
									style="width: 40rpx;height: 40rpx;margin-right: 12rpx;"></image>
								{{item.desc}}
							</view>
							<view class="btn">
								<!-- <text @click="resetUpload(item.name)" v-if="item.type=='fail'">重新上传</text> -->
								<text @click="clear1(item)">删除</text>
							</view>
						</view>
					</view>
					<view class="content-item-two" @click="addlink">
						发布链接
					</view>
				
			
				</view>
			</view>
						
						
			</form>


			<u-picker :show="flag" :columns="columns2" ref="uPicker2" @cancel="flag = false" closeOnClickOverlay
				@close="flag = false" @confirm="confirm4" keyName="name" @change="columnCode4"
				:defaultIndex='defaultIndex4'>
			</u-picker>
			<u-picker :show="flag1" :columns="columns3" ref="uPicker4" @cancel="flag1 = false" closeOnClickOverlay
				@close="flag1 = false" @confirm="confirm" @change="columnCode" keyName="name"
				:defaultIndex='defaultIndex'>
			</u-picker>

			<u-picker :show="flag2" :columns="columns4" ref="uPicker4" @cancel="flag2 = false" closeOnClickOverlay
				@close="flag2 = false" @confirm="confirm1" @change="columnCode1" keyName="name"
				:defaultIndex='defaultIndex'>
			</u-picker>


			<!-- 		<u-datetime-picker :show="porject1month" mode="date" closeOnClickOverlay @confirm="porject1_monthConfirm"
				@cancel="porject1_monthClose" @close="porject1_monthClose"></u-datetime-picker>
			<u-datetime-picker :show="porject2month" mode="date" closeOnClickOverlay @confirm="porject2_monthConfirm"
				@cancel="porject2_monthClose" @close="porject2_monthClose"></u-datetime-picker>

			<u-datetime-picker :show="endmonth" mode="date" closeOnClickOverlay @confirm="end_monthConfirm"
				@cancel="end_monthClose" @close="end_monthClose"></u-datetime-picker>
			<u-datetime-picker :show="startmonth" mode="date" closeOnClickOverlay @confirm="start_monthConfirm"
				@cancel="start_monthClose" @close="start_monthClose"></u-datetime-picker>
			<view class="content-bottom"> -->

			<u-calendar :show="porject1month" mode='single' @confirm="porject1_monthConfirm"
				@close="porject1_monthClose"></u-calendar>
			<u-calendar :show="porject2month" mode='single' @confirm="porject2_monthConfirm"></u-calendar>
			<u-calendar :show="endmonth" mode='single' @confirm="end_monthConfirm" @close="end_monthClose"></u-calendar>
			<u-calendar :show="startmonth" mode='single' @confirm="start_monthConfirm"
				@close="start_monthClose"></u-calendar>



			
		</view>
	</view>

	</view>
</template>

<script>
	import {
		userdepartment,
		getemployee,
		addproject,
		projectview,
		addfile,
		comanyerview,
		deletefile,
		addlink,
		deletelink
	} from '@/api/oa.js'
	import {
		oaUploads,
		uploads
	} from '@/api/upload.js'
	import {
		Toast
	} from '@/libs/uniApi.js'
	import {
		HTTP_REQUEST_URL,
		HTTP_REQUEST_URL_THREE
	} from '@/config/app.js'
	import {
		FILE_URL
	} from '@/api/file.js'
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
	export default {
		components: {
			lsjUpload
		},

		data() {
			return {
				fileOption: {},
				files: new Map(),
				validate: false,
				columns2: [],
				columns3: [],
				columns4: [],
				defaultIndex: [0, 0, 0],
				defaultIndex1: [0, 0, 0],
				defaultIndex4: [0, 0, 0],

				flag: false,
				flag1: false,
				flag2: false,
				porject1month: false,
				porject2month: false,
				files1: [],
				add_link: {
					url: '',
					desc: '',
					module: 'project'
				},
				add_file: {
					file_id: '',
					file_name: '',
					module: 'project'
				},
				buname: "",
				phases: [{
						start_time: '',
						end_time: '',
						name: '立项阶段',
						companyrole: '',
					},

					{
						name: '实施阶段',
						companyrole: '',
						start_time: '',
						end_time: ''
					}, // 实施阶段
					{
						name: '验收阶段',
						companyrole: '',
						start_time: '',
						end_time: ''
					}, // 验收阶段
					{
						name: '交付阶段',
						companyrole: '',
						start_time: '',
						end_time: ''
					} // 交付阶段
				],
				endmonth: false,
				startmonth: false,

				companyrole: '',
				companyrole1: '',
				companyrole2: '',
				companyrole3: '',
				merchantData: {
					flow_name: ['立项阶段', '实施阶段', '验收阶段', '交付阶段'],
					charge_ids: [],
					membe_ids: [],
					cycle_date: [],
					director_uid: [],
					end_time: '',
					start_time: ''

				},

				changeproject: '',
				changeproject1: '',
				num: 0,
				type: ''
			};
		},
		onLoad(option) {
			this.fileOption = {
				url: FILE_URL,
				name: 'file',
				header: {
					token: this.$store.state.app.token
				}
			}


			this.type = option.type
			if (this.type == 1) {
			
				// this.buname=
				// //console.log(this.columns3[0])

				this.projectdetail(option.data)
			}

	


		},

		methods: {
			downloadFile(item) {
				uni.downloadFile({
					url: HTTP_REQUEST_URL + item.filepath,
					success: function(res) {
						if (res.statusCode === 200) {
							const tempFilePath = res.tempFilePath;
							if (item.fileext == 'png'||item.fileext == 'jpg') {
								uni.previewImage({
									urls: [tempFilePath]
								});
							} else {
			
								uni.showModal({
									title: '提示',
									content: '暂时不支持查看，请登录后台查看',
									success: function (res) {
										if (res.confirm) {
											// //console.log('用户点击确定');
										} else if (res.cancel) {
											// //console.log('用户点击取消');
										}
									}
								});
							}
			
						}
					}
				});
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */
			onuploadEnd(item) {
				//console.log(`${item.name}已上传结束，上传状态=${item.type}`);
				if (item['responseText']) {
					this.files.get(item.name).responseText = JSON.parse(item.responseText);
				}
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				let arr1 = this.files.get(item.name).responseText

				this.add_file.file_id = arr1.data.id
				this.add_file.file_name = arr1.data.name
				this.add_file.topic_id = this.merchantData.id
				this.seleckImage(this.add_file)

				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogre(item) {

				//console.log('打印对象', JSON.stringify(this.files.get(item.name)));
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			changeFile(files) {
				//console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
				// 更新选择的文件 
				this.files = files
				//console.log(files.values())
				// 强制更新视图
				this.$forceUpdate();
			},
			/**
			 * 指定上传某个文件
			 * @param {Object} name 带后缀名的文件名称
			 */
			resetUpload(name) {
				this.$refs.lsjUpload.upload(name);
			},
			/**
			 * 移除某个文件
			 * @param {Object} name 带后缀名的文件名称
			 */
			async clear(item) {

				let res = await deletefile({
					id: item.id
				})
				Toast(res.msg);
				this.projectdetail(this.merchantData.id)
			},
			async clear1(item) {
				let res = await deletelink({
					id: item.id
				})
				Toast(res.msg);
				this.projectdetail(this.merchantData.id)
			},
			//项目文件
			async seleckImage(data) {
				let res = await addfile(data)
				//console.log(res)
				Toast(res.msg);
				this.projectdetail(this.merchantData.id)
			},
			//获取项目详情
			async projectdetail(id) {
				this.merchantData = {}; // 将 this.merchantData 设置为空对象
				let res = await projectview({
					id: id
				});

				this.merchantData.id = id
				this.merchantData.name = res.data.detail.name
				this.merchantData.end_time = res.data.detail.end_time
				this.merchantData.start_time = res.data.detail.start_time
				this.merchantData.director_uid = res.data.detail.director_uid
				this.buname = res.data.detail.director_name
				this.merchantData.content = res.data.detail.content

				this.files1 = res.data.link_array
				this.files = res.data.file_array
				const promises = res.data.step_array.map((step) => {
					const roleIds = step.flow_ids.split(",");
					return this.fetchRoleInfo(roleIds);
				});

				Promise.all(promises).then((roleInfoArray) => {
					this.phases = res.data.step_array.map((step, index) => {
						const roleIds = step.flow_ids.split(",");
						const roleInfo = roleInfoArray[index];

						return {
							start_time: step.start_time,
							end_time: step.end_time,
							flow_uid: step.flow_uid,
							name: step.flow_name,
							companyrole: step.check_name,
							role: roleInfo.toString(),
							roleInfo: roleIds, // 修改为完整的 roleIds 数组
						};
					});

					this.merchantData.charge_ids = this.phases.map(item => item.flow_uid);
					// //console.log(this.phases)
				});



			},
			async fetchRoleInfo(roleIds) {
				const promises = roleIds.map((id) => {
					return comanyerview({
						id: id
					});
				});

				return Promise.all(promises).then((results) => {
					return results.map((res) => res.data.name);
				});
			},
			//添加项目链接
			async addlink() {
				this.add_link.topic_id = this.merchantData.id
				let res = await addlink(this.add_link)
				Toast(res.msg);
				this.projectdetail(this.merchantData.id)
				// //console.log(res)
			},
			//获取部门
			async getDocumentList() {
				const res = await userdepartment()
				const deArr = res.data
				let codelist = [
					[], //顶级部门
					[], //次级部门
					[] // 负责人
				]

				codelist[0] = res.data.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})

				codelist[1] = res.data[0].children.map((item) => { // 赋值 
					return {
						id: item.id,
						name: item.title
					}
				})

				let dat = await getemployee({
					did: codelist[0][0].id
				})

				codelist[2] = dat.data.map((item) => {
					return {
						id: item.id,
						name: item.name
					}
				})

				this.$forceUpdate()
				this.$nextTick(() => {
					this.columns2 = codelist
					this.columns3 = codelist
					this.columns4 = codelist

				})


			},
			async columnCode(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns3, 2, newColumn);

					}

				}

			},
			async columnCode1(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns4, 2, newColumn);

					}

				}

			},
			async columnCode2(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns5, 2, newColumn);

					}

				}

			},
			async columnCode3(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})

					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})

						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns6, 2, newColumn);

					}

				}

			},
			async columnCode4(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.columns3[e.columnIndex][e.index].id
					})
					if (dat.data.length > 0) {
						const newColumn = dat.data.map((item) => {
							return {
								id: item.id,
								name: item.name
							}
						})
						// 使用 Vue.set 或 this.$set 方法将新数组赋值给 columns3 数组对应位置
						this.$set(this.columns6, 2, newColumn);

					}

				}

			},
			project1_end(index) {
				this.porject2month = true
				this.num = index
			},

			project1_start(index) {
				this.porject1month = true
				this.num = index
			},


			porject1_monthConfirm(e) {
				this.porject1month = false
				// this.phases[this.num].start_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.phases[this.num].start_time = e[0]
				this.$nextTick(() => {
					this.validatePhaseTime(this.num)
				})


			},
			porject2_monthConfirm(e) {
				this.porject2month = false
				// this.phases[this.num].end_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.phases[this.num].end_time = e[0]
				this.$nextTick(() => {
					this.validatePhaseTime(this.num)
				})
			},

			porject1_monthClose() {
				this.porject1month = false
			},

			porject2_monthClose() {
				this.porject2month = false
			},



			//结束月份
			end_monthClose() {
				this.endmonth = false

			},
			end_monthConfirm(e) {
				this.endmonth = false
				// this.merchantData.end_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.merchantData.end_time = e[0]
			},
			//开始月份
			start_monthClose() {
				this.startmonth = false

			},
			start_monthConfirm(e) {
				this.startmonth = false
				// this.merchantData.start_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.merchantData.start_time = e[0]
			},

			validatePhaseTime(index) {
				if (new Date(this.merchantData.start_time) >= new Date(this.merchantData.end_time)) {
					this.merchantData.start_time = ''
					this.merchantData.end_time = ''
					Toast('项目时间范围不合法')
				}
				const phase = this.phases[index]
				// //console.log(phase.start_time, this.merchantData.start_time)
				// 检查当前阶段的时间是否超出项目时间范围
				if (new Date(phase.start_time) < new Date(this.merchantData.start_time) || new Date(
						phase.end_time) >
					new Date(this.merchantData.end_time)) {
					phase.start_time = ''
					phase.end_time = ''

					Toast('阶段时间超出项目时间范围')
					return
				}

				// 检查当前阶段的时间与其他阶段是否有重叠
				for (let i = 0; i < this.phases.length; i++) {
					if (i === index) continue

					const otherPhase = this.phases[i]

					if (
						new Date(phase.start_time) >= new Date(otherPhase.start_time) &&
						new Date(phase.start_time) <= new Date(otherPhase.end_time)
					) {
						phase.start_time = ''
						phase.end_time = ''
						Toast('阶段时间与其他阶段重叠')
						return
					}

					if (
						new Date(phase.end_time) >= new Date(otherPhase.start_time) &&
						new Date(phase.end_time) <= new Date(otherPhase.end_time)
					) {
						phase.start_time = ''
						phase.end_time = ''
						Toast('阶段时间与其他阶段重叠')
						return
					}
				}

				// 检查阶段顺序是否正确
				if (index > 0) {
					const prevPhase = this.phases[index - 1]

					if (new Date(phase.start_time) < new Date(prevPhase.end_time)) {
						phase.start_time = ''
						phase.end_time = ''
						Toast('阶段顺序不正确')
						return
					}
				}
			},
			//验证
			validateForm: function() {



				this.merchantData.flow_name = this.phases.map(item => item.name);
				this.merchantData.cycle_date = this.phases.map(item =>
					`${item.start_time} 到 ${item.end_time}`);
				// //console.log(this.merchantData)
				let that = this,
					value = that.merchantData;



				if (!new Date(this.merchantData.start_time) >= new Date(this.merchantData.end_time))
					return Toast(
						'项目时间范围不合法'
					);
				if (!value.name) return Toast(
					'请输入项目名称'
				);
				//console.log(value.charge_ids.length)
				if (value.charge_ids.length == 0) return Toast(
					'请选择项目阶段负责人'
				);
				if (value.cycle_date.length == 0) return Toast(
					'请选择项目阶段开始结束时间'
				);
				if (value.director_uid.length == 0) return Toast(
					'请选择项目负责人'
				);
				if (value.content.length == 0) return Toast(
					'请输入项目简介'
				);
				if (value.membe_ids.length == 0) return Toast(
					'请选择项目阶段成员'
				);





				that.validate = true;
				return true;
			},
			async getemployeelist(id) {
				const res = await getemployee({
					did: id
				})
				const deArr = res.data
				// this.columns5.push(deArr)
				//console.log(deArr)
			},
			//弹窗打开
			showckfive() {
				this.flag = true
			},
			showck1(index) {
				this.flag1 = true
				this.num = index
			},
			showck2(index) {
				this.flag2 = true
				this.num = index
			},
			showckthree() {
				this.endmonth = true
			},
			showckfour() {
				this.startmonth = true
			},
			//获取数据
			confirm4(e) {
				//console.log(e)
				this.merchantData.director_uid = e.value[2].id
				this.buname = e.value[2].name
				this.flag = false
			},
			confirm(e) {
				this.merchantData.charge_ids.push(e.value[2].id)
				this.phases[this.num].companyrole = e.value[2].name
				this.flag1 = false
			},
			confirm1(e) {
				// //console.log(e)
				this.merchantData.membe_ids.push(e.value[2].id)
				this.phases[this.num].role += " " + e.value[2].name;

				this.flag2 = false
			},
			async submit() {
				let that = this
				// //console.log(that.validate)
				if (this.validateForm() && this.validate) {
					const res = await addproject(this.merchantData)
					Toast(res.msg);
					if (res.code == 0) {
						uni.redirectTo({
							url: '/pages/project/index'
						})
					}
				}

			}

		}
	};
</script>

<style lang="scss">
	page {
		padding-bottom: 88rpx;
	}

	.content-top {
		width: 100%;
		background: #3274F9;
		position: fixed;
		z-index: 100;

	}

	.content-middle {
		padding: 28rpx 28rpx;

		.content-middle-title {
			font-size: 35rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 35rpx;

		}

		.merchantsSettled .list {
			background-color: #fff;
			border-radius: 12px;

		}

		.application-record {
			position: absolute;
			display: flex;
			align-items: center;
			top: 240rpx;
			right: 0;
			color: #fff;
			font-size: 22rpx;
			background-color: rgba(0, 0, 0, 0.3);
			padding: 8rpx 18rpx;
			border-radius: 20px 0px 0px 20px;
		}

		.itemfile {
			padding-left: 40rpx;
			padding-right: 40rpx;

			.fileList {

				display: flex;
				justify-content: space-between;
			}


		}

		.content-item-two {
			width: 205rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 60rpx 60rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #3274F9;

			margin: 0 auto;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}

		.merchantsSettled .list .item {
			padding: 50rpx 0 20rpx;

			position: relative;
			margin: 0 20px;

			&.no-border {
				border-bottom: none;
				padding-left: 0;
				padding-right: 0;
			}

			.item-title {
				color: #666666;
				font-size: 28rpx;
				display: block;
			}

			.item-desc {
				color: #B2B2B2;
				font-size: 22rpx;
				display: block;
				margin-top: 9rpx;
				line-height: 36rpx;
			}
		}

		.item-name {
			width: 180rpx;
			margin-right: 10rpx;
		}

		.acea-row,
		.upload {
			display: -webkit-box;
			display: -moz-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-lines: multiple;
			-moz-box-lines: multiple;
			-o-box-lines: multiple;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.upload {
			margin-top: 20rpx;
		}

		.acea-row.row-middle {
			-webkit-box-align: center;
			-moz-box-align: center;
			-o-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			padding-left: 2px;
		}

		.acea-row.row-column {
			-webkit-box-orient: vertical;
			-moz-box-orient: vertical;
			-o-box-orient: vertical;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
		}

		.acea-row.row-center-wrapper {
			-webkit-box-align: center;
			-moz-box-align: center;
			-o-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-moz-box-pack: center;
			-o-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
		}


		.uni-list-cell-db {
			position: relative;
		}




		.merchantsSettled .list .item input {
			width: 400rpx;
			font-size: 30rpx;
		}

		.merchantsSettled .list .item .text {
			width: 480rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}

		.merchantsSettled .list .item .placeholder {
			color: #b2b2b2;
		}

		.merchantsSettled .default {
			padding: 0 30rpx;
			height: 90rpx;
			background-color: #fff;
			margin-top: 23rpx;
		}

		.merchantsSettled .default checkbox {
			margin-right: 15rpx;
		}

		.merchantsSettled .acea-row uni-image {
			width: 20px;
			height: 20px;
			display: block;
		}

		.merchantsSettled .list .item .codeIput {
			width: 125px;
		}

		.uni-input-input {
			display: block;
			height: 100%;
			background: none;
			color: inherit;
			opacity: 1;
			-webkit-text-fill-color: currentcolor;
			font: inherit;
			line-height: inherit;
			letter-spacing: inherit;
			text-align: inherit;
			text-indent: inherit;
			text-transform: inherit;
			text-shadow: inherit;
		}

		.merchantsSettled .list .item .code {
			position: absolute;
			width: 93px;
			line-height: 27px;
			border: 1px solid var(--view-theme);
			border-radius: 15px;
			color: var(--view-theme);
			text-align: center;
			bottom: 8px;
			right: 0;
			font-size: 12px;
		}

		.merchantsSettled .list .item .code.on {
			background-color: #bbb;
			color: #fff;
			border-color: #bbb;
		}

		.merchantsSettled .submitBtn {
			width: 588rpx;
			margin: 0 auto;
			height: 86rpx;
			border-radius: 25px;
			text-align: center;
			line-height: 86rpx;
			font-size: 15px;
			color: #fff;
			background: #E3E3E3;
			margin-top: 25px;
			pointer-events: none;
		}

		.merchantsSettled .submitBtn.on {
			background: var(--view-theme);
			pointer-events: all;
		}

		uni-checkbox-group,
		.settleAgree {
			display: inline-block;
			font-size: 24rpx;
		}

		uni-checkbox-group {
			color: #b2b2b2;
		}

		.settleAgree {
			color: var(--view-theme);
			position: relative;
			top: 2px;
			left: 8px;
		}

		.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
			width: 30rpx;
			height: 30rpx;
			border: 2rpx solid #C3C3C3;
			border-radius: 15px;
		}
	}

	.content-bottom {
		width: 485rpx;
		height: 88rpx;
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		margin-left: -242.5rpx;
		position: fixed;



		.content-bottom-two {
			width: 485rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 60rpx 60rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			background: #3274F9;

		}
	}
</style>