<template>
	<view class="leave_request">
		<view class="leave_box">



			<view class="cont_cell">
				<view class="title">报销人：</view>
				<input type="text" v-model="personInfo.name" disabled placeholder="报销人">
			</view>
			<view class="cont_cell">
				<view class="title">报销部门：</view>
				<input type="text" v-model="personInfo.department_name" disabled placeholder="报销部门">
			</view>
			<view class="cont_cell">
				<view class="title">报销凭证编号：</view>
				<input type="text" v-model="listobj.code" disabled placeholder="报销凭证编号">
			</view>

			<view class="cont_cell">
				<view class="title">原始单据日期：</view>
				<input type="text" v-model="listobj.expense_time" disabled placeholder="始单据日期">
			</view>
			<view class="cont_cell">
				<view class="title">入账月份：</view>
				<input type="text" v-model="listobj.income_month" disabled placeholder="入账月份">
			</view>

			<view  class="cont_cell">
				<view class="title">关联项目：</view>
				<input type="text" v-model="project" placeholder="请选择" disabled>
			</view>



		</view>
		<view class="leave_box">

			<view class="" v-for="(item,i) in list" :key='i'>
				<view  class="cont_cell">
					<view class="title">报销项目：</view>
					<input type="text" v-model="item.cate_title" placeholder="请选择" disabled>
				</view>
				<view class="cont_cell">
					<view class="title">报销金额：</view>
					<input type="number" v-model="item.amount" placeholder="报销金额">

				</view>
				<view class="cont_cell">
					<view class="title">备注：</view>
					<input type="text" v-model="item.remarks" placeholder="备注">
				</view>
			</view>




		</view>
		<view class="leave_box" style="padding-top: 30rpx; background-color: #fff;" v-if="fileArray.length>0">

			<!-- 附件 -->
			<block v-for="(item, i) in fileArray" :key="i" @click="downloadFile()">
				<view class="file flex_a_c_j_sb">
					<view class="l_file">
						<view class="file_name">{{ item.name }}</view>
						<view class="file_size">{{ item.filesize }}</view>

					</view>
					<!-- <u-icon @click="delImg(i)" name="close-circle" color="#333333" size="28"></u-icon> -->
				</view>
			</block>



		</view>
		<view class="flow_path">
			<view class="cont_cell">
				<view class="title">审批流程：</view>

			</view>
			<view class="" style="border-bottom: 1px solid #f7f7f7;border-top: 1px solid #f7f7f7;padding-bottom: 20px;">
				<view class="record" style="display: flex;">
					<view class="circle"></view>

					<view class="text">{{nodelist.create_user}}创建</view>
				</view>
				<view class="" v-for="(itemh,m) in  nodelist.flows" :key='m'>
					<view class="record" style="display: flex;">
						<view class="circle"></view>
						<view class="" v-if='itemh.flow_type==1||itemh.flow_type==2' style="display: flex;">
							<view class="text">{{itemh.flow_type==1?'部门负责人':'上级部门负责人'}}</view>
							<view class="" v-if="check_step_sort==itemh.sort">
								<view class="text">当前审核</view>
							</view>
							<view class="" v-else>
								<view class="" v-if="itemh.check_list.length>0">
									<view class="text" v-if="itemh.check_list[0].status == 1">通过</view>
									<view class="text" v-else-if="itemh.check_list[0].status == 2">拒绝</view>
								</view>
								<view class="" v-else>
									<view class="text">待审核</view>
								</view>
							</view>

						</view>
						<view class="" v-else-if='itemh.flow_type==7||itemh.flow_type== 6' style="display: flex;">
							<view class="text">{{itemh.flow_type==7?'部门分管领导':'上级部门分管领导'}}</view>
							<view class="" v-if="check_step_sort==itemh.sort">
								<view class="text">当前审核</view>
							</view>
							<view class="" v-else>
								<view class="" v-if="itemh.check_list.length>0">
									<view class="text" v-if="itemh.check_list[0].status == 1">通过</view>
									<view class="text" v-else-if="itemh.check_list[0].status == 2">拒绝</view>
								</view>
								<view class="" v-else>
									<view class="text">待审核</view>
								</view>
							</view>


						</view>
						<view class="" v-else-if='itemh.flow_type==0' style="display: flex;">
							<view class="text" v-for="(itemk, o) in itemh.user_id_info">
								{{itemk.name}}
							</view>
							<view class="" v-if="check_step_sort==itemh.sort">
								<view class="text">当前审核</view>
							</view>
							<view class="" v-else>
								<view class="" v-if="itemh.check_list.length>0">
									<view class="text" v-if="itemh.check_list[0].status == 1">通过</view>
									<view class="text" v-else-if="itemh.check_list[0].status == 2">拒绝</view>
								</view>
								<view class="" v-else>
									<view class="text">待审核</view>
								</view>
							</view>

						</view>
						<view class="" v-else-if='itemh.flow_type==3' style="display: flex;">
							<view class="text">指定人或签</view>
							<view class="text" v-for="(itemk, o) in itemh.user_id_info">
								{{itemk.name}}
							</view>
							<view class="" v-if="check_step_sort==itemh.sort">
								<view class="text">当前审核</view>
							</view>
							<view class="" v-else>

								<view class="" v-if="itemh.user_id_info.length>0">
									<view class=""
										v-if="itemh.user_id_info[0].status!=1&&itemh.user_id_info[0].status!=2">
										<view class="text">待审核</view>
									</view>

									<view class="text" v-for="(itemk, o) in itemh.user_id_info" :key='o'>
										<view class="text" v-if="itemk.status == 1">通过</view>
										<view class="text" v-else-if="itemk.status == 2">拒绝</view>
									</view>
								</view>


							</view>

						</view>
						<view class="" v-else-if='itemh.flow_type==4' style="display: flex;">
							<view class="text">指定人员(会签)</view>
							<view class="text" v-for="(itemk, o) in itemh.user_id_info">
								{{itemk.name}}
							</view>
							<view class="" v-if="check_step_sort==itemh.sort">
								<view class="text">当前审核</view>
							</view>
							<view class="" v-else>
								<view class="" v-if="itemh.user_id_info[0].status!=0&&itemh.user_id_info[0].status!=2">
									<view class="text">通过</view>
								</view>
								<view class="" v-if="itemh.user_id_info.length>0">
									<view class="text" v-for="(itemj, j) in itemh.user_id_info" :key='j'>
										<view class="text" v-if="itemj.status == 0">待审核</view>
										<view class="text" v-else-if="itemj.status == 2">拒绝</view>
									</view>
								</view>
							</view>

						</view>
						<view class="" v-else-if='itemh.flow_type==5' style="display: flex;">
							<view class="text" v-for="(itemk, o) in itemh.user_id_info">
								{{itemk.name}}
							</view>
							<view class="" v-if="check_step_sort==itemh.sort">
								<view class="text">当前审核</view>
							</view>
							<view class="" v-else>
								<view class="" v-if="itemh.user_id_info.length>0">
									<view class=""
										v-if="itemh.user_id_info[0].status!=0&&itemh.user_id_info[0].status!=2">
										<view class="text">通过</view>
									</view>
									<view class="text" v-for="(itemj, j) in itemh.user_id_info" :key='j'>
										<view class="text" v-if="itemj.status == 0">待审核</view>
										<view class="text" v-else-if="itemj.status == 2">拒绝</view>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>



			</view>


			<view class="cont_cell">
				<view class="title">审核状态：</view>

				{{listobj.check_status=='0'?'待审核':listobj.check_status=='1'?'审核中':listobj.check_status=='2'?'审核通过':listobj.check_status=='3'?'审核不通过':listobj.check_status=='4'?'撤销审核':'已打款'}}
			</view>
			<view class="cont_cell">
				<view class="title">审核人：</view>
				<input type="text" v-model="admin_name" placeholder="请选择" disabled>
			</view>
			<view class="cont_cell">
				<view class="title">抄送人：</view>
				<input type="text" v-model="copy_names" placeholder="请选择" disabled>
			</view>
			<view style="padding-bottom: 20px;border-bottom: 1px solid #f7f7f7;" v-if="check_record.length>0">
				<block v-for="(item,i) in check_record" :key="i">
					<view class="record" style="display: flex;">
						<view class="circle"></view>
						<text class="text">{{item.check_time_str}} {{item.name}} {{item.status_str}}了此申请。
						操作意见：{{item.content}}</text>
					</view>
				</block>
			</view>

			<view class=""
				v-if='is_check_admin==1&&listobj.check_status==1&&flow_type==0'
				style="border-bottom: 1px solid #f7f7f7;">
				<view class="title" style="margin-bottom: 10rpx;margin-top: 30rpx;">审核节点：</view>
				<radio-group class="select_group" @change="deliveryWayChangetwo1"
					style="font-size: 30rpx; padding: 10px;">
					<label class="radio_select" style="margin-right:15rpx;display: flex; margin-bottom: 30rpx;">
						<view style="margin-right:5rpx;">
							<radio value="1" />
						</view>
						审核结束
					</label>
					<label class="radio_select" style="margin-right:15rpx;display: flex;">
						<view style="margin-right:5rpx;">
							<radio value="2" />
						</view>
						<view @click="branchShow = true" style="display: flex;">
							<view class="title" style="width: 250rpx;"> 下一位审批人：</view>
							<input type="text" v-model="check_admin_name" style="margin-top: -5rpx;" placeholder="请选择"
								disabled>
						</view>
					</label>
				</radio-group>
			</view>

			<view class="cont_cell" style="padding-top: 20rpx;"
				v-if="listobj.check_status!= 3&&listobj.check_status!=2&&is_check_admin==1">
				<view class="title" style="width: 200rpx;">审核意见</view>
				<textarea v-model="mscontent" placeholder="请输入审核意见"
					style="padding-top: 20rpx;padding-left: 20rpx;border:1px solid#f1f1f1;padding :20rpx;20rpx;" />
			</view>
		</view>


		<view class="bot_btn" v-if='listobj.check_status!=2&&listobj.check_status!=3&&is_check_admin==1'>
			<view class="reset" @click="appflowcheck()">{{flow_type==5?'回退':'拒绝'}}</view>
			<view class="submit_btn" @click=" appflowcheck1()">通过</view>
		</view>
		<u-action-sheet :show="leavaTypeShow" keyName="name" :actions="columns" title="请选择"
			@close="leavaTypeShow = false" @select="leavaType">
		</u-action-sheet>
		<u-action-sheet :show="leavaTypeShow1" keyName="name" :actions="actions4" title="请选择"
			@close="leavaTypeShow1 = false" @select="leavaType1">
		</u-action-sheet>
		<!-- 选择审批流程 -->
		<u-action-sheet :actions="flowPathSheet" @select="flowPathSelect" title="选择审批流程" :show="flowPathShow"
			@close="flowPathShow=false" :closeOnClickOverlay="true" :closeOnClickAction="true">
		</u-action-sheet>

		<!-- 部门选择 -->
		<u-picker :show="branchShow" :defaultIndex='defaultIndex' ref="branchRef" :columns="branchColumns"
			@confirm="branchConfirm" @change="columnCode" :closeOnClickOverlay="true" @close="branchShowclose"
			keyName="name">
		</u-picker>

		<u-picker :show="branchShow1" :defaultIndex='defaultIndex1' ref="branchRef" :columns="branchColumns1"
			@confirm="branchConfirm1" @change="columnCode1" :closeOnClickOverlay="true" @close="branchShowclose1"
			keyName="name">
		</u-picker>


		<!-- 选择时间 -->

		<u-datetime-picker :show="timeShow" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
			closeOnClickOverlay @confirm="timeConfirm($event)" @cancel="timeShow = false"
			@close="timeShow = false"></u-datetime-picker>
		<u-datetime-picker :show="timeShow1" mode="datetime" :maxDate="1786778555000" :minDate="timestamp"
			closeOnClickOverlay @confirm="timeConfirm1($event)" @cancel="timeShow1 = false"
			@close="timeShow1 = false"></u-datetime-picker>


	</view>
