<template>
    <div class="emailMange">
        <div class="addEmail">
            <p style="margin-top:10px">
             <span style="font-size:18px;color:#2d8cf0;margin-left:18px">新增接收邮箱</span>
             <span style="margin-left:10px;color:Grey">绑定邮箱以接收简历</span>
            </p>
            <Form :label-width="100" :model="formInline" :rules="ruleInline">
                <FormItem label="邮箱账号" style="margin-top:20px" prop="emailNumber">
                    <Input placeholder="请输入企业邮箱" style="width:300px" v-model="formInline.emailNumber"/>
                </FormItem>
                <FormItem label="请选择开始同步的时间" style="margin-top:20px; position: absolute;top:30px;left: 490px"  :label-width="180">
                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择日期" style="width: 200px" v-model="DATA" @on-change="selectTime" :options="options3" :editable='false'></DatePicker><br>
                    <span style="font-size:8px;margin-left:0px;"><Icon type="md-information-circle" />最长可同步30天</span>
                </FormItem>
                 <FormItem label="邮箱密码" style="margin-top:20px; position: absolute;top:110px;left: -80px"  prop="emailPsd" :label-width="180">
                    <Input placeholder="请输入企业邮箱密码" style="width:300px" v-model="formInline.emailPsd" type="password" /><br>
                      <span style="font-size:8px;position: relative;top:0px left:30px"><Icon type="md-information-circle" />邮箱密码在绑定后再次修改，请及时点击修改来更新。</span>
                </FormItem>   
                 <FormItem label="所属人" style="margin-top:20px; position: absolute;top:110px;left: 410px"  prop="UserName" :label-width="180">
                   <Input placeholder="请输入所属者正确姓名" style="width:300px" v-model="formInline.UserName" :maxlength="5"/>
                </FormItem>  
                 <span type="primary" style="line-height:30px;text-align:center; width:110px;height:30px;position: absolute;top:130px;left: 910px;border-radius: 5px;background:rgb(0, 146, 255);color:rgb(255,255,255);cursor:pointer" @click="bindingSynchronizat">绑定并开始同步</span>    
            </Form>
        </div>
        <div class="Emailmange">
            <p style="height:40px;line-height:40px">
                <span style="font-size:18px;color:#2d8cf0;margin-left:18px">邮箱管理</span>
                <span style="margin-left:10px;color:Grey">解绑后不再接受该邮箱下的简历，之前接收的简历仍然保留。</span>
            </p>
             
             <p style="border-bottom:1px solid black;line-height:30px" >
                <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll' style="margin-left:25px;cursor:pointer" v-show="idAdmin==true">
                <span style="margin-left:5px;cursor:pointer" v-show="idAdmin==true" >全选</span>
               <span style="margin-left:40px;color:#2d8cf0;cursor:pointer" @click="UntyingAllmodeal" v-show="idAdmin==true">解绑</span>         
             </p>
             <!-- <Spin size="large" fix v-if="spinShow" style="font-size:25px" v-show="idAdmin==true">加载中...</Spin> -->
             <div v-for='item in ajaxData' :key="item.id" class="emailList"> 
                  <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxList' :value="item.id" style="margin-left:25px;margin-top:20px;cursor:pointer" @click="selectUntyingEle(item.id)"/>
                  <span style="margin-left:0.3%" >{{item.belongs}}</span>
                  <span style="margin-left:0.5%;">{{item.emailName}}</span>
                  <span style="margin-left:0.5%;">同步时间 |  {{item.syncStartDate}}</span>
                  <span  style="margin-left:2%;">新建时间 | {{item.createTime}}</span>
                  <span  style="margin-left:1%;color:#2d8cf0;cursor:pointer" @click="UpdateEMAIL(item.emailName,item.belongs,item.id)">修改</span>
                  <span  style="margin-left:1%;color:#2d8cf0;cursor:pointer" @click="UnbindingModal(item.id)">解绑</span>
                  <span  style="margin-left:5%;" v-if="item.c=='正常'" >{{item.syncMailMsg}}</span>
                  <span  style="margin-left:5%;color:red" v-if="item.c=='系统'" >{{item.syncMailMsg}}</span>
             </div>
             <div class="pageBottom" v-show="this.idAdmin==true">
                <Page :total="totalSize" show-elevator show-total   @on-change="pageChange"  @on-page-size-change="pageSizeChange" :current='pageIndex' :page-size='pageSize' style="text-align:center;margin-top:8px"></Page>
            </div>
        </div>
         <!--同步失败-->
        <Modal
            v-model="modal1"
            :closable="false"
             :footer-hide="true"
            width='250px'>
            <h3 style="text-align:center">提示</h3>
            <p style="text-align:center">系统错误，请联系开发者！</p>
            <h2 style="text-align:center;font-size:18px;color:#2d8cf0" @click="modal1=false">确定</h2>
        </Modal>
        <!-- 同步成功 -->
        <Modal
            v-model="modal2"
            :closable="false"
            :footer-hide="true"
            width='270px'>
              <h3 style="text-align:center">提示</h3>
              <p style="height:30px;line-height:30px">同步完成，如密码发生改变，请及时点击<br><span>修改</span>来重置密码</p>
              <!-- <h2 style="text-align:center;font-size:18px;color:#2d8cf0;height:40px;line-height:40px;margin-top:30px" @click="pushlist">我已知晓</h2> -->
              <Button type="primary" style="margin:40px 0 0 80px" @click="modal2=false">我已知晓</Button>
        </Modal>
        <!-- 同步绑定 -->
         <Modal
            v-model="modal3"
            :closable="false"
             :footer-hide="true"
            width='250px'>
            <h3 style="text-align:center">提示</h3>
            <p style="text-align:center;line-height:40px">同步中，请稍后...</p>
          
        </Modal>
        <!-- 修改弹出框 -->
         <Modal
            v-model="modal4"
            :closable="false"
             width='460px'>
             <span style="margin-left:180px;font-size:14px">修改绑定邮箱</span>
            <div style="height:230px">
                <Form>
                    <FormItem label="邮箱账号" style="margin-top:20px" prop="emailNumber">
                        <Input placeholder="请输入企业邮箱"  v-model="Uusername" style="width:300px;color:Gainsboro" disabled/>
                    </FormItem>
                    <FormItem label="邮箱密码"  prop="emailPsd" :label-width="180" style="position: absolute;top:130px;left:-105px">
                        <Input placeholder="请输入企业邮箱密码" style="width:300px" v-model="UpassWord" type="password" autocomplete="new-password"/><br>
                        <span style="font-size:8px;position: relative;top:0px left:30px"><Icon type="md-information-circle" :options="options3" />邮箱密码在绑定后再次修改，请及时点击修改来更新。</span>
                    </FormItem>   
                    <FormItem label="所属人" style=" position: absolute;top:220px;left: -100px"  prop="UserName" :label-width="180">
                    <Input placeholder="请输入所属着真实的姓名" style="width:300px" v-model="Ublengs" :maxlength="5"/>
                    </FormItem>  
                </Form>
            </div>
            <div  slot='footer' style="text-align:center">
                <Button type='primary' @click='updatapassT'>取消</Button>
                <Button type='primary' @click="UpdateemailTwo" >保存</Button>
            </div>  
        </Modal>
        <!-- 解绑弹出框 -->
        <Modal
            v-model="modal5"
            :closable="false"
            width='250px'>
            <h3 style="text-align:center">提示</h3>
            <p style="text-align:center">解绑后如你需要再次绑定该邮箱，需重新输入账号，密码等信息重新绑定，是否确定解绑？</p>
            <div  slot='footer' style="text-align:center">
                <Button type='primary' @click='modal5=false'>取消</Button>
                <Button type='primary' @click="Unbinding">确认</Button>
            </div>  
        </Modal>
         <Modal
            v-model="modal6"
            :closable="false"
            width='250px'>
            <h3 style="text-align:center">提示</h3>
            <p style="text-align:center">解绑后如你需要再次绑定该邮箱，需重新输入账号，密码等信息重新绑定，是否确定解绑？</p>
            <div  slot='footer' style="text-align:center">
                <Button type='primary' @click='pushlistModal6'>取消</Button>
                <Button type='primary' @click="UntyingAll">确认</Button>
            </div>  
        </Modal>
    </div>
