<template>
  <div class="onebuttoncall-container">
      <div class="title">注册人员</div>
      <div class="loader-container" v-show="loading">
          <p><i class="el-icon el-icon-loading" style="font-size:22px;"></i>&nbsp;&nbsp;正在呼叫，请稍后！</p>
      </div>
      <div class="filter-container">
          <el-select v-model="listQuery.userType" placeholder="请选择" size="mini" @change="getUserList">
                <el-option
                    v-for="(item) in userIdentity"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
               
            </el-select>

            <el-input clearable size="mini" v-model="listQuery.username" prefix-icon="el-icon-search" style="width: 200px;margin-bottom: 0;margin:0px 12px;" class="filter-item" :placeholder="'人员姓名'"
            >
            </el-input>
    
            <el-button type="default" size="mini" @click="listQuery.userType=null;listQuery.pageIndex=0;listQuery.username=null;getListData();">重置</el-button>
            <el-button type="primary" size="mini" @click="getListData">搜索</el-button>
      </div>
        <div class="call-text-container" v-if="callTextShow">
            <div class="call-title">呼叫内容</div>
            <div style="padding:15px;">
                 <el-input placeholder="请输入呼叫内容" type="textarea" :rows="7" v-model="callText"></el-input>
                 <p>&nbsp;</p>
                <el-button type="default" size="small" @click="callTextShow = false;">取消</el-button>
                <el-button type="primary" size="small"  @click="callPhone">呼叫</el-button>
            </div>
        </div>
      <div class="box-container">
          <div class="table-body">
              <div class="table-li" v-for="(item,index) in list" :key="index">
                 <div class="flex jc-sb">
                  <div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
                        <i class="el-icon el-icon-check" v-show="item.check" ></i>
                    </div>
                    <div style="positon:relative;width:160px;left:50px;">
                      <div style="color:#156EF9;font-size:18px;">{{item.name}}</div>
                      <div>{{item.account}}</div>
                    </div>
                  <div class="flex ai-c jc-e" style="width:75px" >
                    <img class="img-box" v-if="false" src="/img/phone.png" @click="callPhoneOne(item.account)" />
                  </div>
                 </div>
              </div>
          </div>
          <div class="flex  callbox">
              <el-pagination
                background
                :current-page="listQuery.pageIndex"
                :page-size="listQuery.pageSize"
                layout="prev, pager, next"
                :total="total"
                @current-change="changePage"
                >
                </el-pagination>
                <!-- <el-button type="primary" size="small" style="float:right;position:absolute;right:30px;" @click="callPhoneAll">一键呼叫</el-button> -->
          </div>
      </div>
  </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../../api/common';
import axios from 'axios'
  export default {
    name: 'onebuttoncall',
    data(){
        return {
            userIdentity:[
                {
                    label:"全部",
                    value:null,
                },
                {
                    label:"护林员",
                    value:2
                },{
                    label:"消防员",
                    value:3
                },{
                    label:"巡查员",
                    value:4
                },{
                    label:"管理人员",
                    value:5
                }
            ],
            userType:'quan',
            list:[
               
            ],
            listQuery:{
                name:null,
                pageIndex:1,
                pageSize:12,
                key:null,
                userType:null,
            },
            checkPhoneArr:[],
            checkRandom:1,
            checkList:[],
            checkNumber:[],
            total:0,
            callText:null,
            callTextShow:false,
            phones:null,
            loading:false,
        }
    },
    created(){
        this.getListData();
    },
    mounted(){
        
    },
    methods:{
        changePage(e){
            this.listQuery.pageIndex = e;
            this.getListData();
        },
        checkChange(){

        },
        phoneCheckClick(item){

        },
        getUserList(){
            this.listQuery.pageIndex = 1;
            this.getListData();
        },
        getListData(){
            getMethodCommon("/FireCodeApp/GetForestryUser",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.list = res.data
                    this.total = res.count
                }
            })

            // if(this.userType == '护林员'){
            //     getMethodCommon("/FireCodeApp/GetForestryUser",this.listQuery).then(res=>{
            //         if(res.code == 200){
            //             this.list = res.data
            //             this.total = res.count
            //         }
            //     })
            // }else if(this.userType == '消防员'){
            //     getMethodCommon("/FireGrid/GetFireFighter",this.listQuery).then(res=>{
            //         if(res.code == 200){
            //             this.list = res.data;
            //             this.list.forEach((item,index)=>{
            //                 this.list[index].Account = item.phone;
            //                 this.list[index].Name = item.name;
            //             })
            //             this.total = res.count;
            //         }
            //     })
            // }else if(this.userType == '网格员'){
            //     getMethodCommon("/Grid/LoadAllGridUser",this.listQuery).then(res=>{
            //         if(res.code == 200){
            //             this.list = res.data;
            //             this.list.forEach((item,index)=>{
            //                 this.list[index].Account = item.phone;
            //                 this.list[index].Name = item.userName;
            //             })
            //             this.total = res.count;
            //         }
            //     })
            // }
        },
        // 
        getFireterList(){
            getMethodCommon("/FireGrid/GetFireFighter",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.list = res.data
                    this.total = res.count
                }
            })
        },
        callPhoneOne(phone){
            this.phones = phone;
            this.callTextShow = true;
        },
        callPhoneAll(){
            this.phones = this.checkList.join(",")
            this.callTextShow = true;
        },
        checkNews(index){
            this.list[index].check = !this.list[index].check;
            this.getCheckList(this.list[index].check,this.list[index].Account);
            this.getCheckNumber(this.list[index].check,this.list[index]);
            this.checkRandom = Math.random()*100000000;
        },
        getCheckList(type,id){
              if(type){
                  let idx = this.checkList.lastIndexOf(id);
                  if(idx == -1){
                      this.checkList.push(id);
                  }else{
                      
                  }
              }else{
                 let idx = this.checkList.lastIndexOf(id);
                 this.checkList.splice(idx,1); 
              }
          },
          getCheckNumber(type,options){
              let idx = null;
              if(type){
                  
                  let obj = this.checkNumber.find((item,index)=>{
                      return options.phone == item.phone
                  })
  
                  if(!obj){
                      this.checkNumber.push(options);
                  }else{
  
                  }
              }else{
                this.checkNumber.forEach((item,index)=>{
                    if(item.phone == options.phone){
                        idx = index;
                    }
                })
                 this.checkNumber.splice(idx,1); 
              }
          },
        callPhone(){
            this.loading = true;
            let date = new Date();
            let dates =  date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";

            let param = {
                phoneNumbers: this.phones,
                time: dates,
                address:"",
                work:this.callText
            }
            
            postMethodCommon("/FireCodePC/EventAssign",param).then(res=>{
                this.loading = false;
                if(res.code==200){
                    this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.callText = null;
                this.callTextShow = false;
                }
            })
           

        //   postMethodCommon('/FireCodePC/EventAssign',param).then(res =>{
        //     if(res.code == 200){
        //       this.$message({
        //         message: res.message,
        //         type: 'success'
        //       });
        //       this.callText = null;
        //       this.callTextShow = false;
        //     }
        //   })
        }
    }
  }
