<template>
	<view class="fullHeight">
		<view  class="fixedheader">
			<headers :showBack="true">
			<view class="headerName">
				值班记录1#15
			</view>
		</headers>
		</view>
		
		<scroll-view class="smallHeight" :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }" scroll-y>
		<view class="form_box">
			<view class="form_item">
				<view class="form_label">浇筑日期<text class="start">*</text></view>
				<view class="form_vaule">
					<!-- <picker mode="date" :value="formData.date"  @change="bindDateChange">
					    <view class="uni-input">{{formData.date}}<text v-if="!formData.date" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
					</picker> -->
					<view class="uni-input">{{formData.pourTime}}</view>
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">天气<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.weather" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">商品砼供应商<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.concreteSupplier" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">施工人员数量<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.builderNum" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">总包值班人姓名<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.contractorDutyName" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">砼振捣棒数量<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.vibratingTubeNum" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">试块组数<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.testBlockNum" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">浇筑开始时间<text class="start">*</text></view>
				<view class="form_vaule">
					<picker mode="date" :value="formData.pourStartTime"  @change="bindDateChange">
					    <view class="uni-input">{{formData.pourStartTime}}<text v-if="!formData.pourStartTime" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">浇筑结束时间<text class="start">*</text></view>
				<view class="form_vaule">
					<picker mode="date" :value="formData.pourEndTime"  @change="bindDateChange2">
					    <view class="uni-input">{{formData.pourEndTime}}<text v-if="!formData.pourEndTime" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">坍落度检测<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" v-model="formData.slumpCheck" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item form_item2" v-if="!isAdd">
				<view class="form_label">交班记录<text class="start">*</text></view>
				<view class="list">
					<view class="list_item" v-for="(item,index) in handoverList" :key="index">
						<view class="title">{{item.dutyName}}</view>
						<view class="list_info"><text>值班开始时间：</text>{{item.dutyStartTime}}</view>
						<view class="list_info"><text>值班开始时间：</text>{{item.dutyEndTime}}</view>
						<view class="list_info"><text>是否连续浇筑：</text>{{item.breakType == 1 ? '否':item.breakType == 2 ? '是':'--'}}</view>
						<view class="list_table" v-if="item.breakType == 2">
							<view class="t_header">
								<view class="t_thd1">未连续浇筑时长</view>
								<view class="t_thd2">未连续浇筑时间</view>
							</view>
							<view class="t_content">
								<view class="t_th" v-for="(item2,index2) in JSON.parse(item.breakContent)" :key="index2">
									<view class="t_td">
										<text>{{item2.hours}}</text>
									</view>
									<view class="t_td picker_box">
										<text>{{item2.content}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="add_list_item" @click="showDialog"><uni-icons2 type="plus-filled" color="#5181F6" size="18"></uni-icons2>添加</view>
			</view>
			<view class="form_item form_item2" style="border: 0" v-if="!isAdd">
				<view class="form_label">全景照片<text class="start">*</text>
					<view class="add_img" @click="uploadImage"><uni-icons2 type="plus-filled" color="#5181F6" size="18"></uni-icons2>添加照片</view>
				</view>
				<view class="img_list">
					<view class="img_item" v-for="(item,index) in imageList" :key="index" >
						<image :src="url_config+'image/'+item.imageUrl" @click="previewImage(url_config+'image/'+item.imageUrl)"></image>
						<view class="img_title"><text class="img_name">{{item.imageName}}</text>   <text>{{item.uploadTime}}</text></view>
						<uni-icons2 type="trash" color="#F56C6C" @click="deleteImg(item.id)"></uni-icons2>
					</view>
				</view>
			</view>
		</view>
		
		</scroll-view>
		<view class="add_btn" @click="submiForm">保存</view>
		<dialogs class="formDialog success_dialog" ref="dialogs">
			<template v-slot:content>
				<view class="dialog-title">
					新增交班记录
				</view>
				<view class="dialog-content">
					<scroll-view class="scroll_wrap" :scroll-y="true">
						<view class="dialog_form">
							<view class="form_cell">
								<view class="form_cell_label">值班人<text>*</text></view>
								<input type="text" v-model="formData2.dutyName" placeholder="请输入" />
							</view>
							<view class="form_cell">
								<view class="form_cell_label">值班开始时间<text>*</text></view>
								<view style="flex:1;" @click="showPickerDate(1)">
								    <view class="uni-input" style="display: flex;justify-content: space-between;">{{formData2.dutyStartTime}}<text v-if="!formData2.dutyStartTime" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
								</view>
								<!-- <picker mode="date" :value="formData2.dutyStartTime"  @change="bindDateChange3">
								    <view class="uni-input">{{formData2.dutyStartTime}}<text v-if="!formData2.dutyStartTime" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
								</picker> -->
							</view>
							<view class="form_cell">
								<view class="form_cell_label">值班结束时间<text>*</text></view>
								<view style="flex:1;" @click="showPickerDate(2)">
								    <view class="uni-input" style="display: flex;justify-content: space-between;">{{formData2.dutyEndTime}}<text v-if="!formData2.dutyEndTime" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
								</view>
								<!-- <picker mode="date" :value="formData2.dutyEndTime"  @change="bindDateChange4">
								    <view class="uni-input">{{formData2.dutyEndTime}}<text v-if="!formData2.dutyEndTime" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
								</picker> -->
							</view>
							<view class="form_cell">
								<view class="form_cell_label">是否未连续浇筑<text>*</text></view>
								<switch :checked="formCheck" @change="switchChange" />
							</view>
							<view class="form_cell_table" v-if="formCheck">
								<view class="t_header">
									<view class="t_thd1">未连续浇筑时长</view>
									<view class="t_thd2">未连续浇筑时间</view>
								</view>
								<view class="t_content" >
									<view class="t_th" v-for="(item,index) in breakContentForm" :key="index">
										<view class="t_td">
											<input type="text" v-model="item.hours" placeholder="请输入" />
										</view>
										<view class="t_td picker_box" @click="showWPicker(index)">
											<input type="text" disabled v-model="item.content" placeholder="请选择" />
											<uni-icons2 type="arrowdown" size="14" color="#94969F"></uni-icons2>
										</view>
										<view class="close_btn" @click="removeForm(index)">
											<uni-icons2 type="clear" size="14" color="#94969F"></uni-icons2>
										</view>
									</view>
								</view>
								<view class="add_list_item" @click="addForm"><uni-icons2 type="plus-filled" color="#5181F6" size="18"></uni-icons2>添加</view>
							</view>
						</view>
					</scroll-view>
					
					
					<mx-date-picker :show="showPicker" format="yyyy-mm-dd hh:ii" type="rangetime" :value="dateTime" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" @confirm="confirmPicker" @cancel="closePicker" />
				</view>
				<view class="dialog-btn">
					<view class="cancle-btn" @click="cancleReply">取消</view>
					<view class="primary-btn" @click="submitReply">提交</view>
				</view>
			</template>
		</dialogs>
		<w-picker
		    :visible.sync="visible1"
		    mode="date" 
		    startYear="2017" 
		    endYear="2029"
		    :current="true"
		    fields="second"
		    @confirm="onConfirm"
		    @cancel="onCancel"
		    :disabled-after="false"
		    ref="date1" 
		></w-picker>
	</view>
</template>

<script>
import dialogs from '../../../components/dialog/dialog.vue'
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default{
	data(){
		return{
			formData:{
				weather: '',
				pourTime: '2021-11-30',
				concreteSupplier: '',
				contractorDutyName: '',
				pourEndTime: '',
				pourStartTime: '',
				pouringId: '',
				projectSn: '',
				slumpCheck: '',
				testBlockNum: '',
				vibratingTubeNum: '',
				builderNum: ''
			},
			formData2:{
				dutyName: '',
				dutyStartTime: '',
				dutyEndTime: ''
			},
			showPicker: false,
			formCheck: false,
			dateTime: [],
			checkTime: '',
			handoverList: [],
			breakContent: [],
			imageList: [],
			pouringId: '',
			isAdd: true,
			breakContentForm: [{
				hours: '',
				content: ''
			}],
			editIndex: 0,
			visible1: false,
			visible2: false,
			editIndex2: 1
		}
	},
	components:{
		dialogs,
		MxDatePicker
	},
	onShow(){
		this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
	},
	onLoad(val){
		this.pouringId = val.id
		this.loadData()
	},
	methods:{
		onConfirm(e){
			console.log(e.value)
			if(this.editIndex2 == 1){
				this.formData2.dutyStartTime = e.value
			} else if(this.editIndex2 == 2){
				this.formData2.dutyEndTime = e.value
			}
		},
		onCancel(e){
			this.visible1 = false
		},
		showPickerDate(type){
			this.editIndex2 = type
			this.visible1 = true
		},
		removeForm(index){
			this.breakContentForm.splice(index,1)
		},
		addForm(){
			this.breakContentForm.push({
				hours: '',
				content: ''
			})
		},
		loadData(){
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundOnDutyRecord/selectOnDutyRecordByPouringId',
				data: {pouringId: that.pouringId},
				method: "POST",
				success(res) {
					console.log(res)
					if(res.result){
						that.isAdd = false
						that.formData = res.result
						that.imageList = res.result.imageList
						that.handoverList = res.result.handoverList
					}
				}
			})
		},
		//上传附件
		uploadImage() {
			var that = this
			uni.chooseImage({
				// count: 5 - that.imageList.length,
				success(res) {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'files',
						success: (uploadFileRes) => {
							let data = {
								imageName: res.tempFiles[0].name,
								imageUrl: JSON.parse(uploadFileRes.data).data[0].imageUrl,
								dutyId: that.formData.id
							};
							// console.log(res.tempFiles[0].name)
							that.sendRequest({
								url: 'xmgl/massReboundDutyImageRecord/add',
								data: data,
								method: "POST",
								success(res) {
									uni.showToast({
										title: '保存成功！'
									})
									that.loadData()
									console.log(res)
								}
							})
							// that.imageList.push(data)
						}
					});
				}
			})
		},
		//删除附件
		deleteImg(val) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该附件吗?',
				success: function(res) {
					if (res.confirm) {
						that.sendRequest({
							url: 'xmgl/massReboundDutyImageRecord/delete',
							data: {id: val},
							method: "POST",
							success(res) {
								uni.showToast({
									title: '删除成功！'
								})
								that.loadData()
								console.log(res)
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		
		},
		
		//预览图片
		previewImage(url) {
			uni.previewImage({
				urls: [url]
			})
		},
		submiForm(){
			console.log(this.formData)
			this.formData.projectSn = this.projectSn
			this.formData.pouringId = this.pouringId
			if(this.formData.concreteSupplier == ''){
				uni.showToast({
					title: '请输入商品砼供应商',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.builderNum == ''){
				uni.showToast({
					title: '请输入施工人员数量',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.contractorDutyName == ''){
				uni.showToast({
					title: '请输入总包值班人姓名',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.vibratingTubeNum == ''){
				uni.showToast({
					title: '请输入砼振捣棒数量',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.testBlockNum == ''){
				uni.showToast({
					title: '请输入试块组数',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.pourStartTime == ''){
				uni.showToast({
					title: '请选择浇筑开始时间',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.pourEndTime == ''){
				uni.showToast({
					title: '请选择浇筑结束时间',
					icon: 'none'
				})
				return false;
			}
			if(this.formData.slumpCheck == ''){
				uni.showToast({
					title: '请输入坍落度检测',
					icon: 'none'
				})
				return false;
			}
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundOnDutyRecord/saveOrUpdateRecord',
				data: this.formData,
				method: "POST",
				success(res) {
					console.log(res)
					uni.showToast({
						title: '保存成功！'
					})
					uni.navigateBack({
						
					})
				}
			})
		},
		confirmPicker(e){
			console.log(e.value)
			this.breakContentForm[this.editIndex].content = e.value[0] + ' 至 ' + e.value[1]
			this.dateTime = e.value
			// this.checkTime = e.value[0] + ' 至 ' + e.value[1]
			this.showPicker = false
		},
		closePicker(){
			console.log(123)
			this.showPicker = false
		},
		showWPicker(index){
			this.editIndex = index
			this.showPicker = true
		},
		switchChange(e){
			console.log(e.detail.value)
			this.formCheck = e.detail.value
		},
		cancleReply(){
			this.formCheck = false
			this.formData2 = {
				dutyName: '',
				dutyStartTime: '',
				dutyEndTime: ''
			}
			this.breakContentForm = [{
				hours: '',
				content: ''
			}]
			this.$refs.dialogs.hideFn2()
		},
		submitReply(){
			console.log(this.formData2, this.breakContentForm)
			if(!this.formData2.dutyName){
				uni.showToast({
					title: '请输入值班人',
					icon: 'none'
				})
				return false;
			}
			if(!this.formData2.dutyStartTime){
				uni.showToast({
					title: '请选择值班开始时间',
					icon: 'none'
				})
				return false;
			}
			if(!this.formData2.dutyEndTime){
				uni.showToast({
					title: '请选择值班结束时间',
					icon: 'none'
				})
				return false;
			}
			let flag = true
			if(this.formCheck){
				this.breakContentForm.forEach(item=>{
					if(!item.hours && !item.checkTime){
						uni.showToast({
							title: '请填写完整信息',
							icon: 'none'
						})
						flag = false
					}
				})
			}
			if(!flag){
				return false;
			}
			let params = {
				...this.formData2,
				breakType: this.formCheck ? 2:1,
				breakContent: this.formCheck ? JSON.stringify(this.breakContentForm):JSON.stringify([]),
				dutyId: this.formData.id,	
			}
			let that = this
			this.sendRequest({
				url: 'xmgl/massReboundHandoverRecord/add',
				data: params,
				method: "POST",
				success(res) {
					console.log(res)
					uni.showToast({
						title: '保存成功！'
					})
					that.cancleReply()
					that.loadData()
				}
			})
			
			// this.$refs.dialogs.hideFn2()
		},
		bindDateChange(e){
			this.formData.pourStartTime = e.detail.value
		},
		bindDateChange2(e){
			this.formData.pourEndTime = e.detail.value
		},
		bindDateChange3(e){
			this.formData2.dutyStartTime = e.detail.value
		},
		bindDateChange4(e){
			this.formData2.dutyEndTime = e.detail.value
		},
		showDialog(){
			this.$refs.dialogs.showFn()
		}
	}
}
</script>

<style lang="scss" scoped>
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.form_box{
		.form_item{
			height: 90rpx;
			border-bottom: 1rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			.form_label{
				color: #2A2E3F;
				width: 40%;
				line-height: 90rpx;
				font-size: 28rpx;
				.start{
					color: #F65352;
					line-height: 90rpx;
				}
			}
			.form_vaule{
				flex: 1;
				height: 90rpx;
				font-size: 28rpx;
				uni-input{
					height: 100%;
					font-size: 28rpx;
				}
				.uni-input{
					width: 100%;
					height: 90rpx;
					position: relative;
					line-height: 90rpx;
					.right_arrow{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	
		.form_item2{
			height: auto;
			display: block;
			padding-bottom: 40rpx;
			.form_label{
				position: relative;
				width: 100%;
				.add_img{
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					align-items: center;
					color: #5181F6;
					uni-text{
						margin-right: 10rpx;
					}
				}
			}
			.list{
				font-size: 28rpx;
				margin-bottom: 6rpx;
				.list_item{
					padding: 30rpx 36rpx;
					padding-right: 28rpx;
					border-radius: 10rpx;
					margin-bottom: 30rpx;
					box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
					.title{
						font-weight: 600;
						margin-bottom: 10rpx;
					}
					.list_info{
						display: flex;
						margin-bottom: 10rpx;
						uni-text{
							white-space: nowrap;
							color: rgba(49, 50, 97, 0.6);
						}
					}
				}
			}
			.add_list_item{
				width: 252rpx;
				height: 56rpx;
				border: 1px solid #5181F6;
				// text-align: center;
				line-height: 56rpx;
				color: #5181F6;
				margin: 0 auto;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				uni-text{
					margin-right: 8rpx;
				}
			}
			.img_list{
				.img_item{
					display: flex;
					font-size: 24rpx;
					color: rgba(42, 46, 63, 0.8);
					margin-bottom: 20rpx;
					uni-text{
						line-height: 44rpx;
						margin-right: 20rpx;
					}
					uni-image{
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	.bottom_nav{
		background: rgba(#5181F6,0.1);
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
		height: 152rpx;
		width: 100%;
		justify-content: space-around;
		.bottom_nav_item{
			width: 100rpx;
			height: 100rpx;
			border: 1rpx solid rgba(81, 129, 246, 0.6);
			border-radius: 50%;
			background: #fff;
			font-size: 28rpx;
			color: #5181F6;
			box-shadow: 0px 4rpx 4px 0px rgba(81, 129, 246, 0.3);
			text-align: center;
			padding: 10rpx;
			box-sizing: border-box;
		}
	}
	.bottom_box{
		position: fixed;
		bottom: 40rpx;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		.bottom_btn{
			height: 100rpx;
			width: 280rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 40rpx;
		}
		.error_btn{
			color: #F65352;
			border: 1rpx solid #F65352;
			margin-right: 80rpx;
		}
		.success_btn{
			color: #fff;
			background: #5181F6;
		}
	}
	.add_btn{
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		width: 88%;
		transform: translateX(-50%);
		height: 100rpx;
		background: #5181F6;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
	}
	.smallHeight{
		// padding-bottom: 150rpx;
		height: calc(100% - 150rpx);
		box-sizing: border-box;
	}
	.formDialog{
		:deep(.dialogContent){
			width: 90%;
			top: auto;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%, 0);
			border-radius: 30rpx;
		}
		.dialog-title{
			padding: 0 40rpx ;
			font-weight: 600;
			padding-top: 40rpx;
			margin-bottom: 60rpx;
			font-size: 36rpx;
		}
		.dialog-content{
			padding: 0 40rpx;
			padding-bottom: 40rpx;
			height: 800rpx;
			.scroll_wrap{
				height: 100%;
			}
			.dialog_form{
				padding-bottom: 40rpx;
				.form_cell{
					display: flex;
					font-size: 28rpx;
					margin-bottom: 40rpx;
					align-items: center;
					justify-content: space-between;
					.form_cell_label{
						width: 240rpx;
						uni-text{
							color: #F76B6A;
						}
					}
					uni-input{
						font-size: 28rpx;
						flex: 1;
					}
					uni-picker{
						flex: 1;
						:deep(.uni-input){
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
					uni-switch{
						transform:scale(0.7);
					}
				}
				.form_cell_table{
					.t_header{
						display: flex;
						font-size: 28rpx;
						color: rgba(#2A2E3F, 0.8);
						margin-bottom: 12rpx;
						.t_thd1{
							width: 200rpx;
						}
						.t_thd2{
							text-align: center;
							width: 400rpx;
						}
					}
					.t_content{
						border-left: 1px solid #E7E7E7;
						border-top: 1px solid #E7E7E7;
						display: inline-block;
						margin-bottom: 40rpx;
						.t_th{
							display: flex;
							height: 66rpx;
							position: relative;
							uni-input{
								width: 188rpx;
								font-size: 28rpx;
								border-right: 1px solid #e7e7e7;
								border-bottom: 1px solid #e7e7e7;
								height: 66rpx;
								padding: 0 16rpx;
								box-sizing: border-box;
							}
							.picker_box{
								width: 360rpx;
								font-size: 28rpx;
								padding: 0 16rpx;
								border-right: 1px solid #e7e7e7;
								border-bottom: 1px solid #e7e7e7;
								height: 66rpx;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								justify-content: space-between;
								uni-input{
									flex: 1;
									border: 0;
								}
							}
							.close_btn{
								position: absolute;
								// height: 28rpx;
								right: -40rpx;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
					.add_list_item{
						width: 252rpx;
						height: 56rpx;
						border: 1px solid #5181F6;
						// text-align: center;
						line-height: 56rpx;
						color: #5181F6;
						margin: 0 auto;
						border-radius: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						uni-text{
							margin-right: 8rpx;
						}
					}
				}
			}
		}
		.dialog-btn{
			width: 100%;
			height: 94rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 60rpx;
			.cancle-btn{
				height: 100rpx;
				width: 236rpx;
				text-align: center;
				line-height: 100rpx;
				background: #fff;
				color: rgba(#30305F, 0.6);
				border-radius: 50rpx;
				border: 1rpx solid rgba(#30305F,0.3);
				margin-right: 112rpx;
			}
			.primary-btn{
				height: 100rpx;
				width: 236rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 50rpx;
				color: #fff;
				background: #5181F6;
			}
		}
	}
	.list_table{
		.t_header{
			display: flex;
			font-size: 28rpx;
			color: rgba(49, 50, 97, 0.6);
			margin-bottom: 12rpx;
			.t_thd1{
				width: 200rpx;
			}
			.t_thd2{
				text-align: center;
				flex: 1
			}
		}
		.t_content{
			border-left: 1px solid #E7E7E7;
			border-top: 1px solid #E7E7E7;
			color: rgba(#313261, 0.6);
			font-size: 26rpx;
			// display: inline-block;
			.t_th{
				display: flex;
				height: 66rpx;
			}
			.t_td{
				width: 120rpx;
				text-align: center;
				line-height: 66rpx;
				border-right: 1px solid #E7E7E7;
				border-bottom: 1px solid #E7E7E7;
			}
			.picker_box{
				flex: 1;
			}
		}
	}
	.img_title{
		display: flex;
		.img_name{
			display: block;
			width: 240rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>