</template>
<script>
import { queryemailList,Synchronization,jiebangEmail,updateemailTWO,UntyingAll} from '../../api/stystem.server.js'
export default {
    data(){
        return {
            modal1:false,
            modal2:false,
            modal3:false,
            modal4:false,
            modal5:false,
            modal6:false,
            condition:'',
            Massage:'',
            pageT:'',
            spinShow:true,
            idAdmin:'',
            admin:'',
            NAme:"",
            DATA:"",
            Tname:'',
            options3: {
                disabledDate (date) {
                    return date && date.valueOf() > Date.now()|| date.valueOf()<Date.now()-3600*1000*30*24;
                }
            },
            UpassWord:'',
            Uusername:'',
            decisionStartTime:'',
            Ublengs:'',
            Uid:'',
            UntyingAllARR:[],
            Tblengs:'',
            checkboxList:[],
            checked: false,
            pageIndex:1,
            pageSize:30,
            totalSize:null,
            searchInfo:{
              pageSize:30,
              pageIndex:1,
              id:'',
            },
            formInline: {
                    emailNumber: '',
                    emailPsd: '',
                    UserName:''
                },
                ruleInline: {
                    emailNumber: [
                        // derong.zhang@quantgroup.cn
                        { required: true, pattern:/\S+@quantgroup.cn/, message: '请输入正确的邮箱账号', trigger: 'blur' }
                    ],
                    emailPsd: [
                        { required: true, message: '请输入正确的密码', trigger: 'blur' },
                    ],
                    UserName:[
                        { required: true, message: '请输入正确的姓名', trigger: 'blur' },
                    ]
                },
             ajaxData: [],
				checkData: [] ,// 双向数据绑定的数组
        }
    },
    methods:{
          //全选与反选
        checkedAll: function() {
            if (this.checked) {//实现反选
                this.checkboxList = [];
            } else { //实现全选
                this.checkboxList = [];
                this.ajaxData.forEach( (item) => {
                    this.checkboxList.push(item.id);
                    this.UntyingAllARR.push(item.id)
                });
            }
        },
            //绑定同步邮箱
            bindingSynchronizat(){
            if(this.formInline.emailNumber==''||this.formInline.emailPsd==''||this.formInline.UserName==''||this.DATA==''){
               this.$Notice.error({
                    title: '提示',
                    desc:  '请您填写完整的信息',
                    duration:'2'
                });
                return
            }
            this.modal3=true
            let parmars={
                emailName:this.formInline.emailNumber,
                emailPassword:this.formInline.emailPsd,
                belongs:this.formInline.UserName,
                syncStartDate:this.DATA
            }
            Synchronization(parmars).then(res=>{
                if(res.data.success==true){
                    this.modal3=false
                    this.modal2=true
                    this.formInline.emailNumber=''
                    this.formInline.emailPsd=''
                    this.formInline.UserName=''
                    this.DATA=''
                    this.SearchList()
                }
                if(res.data.success==false){
                    this.modal3=false
                    this.Massage=res.data.body.message
                     this.$Notice.error({
                        title: '提示',
                        desc: this.Massage,
                        duration:2
                    });
                }
            },()=>{
                this.modal3=false
                // this.modal1=true
                this.formInline.emailPsd=''
            })
        },
        //选择同步的时间
        selectTime(b){
            this.DATA=b
        },
         //查询邮箱列表
        SearchList(page){
            page = typeof(page)=='number'?page:1
            this.searchInfo.pageIndex = page
            this.pageIndex = page
            let parmars={
                pageSize:this.searchInfo.pageSize,
                pageIndex:this.searchInfo.pageIndex,
            }
            queryemailList(parmars).then(res=>{
                if(res.data.success==true){
                    this.spinShow=false
                    this.totalSize=res.data.body.totalNumber
                    this.ajaxData=res.data.body.items.map((item,index)=>{
                        item.syncStartDate=item.syncStartDate
                        item.syncFlag=item.syncFlag
                        item.createTime=item.createTime
                        item.belongs=item.belongs
                        item.emailName=item.emailName
                        item.id=item.id
                        item.STA=false
                        item.syncFlag=item.syncFlag
                        item.syncMailMsg=item.syncMailMsg
                        item.c= item.syncMailMsg==null? item.syncMailMsg:item.syncMailMsg.substring(0,2)
                        return item
                    })  
                }
            })
        },
        //改变页码
        pageChange(page){
          this.pageT=page
          this.SearchList(page)
        },
        pageSizeChange(page){
            this.searchInfo.pageSize=page
            this.pageSize=page
            this.SearchList()
        },
        // 修改邮箱弹出框
        UpdateEMAIL(Tname,Tblengs,Tid){
            this.modal4=true
            this.Uusername=Tname
            this.Ublengs=Tblengs
            this.Uid=Tid
        },
        // 修改后重新绑定邮箱并保存
        UpdateemailTwo(){
            if(this.UpassWord==''||this.Uusername==''||this.Ublengs==''){
                this.$Notice.error({
                    title: '提示',
                    desc:  '请您填写完整的信息',
                    duration:'2'
                });
                return
            }
            let parmars={
                emailName:this.Uusername,
                emailPassword:this.UpassWord,
                belongs:this.Ublengs,
                id:this.Uid

            }
            updateemailTWO(parmars).then(res=>{
                if(res.data.success==true){
                    this.UpassWord=''
                    this.modal4=false
                    this.SearchList(this.pageT)
                    this.$Notice.success({
                        title: '提示',
                        desc:  '修改成功',
                        duration:'2'
                     });
                }else{
                    this.$Notice.error({
                        title: '提示',
                        desc:  '你填写的密码有误',
                        duration:'2'
                     });
                     this.UpassWord=''
                }
            })
        },
        //解绑弹出框
        UnbindingModal(Eid){
            this.NAme=Eid,
            this.modal5=true
        },
        //确认解绑邮箱
        Unbinding(){
          jiebangEmail(this.NAme).then(res=>{
              if(res.data.success==true){
                  this.$Notice.success({
                        title: '提示',
                        desc:  '解绑成功',
                        duration:2
                    });
                  this.modal5=false
                  this.SearchList(this.pageT)
              }
          })  
        },
        //批量解绑弹出框
        UntyingAllmodeal(){
            if(this.UntyingAllARR.length==0){
               this.$Notice.error({
                        title: '提示',
                        desc:  '选项不能为空',
                        duration:2
                    }); 
               return
            }
            this.modal6=true
        },
        // 选择批量解绑的项
        selectUntyingEle(id){
            this.UntyingAllARR.push(id)
        },
        // 批量解绑邮箱
         UntyingAll(){
            UntyingAll(this.UntyingAllARR).then(res=>{
                if(res.data.success==true){
                   this.$Notice.success({
                        title: '提示',
                        desc:  '解绑成功',
                        duration:2
                    });
                    this.modal6=false
                    this.SearchList(this.pageT)
                }
            })

         },
         pushlist(){
           this.modal2=false
           this.SearchList(this.pageT)
         },
         pushlistModal6(){
             this.modal6=false
             this.UntyingAllARR=[]
             this.SearchList(this.pageT)
         },
         isadminmethods(){
           this.admin=localStorage.getItem('isADMIN')
           let c=JSON.parse(this.admin)
            this.idAdmin=c.isAdmin
         },
         updatapassT(){
             this.modal4=false
             this.UpassWord=''
         },
        changeStartTime: function (e,b) {
            this.DATA=b
            var time = e
            var that = this
            var days = new Date(new Date().getFullYear(), (new Date().getMonth() + 1), 0).getDate() - 1
            var startEndTime = time ? new Date(time).valueOf() - days * 24 * 60 * 60 * 1000 : ''
            var endEndTime = time ? new Date(time).valueOf() : ''
            if (time === '') {
              this.decisionStartTime = {
                disabledDate (data) {
                return data.valueOf() < 0
                }
            }
            } else {
              this.decisionStartTime = {
                disabledDate (data) {
                if (that.qualityCheck.decisionEndTime === '') {
                    return new Date()
                }
                return data.valueOf() < startEndTime || data.valueOf() > endEndTime
                }
             }
            }
      }
     },
        
    watch: {
        checkboxList: {
        handler: function (val, oldVal) { 
            if (this.checkboxList.length === this.ajaxData.length) {
                this.checked=true;
            } else {
                this.checked=false;
            }
        },
        deep: true
        }

    },
    mounted(){
      this.isadminmethods()
      this.SearchList()
    }
        
    
}
</script>
<style>
.addEmail{
   height: 220px;
}
.Emailmange{
    min-height: 500px
}
.emailList{
    height: 40px;
    line-height: 40px;
    width:100%
}
.emailList :nth-child(2){
     width: 5%;
     display: inline-block;
}
.emailList :nth-child(3){
     width: 15%;
     display: inline-block;
}
.emailList :nth-child(4){
    display: inline-block;
}
.emailList :nth-child(5){
    display: inline-block;
}
.emailList :nth-child(6){
  display: inline-block;
}
.emailList :nth-child(7){
  display: inline-block;
}
.emailList :nth-child(8){
  width: 15%;
  display: inline-block;
}
.buTon :nth-child(1){
    width: 70px;
    height: 40px;
    background: #2d8cf0;
    color:white
}
.pageBottom{
    height: 40px;
    width: 84.4%;
    background:#EDEDED;
    position: fixed;
    bottom: 0;
}
</style>