</template>

<script>
	import {
		Toast
	} from '../../libs/uniApi'
	import {
		getPersonInfoApi,
		appexpensecate,
		appexpenseflow,
		userdepartment,
		getemployee,
		appexpense,
		projectlist,
		appexpenseview,
		appflow_check,
		flownodes
	} from '@/api/oa.js'
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
	import {
		FILE_URL
	} from '@/api/file.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js'
	export default {
		components: {
			lsjUpload
		},
		data() {
			return {
				defaultIndex: [0, 0, 0],
				defaultIndex1: [0, 0, 0],
				timestamp: '',
				personInfo: {},
				company: '',
				mscontent: '',
				listobj: {},
				project: '',
				timeShow: false,
				timeShow1: false,
				branchShow: false,
				flowPathShow: false,
				leavaTypeShow: false,
				leavaTypeShow1: false,
				branchColumns: [],
				branchColumns1: [],
				flowPathSheet: [],
				actions4: [],
				branchShow1: false,
				flowPath: '',
				columns: [],
				check_admin_name: '',
				admin_name: '',
				copy_names: '',
				list: [{
					cate_title: "",
					amount: '',
					remarks: ''
				}],
				fileOption: {},
				files: new Map(),
				fileArray: [],
				dnum: 0,
				check_record: [],
				check: 0,
				nodelist: {},
				flow_type: '',
				check_step_sort: '',
				is_check_admin: 0
			}
		},
		onLoad(option) {
			this.detail(option.type)
		},
		onShow() {
			this.fileOption = {
					url: FILE_URL,
					name: 'file',
					header: {
						token: this.$store.state.app.token
					}
				},
				// 获取当前时间戳
				this.timestamp = Date.parse(new Date());
			// this.getPersonInfo()
			this.getlist()
			this.getlist1()
			this.getDocumentList()
			this.getDocumentList1()
		},


		methods: {
			//获取审批节点
			async flownodes(val) {
				let res = await flownodes({
					id: val,
					type: 2
				})
				this.nodelist = res.data
				// console.log(res)
			},
			async detail(id) {
				let res = await appexpenseview({
					id: id
				})
				// console.log(res,'111')
				this.flow_type = res.data.flows.flow_type

				this.is_check_admin = res.data.is_check_admin
				this.check_step_sort = res.data.detail.check_step_sort
				this.listobj.code = res.data.detail.code
				this.listobj.id = id
				this.flownodes(id)
				this.list = res.data.detail.list
				this.listobj.expense_time = res.data.detail.expense_time
				this.listobj.income_month = res.data.detail.income_month
				this.admin_name = res.data.detail.check_user
				this.copy_names = res.data.detail.copy_user
				this.project = res.data.detail.ptname
				this.listobj.flow_id = res.data.flows.id
				this.listobj.ptid = res.data.detail.ptid
				this.check_record = res.data.check_record
				this.personInfo.name = res.data.detail.create_user
				this.personInfo.department_name = res.data.detail.department
				this.listobj.check_status = res.data.detail.check_status
				if (res.data && res.data.detail && res.data.detail.fileArray) {
					this.fileArray = res.data.detail.fileArray.map(function(obj) {
						return {
							name: obj.name,
							filepath: obj.filepath,
							fileext: obj.fileext,
							filesize: obj.filesize
						};
					});
				}

				// console.log(this.fileArray,'11111111111', res.data.detail)

			},
			reset() {
				this.list = [{
						name: "",
						num: ''
					}],
					this.listobj = {}
				this.fileArray = []
				this.copy_names = ''
				this.flowPath = ''
				this.check_admin_name = ''
			},
			async getDocumentList1() {
				let res = await projectlist({
					page: 1,
					limit: 10000,

				})
				this.actions4 = res.data.data.map((step, index) => {
					return {
						name: step.name,
						id: step.id,
					};
				});
				console.log(this.actions4)

			},
			//获取部门
			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[1][0].id
				})

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

				this.$forceUpdate()
				this.$nextTick(() => {
					this.branchColumns = codelist
					this.branchColumns1 = codelist
					this.branchColumns2 = codelist
				})


			},
			//监听人员加载数据
			async columnCode(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.branchColumns[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.branchColumns, 2, newColumn);

					}

				}

			},

			//监听人员加载数据
			async columnCode1(e) {
				if (e.columnIndex == 1) {
					let arr1 = []
					let dat = await getemployee({
						did: this.branchColumns1[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.branchColumns1, 2, newColumn);

					}

				}

			},
			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('用户点击取消');
										}
									}
								});
							}

						}
					}
				});
			},
			//流程审批
			async appflowcheck() {
				let data = {
					id: this.listobj.id,
					type: 2,
					check_node: this.check,
					content: this.mscontent,
					check: 2,
					check_admin_ids: this.listobj.check_admin_ids
				}

				let res = await appflow_check(data)
				if (res.code == 0) {

					uni.navigateBack({
						delta: 1
					})
				}


				Toast(res.msg)
			},
			async appflowcheck1() {
				console.log(this.listobj)
				let data = {
					id: this.listobj.id,
					type: 2,
					check_node: this.check,
					check: 1,
					content: this.mscontent,
					check_admin_ids: this.listobj.check_admin_ids
				}

				let res = await appflow_check(data)
				console.log(res)
				if (res.code == 0) {
					uni.navigateBack({
						delta: 1
					})
				}
				Toast(res.msg)
			},
			bianjiBtn() {
				uni.navigateTo({
					url: '/pages/reimbursementapplication/bianji??type=' + this.listobj.id
				})
			}, //选择是否结束
			deliveryWayChangetwo1(e) {
				console.log(e)
				this.check = e.detail.value
			},
			//弹窗显示
			leavaShow(item, i) {
				this.dnum = i
				this.leavaTypeShow = true
			},
			leavaShow1() {

				this.leavaTypeShow1 = true
			},
			branchConfirm(e) {
				console.log('confirm', e, e.value[2].name)
				this.check_admin_name = e.value[2].name

				this.listobj.check_admin_ids = e.value[2].id
				this.branchShow = false
			},
			branchConfirm1(e) {
				console.log('confirm', e, e.value[2].name)
				if (this.listobj.copy_uids) {
					this.listobj.copy_uids += e.value[2].id + ','
				} else {
					this.listobj.copy_uids = e.value[2].id
				}

				this.copy_names += e.value[2].name + ','
				this.branchShow1 = false
			},
			timeConfirm(e, i) {
				this.listobj.expense_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

				this.timeShow = false
			},
			timeConfirm1(e, i) {
				this.listobj.income_month = uni.$u.timeFormat(e.value, 'yyyy-mm')
				this.timeShow1 = false
			},

			//新增
			addleava() {
				this.list.push({
					name: "",
					num: ''
				})
			},
			deleteleava(item, index) {
				if (this.list.length > 1) {
					this.list.splice(0, 1)
				} else {
					Toast('不能删除')
				}

			},
			//获取个人信息
			async getPersonInfo() {
				const res = await getPersonInfoApi()
				this.personInfo = res.data

			},
			async getlist() {
				const res = await appexpensecate()
				// this.personInfo = res.data
				const reformattedData = res.data.map(item => {
					return {
						name: item.title,
						id: item.id
					};
				});



				this.columns = reformattedData






			},
			async getlist1() {

				const res = await appexpenseflow({})

				this.flowPathSheet = res.data
				this.flowPath = res.data[0].name
				this.flow_id = res.data[0].id
				// console.log('个人信息2', res.data);
			},
			flowPathSelect(value) {
				this.flowPath = value.name
				this.flow_id = value.id

			},
			/** 类型 */
			leavaType(e) {

				this.list[this.dnum].cate_title = e.name
				this.list[this.dnum].id = e.id
				this.leavaTypeShow = false
			},
			leavaType1(e) {

				this.project = e.name
				this.listobj.ptid = e.id
				this.leavaTypeShow1 = false
			},
			branchShowclose() {
				this.branchShow = false
			},
			branchShowclose1() {
				this.branchShow1 = false
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @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.fileArray.push(arr1.data)


				// 强制更新视图
				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);
			},

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.leave_request {
		position: relative;
		padding-bottom: 100px;
	}

	.leave_box,
	.flow_path {
		width: 100%;
		padding: 0 28.07rpx;
		background: #fff;
		margin-bottom: 35.09rpx;
		padding-bottom: 28.07rpx;
	}

	.bot_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 87.72rpx;

		>view {
			width: 50%;
			text-align: center;
			line-height: 87.72rpx;
		}

		.reset {
			background-color: #fff;
		}

		.submit_btn {
			color: #fff;
			height: 87.72rpx;
			background: $theme-oa-color;
		}
	}

	.leava_type {
		height: 100rpx;
		border-bottom: 1px solid #999;

		.title {
			font-size: 31.58rpx;
		}
	}

	.cont_cell {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 87.72rpx;
		border-bottom: 1px solid #f7f7f7;
input {
			width: 480rpx;
			

		}
		.title {
			font-size: 31.58rpx;
		}
	}

	// 审批流程
	.audit_process {

		.process_item {
			position: relative;
			height: 100%;
			margin: 17.54rpx 0;
		}

		:last-child {
			.circle {
				&::before {
					display: none;
				}
			}
		}

		.tag {
			font-size: 21.05rpx;
			color: #fff;
			padding: 0 4px;
			margin-left: 10.53rpx;
			background-color: #3c9cff;
			border-radius: 2px;
		}

		.verifier {
			margin: 17.54rpx 0;
		}
	}


	.record {
		position: relative;
		margin-bottom: 14.04rpx;

		.circle {
			width: 31.58rpx;
			height: 31.58rpx;
			background-color: #fff;
			border: 2px solid #34A853;
			border-radius: 50%;
			margin: 5px;
			display: flex;
			flex-direction: column;
			align-items: center;

			&::before {
				content: "";
				display: block;
				position: absolute;
				clear: both;
				width: 1px;
				height: 100%;
				background-color: rgba(204, 204, 204, 0.5);
				margin: 31.58rpx;
			}
		}

		.text {

			margin-left: 7.02rpx;
		}
	}

	.circle {
		width: 31.58rpx;
		height: 31.58rpx;
		background-color: #fff;
		border: 2px solid #34A853;
		border-radius: 50%;
		margin: 0 5px;
		display: flex;
		flex-direction: column;
		align-items: center;

		&::before {
			content: "";
			display: block;
			position: absolute;
			clear: both;
			width: 1px;
			height: 100%;
			background-color: rgba(204, 204, 204, 0.5);
			margin: 31.58rpx;
		}
	}

	// 附件
	.upload_box {
		padding: 17.54rpx;
		background-color: #F7F7F7;
		border-radius: 4px;

		.title {
			font-size: 28.07rpx;
		}

		.text {
			margin-top: 7.02rpx;
			font-size: 21.05rpx;
			color: #999;
		}
	}

	.file_name {
		width: 526.32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.file {
		padding: 17.54rpx;
		border-radius: 4px;
		border: 1px solid #F2F2F2;
		margin: 17.54rpx 0;

		.file_size {
			margin-top: 7.02rpx;
		}

		.file_size,
		.upload_people {
			font-size: 21.05rpx;
			color: #999;
		}
	}
</style>