<template>
	<div class="SalesAssessmentCont">
		<div class="SalesAssessmentList">
			<div class="SalesAssessmentItem" v-for="item in dataList">
				<div class="top">
					<i class="iconfont" :class="item.icon"></i>
					<p class="tit">{{item.taskTypeStr}}</p>
					<p class="num">{{$t('salesModule.ZB')}}：{{item.ratio}}%</p>
				</div>
				<div class="bottom">
					{{item.requireScore}}<i class="iconfont icon-bianji-smal"  @click="getDetail(item)"></i>
				</div>
			</div>
		   
		   <div class="dateNotice" v-if="isOk==1">
		   	   <i class="iconfont icon-zanwushuju"></i> 
		   	   <p>{{$t('salesModule.NoConfiguration')}}{{messageNotice}}</p>
		   	   <p>{{$t('salesModule.ClickToEdit')}}“<i class="iconfont icon-bianji-smal"></i>”{{$t('salesModule.LJPZ')}}</p>
		   </div>
		   
		    <div class="dateNotice" v-else-if="isOk==2">
		   	   <i class="iconfont icon-kong-zhanbifenpeibudui"></i> 
		   	   <p>{{$t('salesModule.reMindNow')}}<span style="color:#E95252;">{{num}}%</span>{{$t('salesModule.ZBFP')}}</p>
		   	   <p>{{$t('salesModule.ZBFPYX')}}</p>
		   	   <p>{{$t('salesModule.ClickToEdit')}}“<i class="iconfont icon-bianji-smal"></i>”{{$t('salesModule.CXFP')}}</p>
		   </div>
		
		</div>
		
		<div class="SalesAssessmentLayer" v-if="isShow">
			<p class="addTaskTitle">
				{{$t('salesModule.NLPG')}}
				<span class="fr">
					<input type="button" :value="$t('pub.cancelBtn')" class="hollowFixedBtn" @click="resetForm(),isShow=false"/>
	    			<input type="button" :value="$t('pub.saveBtn')" class="normalBtn"  @click="submitForm('msg')"/>	
				</span>
			</p>
			<el-form :model="msg" :rules="rules" ref="msg" label-width="120px" >
	    		 <el-form-item  :label="$t('salesModule.NLMC')" >
	                 <el-input class='w150' v-model='name' type="text" disabled ></el-input>
	             </el-form-item>
	             <el-form-item  :label="$t('salesModule.NLMFYQ')" prop='RequireScore'>
	                 <el-input class='w150' :placeholder="$t('salesModule.ShruNum')" v-model='msg.RequireScore' type="text" ></el-input>
	             </el-form-item>
	             <el-form-item  :label="$t('salesModule.NLZB')" prop='Ratio'>
	                 <el-input class='w150' :placeholder="$t('salesModule.ShruBFB')" v-model='msg.Ratio' type="text" ></el-input>
	             </el-form-item>
	    	</el-form>
		</div>
	</div>
</template>

