<template>
    <div class="item-component-wrap">
        <bread-crumb 
        :curmbFirst="curmbFirst" 
        :curmbSecond="curmbSecond">
        </bread-crumb>
        <div class="component-content screenSet" id="screenSet">
            <div class="search-title">预警邮箱</div>
            <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;" v-for="(item,index) in reportData" :key="index">
                <el-form  label-width="75px" style="width:100%;">
                    <el-col :span="5">
						<el-form-item label="姓名:">
							<el-input clearable v-model="item.userName" size="mini" placeholder="请输入接收人姓名"></el-input>
						</el-form-item>
                    </el-col>
					<el-col :span="5">
					    <el-form-item label="Dr.id:">
					        <el-input clearable v-model="item.doctorId" size="mini" placeholder="请输入doctorId"></el-input>
					    </el-form-item>
					</el-col>
					<el-col :span="9">
					    <el-form-item label="邮箱地址:">
							<el-col :span="12" style="padding-right: 5px;">
								<el-input clearable v-model="item.email" size="mini" placeholder="请输入邮箱前缀"></el-input>
							</el-col>
							<div class='email-h'>@picahealth.com</div>
					    </el-form-item>
					</el-col>
					<el-col :span="2">
						<div class="opt-icon">
							<i class="el-icon-circle-plus-outline" @click="add"></i>
							<i class="el-icon-remove-outline" @click="remove(index)" v-if="index > 0"></i>
						</div>
					</el-col>
					
                    
                </el-form>
            </el-row>
			<div class="opt-btn">
				<el-button type="primary" size="small" @click="save" :disabled="isSaveBack">保存</el-button>
				<el-button size="small" class="button-white" @click="goBack">返回</el-button>
			</div>
           
 
        </div>
		
    </div>
</template>
<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { doUpload, getFilePath } from "../../utils/qiniu-util"
import { validateWord } from "../../utils/validate.js"
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'

let vm = null
export default {
    components: {
        BreadCrumb
    },
    data() {
        return {
            curmbFirst: '组件',
            curmbSecond: '举报设置',
			reportData:[],
			isSaveBack:false,
        }
        
    },
    computed: {
      ...mapGetters([
            '_token',
            'idType'
      ])
    },
	
    created() {

		this.getData()
    },
    // 挂载到Dom完成时
    mounted: function() {
        commonUtil.resizeHeight()
    },
    methods: {
		
		//返回
		goBack(){
			this.$router.back(-1)
		},
		
		//保存
		save(){
			let index = this.handelData(this.reportData)
			console.log(index)
			if(index == 1){
				this.$message({
				  message: '姓名、邮箱或doctorId不能为空！',
				  type: 'warning'
				});
				return;
			}
			if(index == 2){
				this.$message({
				  message: 'doctorId已存在',
				  type: 'warning'
				});
				return;
			}
			if(index == 3){
				this.$message({
				  message: 'doctorId只能是大于0的纯数字！',
				  type: 'warning',
				  
				});
				return;
			}
			let d = this.handelEmail(this.reportData ,2)
			let parm = {
				informConfigs:d 
			}
			//JSON.stringify(this.reportData)
			this.loading = true;
			this.isSaveBack = true;
			this.POST('/interaction/informConfig/insertAdmin',parm).then((res) => {
			    this.loading = false
				
			    if( res.code == '000000' ) {
					this.$message({
					  message: '保存成功！',
					  type: 'success'
					});
			    }else{
					this.$message({
					  message: res.message,
					  type: 'warning'
					});
				}
				setTimeout(()=>{
					this.isSaveBack = false;
				},2000)
			})
		},
		
		
		add(){
			this.reportData.push(
				{
				  
				    "doctorId": '',
				    "email": "",
				    "userName": ""
				},
			)
		},
		
		remove(index){
			 this.reportData.splice(index, 1);
		},
		
		//保存
		saveFun(){
			
		},
		
		handelData(d){
			console.log(d)
			let index  = null,hash = [],r = /^[1-9]+\d*$/;
			for(let i=0;i<d.length;i++){
				
				let parm =  String(d[i].doctorId)
				if(d[i].doctorId == '' || d[i].userName == '' || d[i].email == ''){
					index = 1
					break;
				}
				if(!r.test(d[i].doctorId)){
					console.log(d[i].doctorId)
					index = 3
					break;
				}
				if(hash.indexOf(parm) == -1){
					hash.push(parm)
				}else{
					index = 2;
					break;
				}
				
				
				
			}
			return index;
		},
		
		//处理邮箱展示
		handelEmail(d,str){
			let A = [],parm = {};
			for(let i=0;i<d.length;i++){
				parm = {...d[i]}
				if(str == 1){
					parm['email'] = d[i].email.split("@")[0]
				}else if(str == 2){
					parm['email'] = d[i].email + '@picahealth.com'
				}
				A.push(parm)
			}
			console.log(A)
			return A;
		},
		
		//获取数据
		getData(){
			let parm = {
				pageNo:1,
				pageSize:20
			}
			this.GET('/interaction/informConfig/getInformList',parm).then((res) => {
			    
			    if( res.code == '000000' ) {
					if(res.data.length == 0){
						this.reportData = [{
				  
							"doctorId": '',
							"email": "",
							"userName": ""
						},]
					}else{
						this.reportData = this.handelEmail(res.data,1)  || []
					}
					
					
			    }else{
					this.$message({
					  message: res.message,
					  type: 'warning'
					});
				}
			})
		},
    }
}
</script>
<style lang="scss">
.item-component-wrap {
    .component-content {
        padding: 10px;
        background: #fff;
        // margin: 84px 20px 20px;
        .search-title {
            padding: 10px 12px;
            font-size: 12px;
            color: #449284;
            border-bottom: 1px solid #efefef;
        }
        .create-button {
            padding: 0 0 15px;
            margin-top: 0 !important;
            text-align: right;
        }
        .table-empty {
            img{
                width: 100px;
            }
            p {
                margin-top: -50px;
            }
        }
		.opt-icon{
			line-height: 40px;
			i{
				margin-right: 10px;
			}
		}
		.opt-btn{
			text-align: center		
		}
		.email-h{
			float: left;
		}
    }
}
</style>


