<template>
    <div class="account">
        <div class="addAcount">
            <p style="margin-top:0.5%">
             <span style="font-size:18px;color:#2d8cf0;margin-left:18px;">新增账户</span>
             <span style="margin-left:10px;color:Grey">以下内容均为必填项</span>
            </p>
            <Form :label-width="130" :model="formInline" :rules="ruleInline">
                <FormItem label="配置登录账号：" style="margin-top:1%" prop="PhoneNumber">
                    <Input placeholder="请输入正确的手机号" style="width:300px" v-model="formInline.PhoneNumber"/>
                </FormItem>
                <FormItem label="绑定真实姓名：" style="margin-top:1%"  prop="PerName">
                    <Input placeholder="请输入真实姓名" style="width:300px" v-model="formInline.PerName" :maxlength="5"/>
                </FormItem>   
            </Form>
            <p>
                <span style="margin-left:25px;fnt-size:14px">初始登录密码</span>
                <span style="margin-left:10px">默认是"123456",新用户首次登录需修改后才能进入系统。</span>
                <span style="margin-left:30px"><Button type="primary" size='small' style="color:#ffffff;margin-left:20px;width:60px" @click="addacount"> 添加</Button></span>
            </p>
        </div>
        <div class="accountMange">
            <div class="accountMange-top">
                <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;margin-bottom:10px">
                <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll(checkboxList)' style="margin-left:25px;margin-top:15px;cursor:pointer"><span style="margin-left:10px">全选</span> 
                <span style="margin-left:40px;color:#2d8cf0;cursor:pointer" @click="delateall">删除</span>         
                </p>
            </div>
             <!-- <Table ref="selection" :columns="columns4" :data="data1"></Table> -->
             <div style="overflow-y: auto;height:80%;margin-bottom:40px">
             <!-- <Spin size="large" fix v-if="spinShow" style="font-size:25px">加载中...</Spin> -->
             <div v-for='item in ajaxData' :key="item.id" style="">
                 <div  class="detailQQ"> 
                  <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxList' :value="item.id" style="margin-left:25px;cursor:pointer" @click="delateArr(item.id)">
                  <span style="margin-left:5px" >{{item.userName}}</span>
                  <span style="margin-left:35px">{{item.userCode}}</span>
                  <span style="margin-left:35px">{{item.createTime}}</span>
                  <span  style="margin-left:35px;color:#2d8cf0;cursor:pointer" @click="recoveryModal(item.id)">恢复初始密码</span>
                  <span  style="margin-left:35px;color:#2d8cf0;cursor:pointer" @click="delateMaodal(item.id)">删除</span>
                </div>
                <div style="height:10px;background:white;width:100%;"></div>
             </div>
             </div>
            
            <div class="pageBottom">
                <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"
            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='modal1=false'>取消</Button>
                <Button type='primary' @click="recovery()" >确定</Button>
            </div>
        </Modal>
        <!-- 删除当前的账户 -->
         <Modal
            v-model="modal2"
            :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='modal2=false'>取消</Button>
                <Button type='primary' @click="delateAccount">确定</Button>
            </div>
        </Modal>
        <Modal
            v-model="modal3"
            :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='modal3=false'>取消</Button>
                <Button type='primary' @click="delateAll">确定</Button>
            </div>
        </Modal>
         <Modal
            v-model="modal4"
            :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='modal4=false'>确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { queryaccountList,addAccount,Delateaccount,delateAllAccount,recoveryPassword} from '../../api/stystem.server.js'