<script>
	export default {
    data(){
    	return{
    		isOk:0,
    		isShow:false,
    		num:'',
    		name:'',
    		messageNotice:'',
    		msg:{
    			RequireScore:'',
    			Ratio:'',
    			id:0,
    			SellType:0,
    		},
    		rules:{
				RequireScore:[
				  { required: true, message:this.$t('pub.pleaseImport'), trigger: 'blur' },
				  {pattern: /^\d*$/, message:this.$t('rule.OnlyNumber')}
				],  
				Ratio:[
				  { required: true, message:this.$t('pub.pleaseImport'), trigger: 'blur' },
				  {pattern: /^\d*$/, message:this.$t('rule.OnlyNumber')}
				]
    		},
    		dataList:[]
	    	}
	    },
		methods: {
			getDetail(obj){
				this.isShow=true
				this.name=obj.taskTypeStr
				this.msg.SellType=obj.sellType
				if(obj.id==0){
					this.msg.RequireScore=''
					this.msg.Ratio=''
				}else{
					this.apipost('TaskManagemnet_get_GetSellBaseCapacity',{ID:obj.id},res=>{
						if(res.data.resultCode==1){
							this.msg=res.data.data
						}else{
						}
					},err=>{})					
				}
			},
	        addData(){
	        	this.apipost('TaskManagemnet_get_SetSellBaseCapacity',this.msg,res=>{
	        		if(res.data.resultCode==1){
	        			this.getList()
	        			this.isShow=false
	        			this.$message.success(res.data.message)
	        		}else{
	        			this.$message.error(res.data.message)
	        		}
	        	},err=>{})
	        },			
			submitForm(addMsg) {//提交创建、修改表单
	            this.$refs[addMsg].validate((valid) => {
	                if (valid) {
	                    this.addData()
	                } else {
	                    return false;
	                }
	            });
	        },
	        resetForm() {//弹出框取消 初始化谈框内表单
	         this.$refs['msg'].resetFields();
	        },
			getList(){
				
				let icon=['icon-bumen','icon-jinrixiaoshoue','icon-banben','icon-xinzengkehu-copy','icon-jihua']
				this.apipost('TaskManagemnet_get_GetSellBaseCapacityList',{},res=>{
					if(res.data.resultCode==1){
						this.messageNotice=res.data.message
						let num=100
						res.data.data.forEach((item,index)=>{
								item['icon']=icon[index]
								num-=item.ratio
							})
							if	(num==100){
								if(this.messageNotice.length>0)	{
									this.isOk=1
									this.num=num
								}else{
									this.isOk=0
									this.num=num
								}
							}
							else if(num>0&&num<100)
							{
								this.isOk=2
								this.num=num
							}else if(num==0){
								this.isOk=0
							}
						this.dataList=res.data.data
					}
				},err=>{})
			},
		},
	    mounted() {
	    	this.getList()
	    },
    }
</script>


<style>
	.SalesAssessmentCont{position: absolute; left: 0; top:70px; bottom: 0; right: 0;}
	.SalesAssessmentCont .SalesAssessmentList{padding-left:20px; width: 100%;}
	.SalesAssessmentCont .SalesAssessmentItem{float: left; width: 300px; height: 202px;border:1px solid #e6e6e6; background: #2AAEF2; margin: 0 30px 30px 0; border-radius: 4px; text-align: center;}
	.SalesAssessmentCont .SalesAssessmentItem .top{height: 120px; color: #fff; padding: 33px 0; position: relative;}
	.SalesAssessmentCont .SalesAssessmentItem .top>i{position: absolute;color: #fff; font-size: 180px; right: -35px; top: -50px; opacity: 0.3;}
	.SalesAssessmentCont .SalesAssessmentItem .top p.tit{font-size: 18px;font-weight: bold;letter-spacing: 2px;}
	.SalesAssessmentCont .SalesAssessmentItem .top p.num{font-size: 14px;margin-top: 10px;}
	.SalesAssessmentCont .SalesAssessmentItem .bottom{height: 80px; line-height:80px; font-size: 30px; color: #2AAEF2; border-radius: 0 0 4px 4px; background: #fff; font-family: helvetica; font-weight: bold;}
	.SalesAssessmentCont .SalesAssessmentItem .bottom>i{color: #999; position: relative; z-index: 99; font-size: 16px; vertical-align: middle; cursor: pointer; margin: -5px 0 0 5px;}
	.SalesAssessmentCont .SalesAssessmentLayer{position:absolute; padding:0 20px; left: 0; bottom: 0; width: 100%; height:120px; z-index: 5; background: #ffffff;  border-top: 1px solid #D2D2D2;}
	.SalesAssessmentCont .SalesAssessmentLayer .addTaskTitle{height: 14px; line-height: 14px; border-left:3px solid #E95252; font-size: 14px; color: #333; margin: 20px 0 25px 0; text-indent: 10px;}
    .SalesAssessmentLayer>form>div{float: left; width:350px;}
    .SalesAssessmentCont .dateNotice{text-align: center; color: #ccc; margin: 50px 0;}
    .SalesAssessmentCont .dateNotice>p{line-height:30px;}
    .SalesAssessmentCont .dateNotice>i{font-size: 120px;}
</style>