<template>
	<view >
		<view class="bgtop"></view>
		<uni-forms :modelValue="datainfo" ref="form" :rules="rules">
		<view class="addbox">
			<view class="boxs pdbox" style="padding-bottom: 2rpx;">
				<!-- <view class="titbox mb14">
					<view class="tit flexc">
						<image :src="titimg"></image>
						<view>基本详情</view>
					</view>
				</view> -->
				
				<picker  range-key='label' :value="jcidx" :range="jcList"  @change='bindDateChangea'>
					<uni-forms-item label="考核届次" name="boundary" required>
						<view class="lbtabp">
							<view class="lbtabp">
								<view v-if="datainfo.boundary&&!boundary">{{statusFormat(datainfo.boundary,jcList,'jc')}}</view>
								<view v-else :class="boundary?'':'coa'">{{boundary||"请选择考核届次"}}</view>
							</view>
						</view>
					</uni-forms-item>
				</picker>
				<picker  range-key='label' :value="khlxidx" :range="khlxList"  @change='bindDateChangeb'>
					<uni-forms-item label="考核类型" name="checkType" required>
						<view class="lbtabp">
							<view v-if="datainfo.checkType&&!checkType">{{statusFormat(datainfo.checkType,khlxList,'khlx')}}</view>
							<view v-else :class="checkType?'':'coa'">{{checkType||"请选择考核类型"}}</view>
							<!-- <view :class="checkType?'':'coa'">{{checkType || "请选择考核类型"}}</view> -->
						</view>
					</uni-forms-item>
				</picker>
				<picker  range-key='label' :value="jflxbidx" :range="jflxList"  @change='bindDateChangec'>
					<uni-forms-item label="加分类型" name="bonusType" required>
						<view class="lbtabp">
							<view v-if="datainfo.bonusType&&!bonusType">{{statusFormat(datainfo.bonusType,jflxList,'jflx')}}</view>
							<view v-else :class="bonusType?'':'coa'">{{bonusType||"请选择加分类型"}}</view>
							<!-- <view :class="bonusType?'':'coa'">{{bonusType || "请选择加分类型"}}</view> -->
						</view>
					</uni-forms-item>
				</picker>
<!-- 				<picker  mode="date"   @change='bindDateChanged'>
					<uni-forms-item label="加分时间" name="bonusTime" required>
						<view class="lbtabp">
							<view :class="datainfo.bonusTime?'':'coa'">{{datainfo.bonusTime || "请选择加分时间"}}</view>
						</view>
					</uni-forms-item>
				</picker> -->
				<uni-forms-item label="加分时间" name="bonusTime" required >
					<!-- <view class="lbtabp" >
						<uni-datetime-picker  :border="false" placeholder="请选择加分时间"  type="datetime" :clear-icon="false" v-model="datainfo.bonusTime" @maskClick="bindDateChanged" />
					</view> -->
					<view class="lbtabp">
						<uni-datetime-picker v-model="datainfo.bonusTime">
						<view :class="datainfo.bonusTime?'':'coa'">{{datainfo.bonusTime || "请选择加分时间"}}</view>
						</uni-datetime-picker>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="分值" name="score" required>
					<uni-easyinput :inputBorder="false" type="number" v-model="datainfo.score" placeholder="请输入分值" />
				</uni-forms-item>
			</view>
			<view class="boxs pdboxa">
				<view class="titbox mb20">
					<view class="tit flexc">
						<view @click="timeshow=true">加分事由</view>
					</view>
				</view>
				<textarea placeholder="请输入加分事由…" v-model="datainfo.bonusReason"></textarea>
			</view>
			<view class="addbtn">
				<!-- <view class="btn btn1" @click="getZanFnt">暂存</view> -->
				<view class="btn btn2" style="flex: 1;" @click="getSubmit">提交</view>
			</view>
		</view>
		</uni-forms>
	</view>
</template>