export default {
    data(){
        return {
            modal1:false,
            modal2:false,
            modal3:false,
            modal4:false,
            checkboxList:[],
            checked: false,
            pageT:'',
            userName:'',
            userCode:'',
            Massage:'',
            spinShow:true,
            delateARR:[],
            id:'',
            I:'',
            pageIndex:1,
            pageSize:30,
            totalSize:null,
            searchInfo:{
              pageSize:30,
              pageIndex:1,
              id:''
            },
             formInline: {
                    PhoneNumber: '',
                    PerName: ''
                },
                ruleInline: {
                    PhoneNumber: [
                        { required: true, pattern:/^[1][3,4,5,7,8,6,9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                    ],
                    PerName: [
                        { required: true, message: '请输入真实的姓名', trigger: 'blur' },
                        { type: 'string',  message: '', trigger: 'blur' }
                    ]
                },
                ajaxData:[],
				checkData: [] ,// 双向数据绑定的数组
        }
    },
    methods:{
         handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
             ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            //
            delateArr(DElateID){
                this.delateARR.push(DElateID)
            },
             //全选与反选
        checkedAll: function() {
            if (this.checked) {//实现反选
                this.checkboxList = [];
                this.checkboxList.push(item.id)
                this.delateARR.push(item.id)
            } else { //实现全选
                this.checkboxList = [];
                this.ajaxData.forEach( (item) => {
                    this.checkboxList.push(item.id);
                    this.delateARR.push(item.id)
                });
            }
        },
       //添加账户
       addacount(){
           let parmars={
               userCode:this.formInline.PhoneNumber,
               userName:this.formInline.PerName
           }
           if(this.formInline.PhoneNumber==''||this.formInline.PerName==''){
             this.$Notice.error({
                    title: '提示',
                    desc:  '请您填写正确的手机号或姓名',
                    duration:2
                });
               return
           }
        
           if(!(/^[1][3,4,5,7,8,6,9][0-9]{9}$/.test(this.formInline.PhoneNumber))){
              this.$Notice.error({
                    title: '提示',
                    desc:  '请您填写正确的手机号',
                    duration:2
                });
               return
           }
           addAccount(parmars).then(res=>{
              if(res.data.success==true){
                  this.$Notice.success({
                    title: '提示',
                    desc:  '添加成功',
                    duration:2
                });
                  this.SearchList()
                  this.formInline.PhoneNumber=''
                  this.formInline.PerName=''
              }
              if(res.data.body.code==0){
                this.Massage=res.data.body.message
                 this.$Notice.error({
                    title: '提示',
                    desc:this.Massage,
                    duration:2
                });
                this.formInline.PhoneNumber=''
                this.formInline.PerName=''
                return
              }
           })

        } ,
        //查询账户列表
        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,
            }
            queryaccountList(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.id=item.id
                        item.userName=item.userName
                        item.userCode=item.userCode
                        item.createTime=item.createTime
                        return item
                    })       
                }
            })
        },
        //删除单条账户弹框
        delateMaodal(DID){
            this.I=DID
            this.modal2=true
        },
        //删除单条账户
        delateAccount(){
           let parmars={
               id:this.I
           }
            Delateaccount(parmars).then(res=>{
                if(res.data.success==true){
                    this.modal2=false
                    this.SearchList(this.pageT)
                }
                this.SearchList(this.pageT)
            })
        },
        // 批量删除弹出框
        delateall(){
            if(this.checkboxList.length==0||this.delateArr.length==0){
              this.$Notice.error({
                title: '提示',
                desc:  '选项不能为空',
                duration:'2'
              });
             return
            }
            this.modal3=true
        },
        //批量删除账户
        delateAll(){
            delateAllAccount(this.delateARR).then(res=>{
                if(res.data.success==true){
                    this.$Notice.success({
                    title: '提示',
                    desc:  '删除成功',
                    duration:'2'
                });
                    this.modal3=false
                    this.SearchList(this.pageT)
                }
            })
        },
        //恢复初始密码弹窗
        recoveryModal(ID){
            this.I=ID
            this.modal1=true
        },
        //确认恢复初始密码
        recovery(){
           let parmars={
               id:this.I
           }
           recoveryPassword(parmars).then(res=>{
               if(res.data.success==true){
                  this.$Notice.success({
                    title: '提示',
                    desc:  '恢复密码成功',
                    duration:'2'
                });
                this.modal1=false
               }
           })
        },
        //改变页码
        pageChange(page){
        this.pageT=page
          this.SearchList(page)
        },
        pageSizeChange(page){
            this.searchInfo.pageSize=page
            this.pageSize=page
            this.SearchList()
        },
    },
    watch: {
        checkboxList: {
        handler: function (val, oldVal) { 
            if(this.ajaxData.length==0){
                this.checked=false
                return
            }
            if (this.checkboxList.length === this.ajaxData.length) {
                this.checked=true;
            } else {
                this.checked=false;
            }
        },
        deep: true
      }

    },
    mounted(){
        this.SearchList()
    }
    
    
}
</script>
<style scoped>
.account{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.addAcount{
    height:210px;
    width:100%;
}
.pageBottom{
    height: 40px;
    width: 84.4%;
    background:#EDEDED;
    position: fixed;
    bottom: 0;
}
.accountMange{
    height: 74%;
}
.accountMange-top{
    width: 100%;
    height: 78px;
}
.detailQQ{
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: rgba(244,244,244,1);
    /* margin-top: 10px */
}
.detailQQ :nth-child(2){
    width: 80px;
    display: inline-block;
}
.detailQQ :nth-child(3){
    width: 80px;
    display: inline-block;
}
.detailQQ :nth-child(4){
    width: 180px;
    display: inline-block;
}
</style>