</script>

<style scoped>
  .onebuttoncall-container{
      width:100%;
      height:100%;
      background-image: url(/img/biaohui.png);
      background-size:100% 100%;
  }

  .title{
      font-size:20px;
      color:#fff;
      text-indent:22px;
      height:60px;
      line-height:60px;
      text-indent:46px;
    }
    .filter-container{
        padding:15px 30px;
    }
    .box-container{
          width: calc( 100% - 0px);
          padding:0px 12px;
          height: calc( 100% - 120px);
      }
      .table-header{
          width: calc( 100% - 10px);
          height:25px;
          color:#fff;
          text-align: center;
      }
      .table-header div{
          float:left;
          width:25%;
          border-bottom:1px dashed #00FFF0;
          padding-bottom:8px;
      }
      .table-body{
          width:100%;
          height: calc( 100% - 70px);
          overflow-y: auto;
      }
  
       .table-body .table-li{
           width: calc( 33% - 20px);
           margin:0px 10px;
           float:left;
           height:99px;
           background: #082929;
           margin-bottom: 8px;
           padding: 10px 10px;
       }

        .img-box{
            width:42px;
            cursor:pointer;
        }
       
      
     
  
       ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
  }
  
  ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    border-radius: 5px
  }
  
  ::-webkit-scrollbar-thumb {
    padding-top: 100px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
    background-color: #797979;
    min-height: 28px;
    border-radius: 4px;
    background-clip: padding-box
  }
  
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
  }
  
  ::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .4)
  }
  
  ::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
    background-color: rgba(0, 0, 0, .5)
  }

    .checkbox-container{
      width:18px;
      height:18px;
      position:relative;
      font-size:16px;
      line-height:18px;
      color:#fff;
      top:12px;
      margin-right:10px;
      float:left;
      background: rgba(2,0,77,0.4);
        box-shadow: inset 0px 0px 34px 0px #A15E01;
        border: 1px solid #F18B00;
      cursor: pointer;
  }

  ::v-deep .el-pager li{
      background:none;
      color:#fff;
  }

  .call-text-container{
     width:400px;
     height:300px;
     background-image:url(/img/goods.png);
     background-size:100% 100%;
     position:absolute;
     top:50%;
     left:50%;
     z-index:99999;
     transform: translate(-50%,-50%);
  }
    .call-title{
        width:100%;
        height:40px;
        line-height: 40px;
        color:#fff;
        text-indent:15px;
        z-index:1000000;
    }
  .callbox{
      width:100%;
      padding-top:15px;
  }

  ::v-deep .el-checkbox__label{
      color:#fff;
  }

  .loader-container{
      width: calc( 100% - 0px);
      height: calc( 100% - 60px);
      position:absolute;
      top:60px;
      left:0px;
      background:rgba(0,0,0,0.5);
      z-index:99999;
      text-align:center;
      color:#fff;
      display:flex;/*实现垂直居中*/
        align-items:center;/*实现水平居中*/
        justify-content:center;
        text-align:justify;
        z-index:9999999;
  }

</style>