<script>
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getBonusAddFn,getBonusEditFn,getBonusDetailFn} from "@/api/mine/report.js"
	import { selectValueKey } from '@/utils/common.js';
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	export default{
		data(){
			return{

				titimg:require("@/work/static/images/titbg.png"),
				rimg:require("@/work/static/images/rimg.png"),
				datainfo:{
					"boundary":"",//考核界次
					"checkType":"",//考核类型
					"bonusType":"",//加分类型
					"bonusReason":"",//加分事由
					"bonusTime":"",//加分时间
					"score":"",//分数
				},
				rules: {
				  boundary: {rules: [{required: true,errorMessage: '请选择考核届次'} ]},
				  checkType: {rules: [{required: true,errorMessage: '请选择考核类型'} ]},
				  bonusType: {rules: [{required: true,errorMessage: '请选择加分类型'} ]},
				  bonusTime: {rules: [{required: true,errorMessage: '请选择加分时间'} ]},
				  score: {rules: [{required: true,errorMessage: '请输入分值'} ]},
				  bonusReason: {rules: [{required: true,errorMessage: '请输入加分事由'} ]},
				},
				userId:this.$store.state.user.userId,
				tzlblabe:'',
				tzlbidx:'',
				id:'',
				editinfo:'',
				jcList:[],
				khlxList:[],
				jflxList:[],
				jcidx:'',
				khlxidx:'',
				jflxbidx:'',
				boundary:"",
				checkType:"",
				bonusType:"",
				timeshow:false,
				id:'',
				ptype:'add'
			}
		},
		onLoad(e) {
			this.init()
			if(e.id){
				this.id=e.id;
				this.getDetail()
			}
			this.ptype=e.type||'add';
		},
		
		methods:{
			kaType(ite,list){
				return selectValue(list, ite);
			},
			statusFormat(ite,list,type) {
				var aite=selectValueKey(list, ite);
				if(type=='jc'){
					this.jcidx=aite.key
				}else if(type=='khlx'){
					this.khlxidx=aite.key
				}else if(type=='jflx'){
					this.jflxbidx=aite.key
				}
				return aite.actions;
			},
			getTimeFn(){
				
			},
			init(){
				//界别 
				getDictionaryFn('circles').then(res=>{
					if(res.code==200&&res.data.length){
						this.jcList = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 考核类型
				getDictionaryFn('check_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.khlxList = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				// 加分类型
				getDictionaryFn('bonus_type').then(res=>{
					if(res.code==200&&res.data.length){
						this.jflxList = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.boundary=this.jcList[val].label;
				this.datainfo.boundary=this.jcList[val].value;
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.checkType=this.khlxList[val].label;
				this.datainfo.checkType=this.khlxList[val].value;
			},
			bindDateChangec(e){
				var val=e.detail.value;
				this.bonusType=this.jflxList[val].label;
				this.datainfo.bonusType=this.jflxList[val].value;
			},
			bindDateChanged(e){
				console.log(e,1)
				// var val=e.detail.value;
				// this.datainfo.bonusTime=val;
			},
			getDetail(){
				getBonusDetailFn(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
					}
				})
			},
			getSubmit(){
				var that=this;
				
				this.$refs.form.validate().then(res => {
					var params=that.datainfo;
					params.userId=that.userId;
					var regex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
					var s=regex.test(this.datainfo.bonusTime);
					if(!s){
						that.$toast("请选择完整的时间")
						return
					}
					if(this.ptype=='add'){
						getBonusAddFn(params).then(res=>{
							if(res.code==200){
								that.$toast("履职加分申请成功")
								setTimeout(function(){
									uni.$emit('lzrefreshlist')
									uni.navigateBack({
										delta:1
									})
								},1200)
							}
						})
					}else{
						getBonusEditFn(params).then(res=>{
							if(res.code==200){
								that.$toast("履职加分修改成功")
								
								setTimeout(function(){
									uni.$emit('lzrefreshlist')
									uni.navigateBack({
										delta:1
									})
								},1200)
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.bgtop{height: 150rpx;background-color: $com-cd3;width: 100%;}
.pdbox{padding: 34rpx 24rpx 16rpx;}
.pdboxa{padding: 34rpx 48rpx 16rpx;}
.addbox /deep/ .uni-forms-item{margin-bottom:20rpx;}
.addbox /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 30rpx;}
.addbox /deep/ .uni-forms-item__label{font-weight: bold;font-size: 30rpx;color: #343434;width: 198rpx !important;padding-left:20rpx;}
.addbox /deep/ .is-required{position: absolute;left: 0;top: 50%;margin-top: -10rpx;}
.addbox /deep/ .uni-data-checklist{display: flex;align-items: center;justify-content: flex-end;}
.addbox /deep/ .uni-easyinput__placeholder-class{font-weight: 500;font-size: 30rpx;color: #AAAAAA;}
.addbox /deep/ .checklist-box{margin-right: 0 !important;margin-left: 40rpx !important;}
.addbox /deep/ .uni-forms-item__error{right: 0;left: auto;margin-top: -18rpx;}

// .addbox /deep/ .uni-forms-item__content{display: flex;align-items: center;}
.addbox /deep/ .uni-date{text-align: right;font-size: 30rpx;}
.addbox /deep/ .uni-input-wrapper{text-align: right;font-size: 30rpx;}
.addbox /deep/ .uni-date__x-input{padding: 0;text-align: right;font-size: 30rpx;}
.addbox /deep/ .uni-date-x{padding: 0;}
// .addbox /deep/ .uniui-calendar::before{display: none;}
.addbox /deep/ .uni-input-placeholder{color:#AAAAAA;font-size: 30rpx;}
.fjadd{
	.btn{font-weight: bold;font-size: 30rpx;color: #1D64E2;margin: 0;display: flex;align-items: center;}
}
.addbox{margin-top: -120rpx;
	padding: 0 24rpx 50rpx;
	.boxs{background: #FFFFFF;border-radius: 30rpx;margin-bottom: 24rpx;overflow: hidden;position: relative;
		.titbox{
			.tit{
				image{width: 32rpx;height: 18rpx;margin-right: 10rpx;}
				view{font-weight: bold;font-size: 32rpx;color: #222327;}
			}
			.titr{width: 146rpx;height: 50rpx;background: #E4EEFF;border-radius: 26rpx;font-weight: 500;font-size: 24rpx;color: #1D64E2;text-align: center;line-height: 50rpx;}
		}
		
		.openbox{display: flex;align-items: center;justify-content: flex-end;font-weight: 500;
font-size: 30rpx;height: 100%;color: #AAAAAA;}
		.edtip{font-weight: 500;font-size: 22rpx;color: #FF0000;
			text{margin: 4rpx 8rpx 0 0;}
			&.pa{position: absolute;right: 0;bottom: -15px;text-align: right;width: 702rpx;}
		}
	}
	
}
	
	// 附件
	.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 12rpx;
		image{margin-right: 18rpx;flex: 0 0 auto;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx;
			image{width: 26rpx;height: 24rpx;}
			}
			.tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
			image{width: 26rpx;height: 26rpx;}
		}
	}
	// 按钮
	.addbtn{display: flex;align-items: center;justify-content: space-between;padding-top: 26rpx;
		.btn{width: 336rpx;height: 80rpx;font-weight: bold;font-size: 30rpx;box-sizing: border-box;border-radius: 40rpx;display: flex;align-items: center;justify-content: center;
			&.btn1{border: 2rpx solid #1D64E2;background: #ffffff;color: #1D64E2;}
			&.btn2{background: #1D64E2;color: #ffffff;}
		}
	}
	.lbtabp{display: flex;align-items: center;flex: 0 0 auto;margin-left: 24rpx;height: 100%;justify-content: flex-end;
		view{font-size: 30rpx;color: #222327;}
	}
.addbox /deep/ .pbbox .ql-editor  p{text-indent: 2rem;}
</style>