<template>
<div class='talkit-container'>
    <div class="filter-container">

        <el-select v-model="listQuery.isbinding" placeholder="请选择" size="mini" style="width:180px;margin-right:12px;" @change="getList">
                <el-option
                :label="'未绑定'"
                :value="1">
                </el-option>
                <el-option
                :label="'全部'"
                :value="0">
                </el-option>
        </el-select>

        <el-input style="width:300px;margin-right:12px;" size="mini" v-model="listQuery.account"  placeholder="请输入搜索信息"></el-input>
        

        <el-button type="primary" size="mini" icon="el-icon-search" @click="getList">搜索</el-button>
        <el-button type="success" size="mini" icon="el-icon-plus"  @click="formState = 'add';addServiceVisible = true">添加</el-button>

        <el-button type="danger" size="mini" icon="el-icon-delete"  @click="deleteInfo">删除</el-button>

        <el-button type="primary" size="mini" icon="el-icon-upload2"  @click="importVisible = true">导入</el-button>
        <el-button type="primary" size="mini" icon="el-icon-download"  @click="exportExcel">导出</el-button>
    </div>

    <div class="list-container">
        <div class="item">
            <div class="item-box">
                选择
            </div>
            <div class="item-box">对讲机编号</div>
            <div class="item-box">所属分组</div>
            <div class="item-box">人员姓名</div>
            <div class="item-box">联系电话</div>
            <div class="item-box">操作</div>
        </div>
        <div class="list-container-inner">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="item-box">
                    <div
                        class="checkbox-container"
                        @click="checkNews(index)"
                        :key="checkRandom"
                    >
                    <i class="el-icon el-icon-check" v-show="item.check"></i>
                </div>
                </div>
                <div class="item-box">{{item.account}}</div>
                <div class="item-box">{{item.groupname}}</div>
                <div class="item-box">{{item.username}}</div>
                <div class="item-box">{{item.phone}}</div>
                <div class="item-box">
                    <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteInfo(item.account)">删除</el-button> -->
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="editInfo(item)">编辑</el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="page-container">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="listQuery.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>

    <el-dialog
      width="40%"
      height="60%"
      top=" calc(50vh - 340px)"
      class="dialog-mini body-small addWindow"
      v-el-drag-dialog
      :title="'绑定信息'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="addServiceVisible"
    >
      <AddForm
        v-if="addServiceVisible"
        :detailInfo="detailInfo"
        :formState="formState"
        @close="addSuccess"
      ></AddForm>
    </el-dialog>

    <el-dialog
      width="400px"
      height="60%"
      top=" calc(50vh - 340px)"
      class="dialog-mini body-small addWindow"
      v-el-drag-dialog
      :title="'导入信息'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="importVisible"
    >
      <ImportTalkit v-if="importVisible" @importSuccess="importSuccess"></ImportTalkit>
    </el-dialog>

</div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../../api/common';
import AddForm from './widget/AddForm.vue';
import ImportTalkit from './widget/ImportTalkit.vue';
export default {
   components: {
    AddForm,
    ImportTalkit
   },
   props:[],
   data() {
    return {
        total:null,
        detailInfo:{},
        addServiceVisible:false,
        importVisible:false,
        listQuery:{
            pageIndex:1,
            pageSize:10,
            isbinding:0,
            account:""
        },
        list:[
          
        ],
        checkList:[],
        checkNumber:[],
        checkRandom:1,
    };
   },
   computed: {},
   watch: {},
   methods: {
    checkNews(index) {
      this.list[index].check = !this.list[index].check;
      this.getCheckList(this.list[index].check, this.list[index].clueNo);
      this.getCheckNumber(this.list[index].check, this.list[index]);
      this.checkRandom = Math.random() * 100000000;
      console.log(this.list);
    },
    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.id == item.id;
        });

        if (!obj) {
          this.checkNumber.push(options);
        } else {
        }
      } else {
        this.checkNumber.forEach((item, index) => {
          if (item.id == options.id) {
            idx = index;
          }
        });
        this.checkNumber.splice(idx, 1);
      }

      console.log("checknumber", this.checkNumber);
    },

    exportExcel(){
        window.location.href=process.env.VUE_APP_BASE_IMG_URL +"/api/Grid/ExportStatistics"
    },  
    handleCurrentChange(e){
        this.listQuery.pageIndex = e;
        this.getList();
    },
    handleSizeChange(e){
        this.listQuery.pageSize = e;
        this.getList();
    },
    importSuccess(){
        this.importVisible = false;
        this.getList();
    },  
    addSuccess(){
        this.addServiceVisible = false;
        this.getList();
    },
    getList(){
        postMethodCommon("/Grid/GetInterphoneInfo?pageSize="+this.listQuery.pageSize+"&pageIndex="+this.listQuery.pageIndex+"&isbinding="+this.listQuery.isbinding+"&account="+this.listQuery.account).then(res=>{
            if(res.code == 200){
                this.list = res.data;
                this.total = res.count;
                this.list.forEach((item, index) => {
                    this.list[index].check = false;
                    this.list[index].id = this.list[index].account;
                });
            }
        })
    },
    deleteInfo(id){
        this.$confirm("确认删除所选数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            let ids = [];
            this.checkNumber.forEach((item,index)=>{
                ids.push(item.id);
            })
            postMethodCommon("/Grid/DeleteInterphoneInfo",ids).then(res=>{
                if(res.code == 200){
                    this.$message({
                        type:"success",
                        message:"删除成功"
                    })
                    this.getList();
                }
            })
        }).catch(() => {
            
        });

        
    },
    editInfo(item){
        this.detailInfo = item;
        this.formState = "edit";
        this.addServiceVisible = true;
    }
   },
   created() {
    this.getList();
   },
   mounted() {
   
   },
   destroyed() {
   
   },
}
</script>

<style scoped>
.talkit-container{
    width:100%;
    height:100%;
    background:#272d39;
}

.list-container{
    width:100%;
    padding:30px;
    height: calc( 100% - 120px);
}

.list-container-inner{
    width:100%;
    padding:0px;
    height: calc( 100% - 60px);
    overflow-y:auto;
}

.item{
    width:100%;
    height:50px;
    background:#2f3243;
    color:#efefef;
    margin-bottom:4px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.item .item-box{
    width:20.5%;
    height:50px;
    line-height:50px;
    float:left;
    text-indent:20px;
}

.item .item-box:first-child{
    width:8%;
}

.item .item-box:last-child{
    width:10%;
}



.filter-container{
    width:100%;
    padding:20px 30px;
    height:50px;
    text-align:right;
}

.page-container{
    width:100%;
    height:50px;
    padding:0px 30px;
}

.checkbox-container {
  width: 18px;
  height: 18px;
  position: relative;
  top: 12px;
  margin-left: 10px;
  float: left;
  background: rgba(2, 0, 77, 0.4);
  box-shadow: inset 0px 0px 34px 0px #a15e01;
  border: 1px solid #f18b00;
  cursor: pointer;
  line-height:18px;
  text-indent:0px;
}
</style>