<template>
  <div class="voice_box">
    <div class="top_header">
      <div class="left">
        <div class="top_title"></div>
      </div>
      <div class="right">
        <div class="top_right">
          <div class="date_box">{{date}}</div>
          <div class="weather_box">
            <img src="~@/assets/image/weather.png" alt="">
          </div>
          <div class="weather_txt">23℃</div>
          <div class="weather_txt time_txt">{{time}}</div>
        </div>
        <div class="bottom_right">
          <div class="user_box">
            <img src="~@/assets/image/head_photo.png" alt="">
            <span class="name_txt">admin</span>
          </div>
          <div class="user_box">
            <img src="~@/assets/image/exit.png" alt="">
            <span class="exit_txt">退出</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bot_con">
      <div class="left_con">
        <div class="title_box">
          <div class="tit_box" @click="changeTitle(1)">
            <img v-show="activeTit == 1" src="~@/assets/image/list_act.png" alt="">
            <img v-show="activeTit == 2" class="list_img" src="~@/assets/image/list_tit.png" alt="">
            <div v-show="activeTit == 1" class="bot_bor"></div>
          </div>
          <div class="tit_box" @click="changeTitle(2)">
            <img v-show="activeTit == 1" class="group_img" src="~@/assets/image/group_tit.png" alt="">
            <img v-show="activeTit == 2" class="group_act" src="~@/assets/image/group_act.png" alt="">
            <div v-show="activeTit == 2" class="bot_bor"></div>
          </div>
        </div>
        <div class="search_box">
           <el-input
              v-model="name"
              clearable
              placeholder="搜索关键字"
              suffix-icon="el-icon-search"
              @clear="searchHandle(1)"
            ></el-input>
        </div>
        <div class="list_box" v-show="activeTit == 1" v-infinite-scroll="load" :infinite-scroll-immediate="isSroll">
          <div class="list_item"  :class="activeDevice == item.id ? 'dev_act' : item.isSelect == 1 ? 'sele_devi' : ''"
          v-for="item in deviceData" :key="item.id" @mouseenter="enterDevice(item)" @mouseleave="leaveDevice">
            <div class="left_bor" v-show="activeDevice == item.id"></div>
            <div class="dev_img">
              <img v-show="activeDevice !== item.id" src="~@/assets/image/device.png" alt="">
              <img v-show="activeDevice == item.id" src="~@/assets/image/device_act.png" alt="">
            </div>
            <div class="device_name" :class="activeDevice == item.id ? 'act_dev_name' : ''">{{item.name}}</div>
            <div class="dev_btn_box">
              <div class="dev_btn" @click="inviteUser(item)" v-show="activeDevice == item.id">邀请</div>
              <div class="dev_btn del_btn" v-show="activeDevice == item.id" @click="deleteUser(item)">删除</div>
            </div>
            
          </div>
        </div>
        <div class="btn_box" v-show="activeTit == 1" @click="addUser">
          <img src="~@/assets/image/add_btn.png" alt="">添加用户
        </div>
        <div class="tree_box" v-show="activeTit == 2">
          <el-tree :data="treeData" node-key="id" :props="defaultProps" @node-click="handleNodeClick" :default-checked-keys="selectTreeNode">
            <!-- selectTreeNode.map(item => item == data.id) ? 'select_node_item' : -->
            <span class="custom-tree-node" @mouseenter="enterNode(node,data)" @mouseleave="leaveNode"
             :class="activeNode == data.id ? 'active_node_item' :  ''" 
            slot-scope="{ node, data }" >
              <i v-if="node.level == 1" class="spread_node"></i>
              <i v-if="node.level == 1" class="level_first" />
              <i v-else-if="node.level == 2" class="level_second" :class="activeNode == data.id ? 'active_level_second' : ''" />
              <span :class="node.level == 1 ? 'first_span' : node.level == 2 ? 'second_span' : ''">{{ data.label }}</span>
              <span v-if="node.level == 1" class="btn_level">邀请</span>
              <span v-if="activeNode == data.id" class="btn_level">邀请</span>
            </span>
          </el-tree>

        </div>
      </div>
      <div class="cen_con">
        <div class="cen_tit">
          <img src="~@/assets/image/voice_tit.png" alt="">
        </div>
        <div class="bottom_cen" v-show="inviteList.length > 1">
         
          <el-row :gutter="20">
            <el-col :span="8" v-for="item in inviteList" :key="item.id">
              <video class="bottom_item" id="item.id">
                <!-- <div class="item_tit">终端设备名称——调度组1</div>
                <div class="voice_con">
                  <img src="~@/assets/image/voice_bag.png" alt="">
                </div>
                <div class="voice_btn">
                  <img src="~@/assets/image/mute.png" alt="">
                  <img class="hang_btn" src="~@/assets/image/hang.png" alt="">
                </div> -->
              </video>
            </el-col>
            <!-- <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col>
            <el-col :span="8"><div class="bottom_item"></div></el-col> -->
          </el-row>
        </div>
        <div class="group_cen" v-show="inviteList.length == 1">
          <video class="group_video" src="" id="video">
            <!-- <div class="group_tit">{{inviteList.length == 1 ? inviteList[0].name : ''}}</div>
            <div class="group_voice">
              <img src="~@/assets/image/voice_bag.png" alt="">
            </div>
            <div class="voice_btn">
              <img src="~@/assets/image/mute.png" alt="">
              <img class="hang_btn" src="~@/assets/image/hang.png" alt="">
            </div> -->
          </video>
        </div>
        <div class="bot_cen">
          <img v-show="inviteList.length > 1" src="~@/assets/image/over.png" alt="">
          <img v-show="inviteList.length > 1" class="exit" src="~@/assets/image/exit_voice.png" alt="">
          <img v-show="inviteList.length == 1" src="~@/assets/image/finish.png" alt="">
          <img v-show="inviteList.length == 1" class="exit" src="~@/assets/image/exit_speak.png" alt="">
        </div>
      </div>
      <div class="right_con">
        <div class="right_tit">
          <img src="~@/assets/image/phone_tit.png" alt="">
        </div>
        <div class="phone_box">
          <div class="phone_tit"><span class="point"></span> 当前通话</div>
          <div class="phone_list">
            <div class="phone_item" v-for="item in phoneList" :key="item.id" :class="activePhone == item.id ? 'active_phone' : ''"
             @mouseenter="itemHover(item)" @mouseleave="leavePhone">
              <div v-show="activePhone == item.id" class="left_item"></div>
              <div class="time_box">{{item.time}}</div>
              <div class="center_txt">
                <img v-show="activePhone !== item.id" class="img" src="~@/assets/image/phone.png" alt="">
                <img v-show="activePhone == item.id" class="img" src="~@/assets/image/phone_act.png" alt="">
                <div>{{item.name}}</div>
              </div>
              <div v-show="activePhone == item.id" class="item_btn">请出</div>
            </div>
          </div>
          <div class="miss_tit">
            <span class="point"></span> 未接通话
          </div>
          <div class="miss_list">
            <div class="miss_item">
              <div class="miss_time">00:12:56</div>
              <div class="miss_name">终端设备名称——调度组1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="80%"
      custom-class="user_dialog"
      :before-close="handleClose">
       <el-table
            :data="userData"
            :key="index"
            border
            max-height="424"
            style="
              margin:0 auto;
              margin-bottom: 0.3rem;
              width: 100%;
            "
            header-cell-style="background-color:#fafafa;font-size:12px;color:black"
          >
            <el-table-column width="63px" fixed>
              <template slot="header">
                <el-button
                  circle
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  @click="addPeople()"
                />
              </template>
              <template slot-scope="scope">
                <el-button
                  circle
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="removePeople(scope.$index, scope.row,scope)"
                />
              </template>
            </el-table-column>
            <el-table-column fixed prop="" label="账号"  width="286" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.employeeId"
                  clearable
                  placeholder="账号"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="密码">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.password"
                  clearable
                  placeholder="密码"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
            <el-table-column  width="120" align="center" prop="" label="等级">
              <template slot-scope="scope">
                <el-select
                  style="width: 90%"
                  v-model="scope.row.employeeLevel"
                  clearable
                  filterable
                  placeholder="请选择等级"
                  size="medium"
                >
                  <el-option
                    v-for="(item, index) in levelList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="调度组">
              <template slot-scope="scope">
                <el-select
                  style="width: 90%"
                  v-model="scope.row.groupNum"
                  clearable
                  filterable
                  placeholder="请选择调度组"
                  size="medium"
                >
                  <el-option
                    v-for="(item, index) in groupList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="名称">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  clearable
                  placeholder="名称"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="类型">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.type"
                  clearable
                  readonly
                  placeholder="类型"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="是否录音">
              <template slot-scope="scope">
                <el-select
                  style="width: 90%"
                  v-model="scope.row.isRecord"
                  clearable
                  filterable
                  placeholder="请选择是否录音"
                  size="medium"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="是否录像">
              <template slot-scope="scope">
                <el-select
                  style="width: 90%"
                  v-model="scope.row.isVideo"
                  clearable
                  filterable
                  placeholder="请选择是否录像"
                  size="medium"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="经度">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.longitude"
                  clearable
                  readonly
                  placeholder="经度"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="纬度">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.latitude"
                  clearable
                  readonly
                  placeholder="纬度"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
            <el-table-column  width="286" align="center" prop="" label="备注">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  clearable
                  readonly
                  placeholder="备注"
                  size="medium"
                  style="width: 90%; margin-left: 5%"
                />
              </template>
            </el-table-column>
          </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getGroupList,deleteUser,addUser} from "@/api/dispatch/dispatch"
export default {
  name: "alarmCenter",
  data() {
    return{
      activeTit:1,
      name:'',
      activeDevice:'',
      activeNode:'',
      selectTreeNode:['002','009'],
      activePhone:'',
      dialogVisible:false,
      deviceData:[],
      isSroll:false,
      treeData: [{
          id:'001',
          label: '调度组名称1',
          children: [
            {
              id:'002',
              label: '终端设备名称1（1001）',
            },
            {
              id:'003',
              label: '终端设备名称2（1002）',
            },
            {
              id:'004',
              label: '终端设备名称3（1003）',
            },
            {
              id:'005',
              label: '终端设备名称4（1004）',
            },
          ]
        }, {
          id:'006',
          label: '调度组名称2',
          children: [
            {
              id:'007',
              label: '终端设备名称1（2001）',
            },
            {
              id:'008',
              label: '终端设备名称2（2002）',
            },
            {
              id:'009',
              label: '终端设备名称3（2003）',
            },
            {
              id:'010',
              label: '终端设备名称4（2004）',
            },
          ]
        }, {
          id:'011',
          label: '调度组名称1',
          children: [
            {
              id:'012',
              label: '终端设备名称1（3001）',
            },
            {
              id:'013',
              label: '终端设备名称2（3002）',
            },
            {
              id:'014',
              label: '终端设备名称3（3003）',
            },
            {
              id:'015',
              label: '终端设备名称4（3004）',
            },
          ]
        }],
      inviteList:[
        //  {id:'001',name:'终端设备名称1（1001）',isSelect:1},
      ],
      phoneList:[
        // {id:1,time:'00:12:23',name:'终端设备名称——调度组1'},
        // {id:2,time:'00:16:23',name:'终端设备名称——调度组2'},
        // {id:3,time:'00:01:23',name:'终端设备名称——调度组2'},
        // {id:4,time:'00:11:23',name:'终端设备名称——调度组2'},
      ],
      timer:null,
      time:'',
      date:'',
      userData:[
        {employeeId:'',password:'123456',employeeLevel:10,groupNum:null,name:'',type:'智能终端',isRecord:0,
        isVideo:0,longitude:null,latitude:null,remark:''},
      ],
      levelList:[
        {label:'1级',value:1},
        {label:'2级',value:2},
        {label:'3级',value:3},
        {label:'4级',value:4},
        {label:'5级',value:5},
        {label:'6级',value:6},
        {label:'7级',value:7},
        {label:'8级',value:8},
        {label:'9级',value:9},
        {label:'10级',value:10},
      ],
      groupList:[],
     
      listData:[
        {id:'001',name:'终端设备名称1（1001）',isSelect:0},
        {id:'002',name:'终端设备名称2（1002）',isSelect:0},
        {id:'003',name:'终端设备名称3（1003）',isSelect:0},
        {id:'004',name:'终端设备名称4（1004）',isSelect:0},
        {id:'005',name:'终端设备名称5（1005）',isSelect:0},
        {id:'006',name:'终端设备名称6（1006）',isSelect:0},
        {id:'007',name:'终端设备名称7（1007）',isSelect:0},
        {id:'008',name:'终端设备名称8（1008）',isSelect:0},
        {id:'009',name:'终端设备名称9（1009）',isSelect:0},
        {id:'010',name:'终端设备名称10（1010）',isSelect:0},
        {id:'011',name:'终端设备名称11（1011）',isSelect:0},
        {id:'012',name:'终端设备名称12（1012）',isSelect:0},
        {id:'013',name:'终端设备名称13（1013）',isSelect:0},
        {id:'014',name:'终端设备名称14（1014）',isSelect:0},
        {id:'015',name:'终端设备名称15（1015）',isSelect:0},
        {id:'016',name:'终端设备名称16（1016）',isSelect:0},
        {id:'017',name:'终端设备名称17（1017）',isSelect:0},
        {id:'018',name:'终端设备名称18（1018）',isSelect:0},
        {id:'019',name:'终端设备名称19（1019）',isSelect:0},
        {id:'020',name:'终端设备名称20（1020）',isSelect:0},
        {id:'021',name:'终端设备名称21（1021）',isSelect:0},
        {id:'022',name:'终端设备名称22（1022）',isSelect:0},
        {id:'023',name:'终端设备名称23（1023）',isSelect:0},
        {id:'024',name:'终端设备名称24（1024）',isSelect:0},
      ],
      startIndex:0,
      current:1,
    }
  },
  computed: {
  },
  mounted() {
  },
  created(){
    this.getTime();
    // this.load()
    this.getGroupData()
  },
  methods: {
    // 获取所有调度组
    getGroupData(){
      getGroupList().then(res =>{
        console.log(res)
      })
    },
    fn(str) {
      let num = null;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getTime() {
      //获取当前时间
      this.timer = setInterval(() => {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        this.day = date.getDay(); //获取当前星期几
        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
        this.date = year + "/" + (month + 1) + "/" + data;
      }, 1000);
    },
    // 邀请人员
    inviteUser(row){
      
      this.$confirm('确定要邀请该用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.isSelect = 1
          this.deviceData.find(item => item.id == row.id).isSelect = 1;
          this.inviteList.push(row)
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
    },
    // 无限滚动列表
    load(){
      // this.isSroll = true;
      // queryImmediateList({ curPage: this.current, pageRows: 10}).then((res) => {
      //   this.deviceData = this.deviceData.concat(res.data.records);
      //   this.current++;
      //   if (res.data.records.length == 0) {
      //      this.isSroll = false;
      //   }
      //   this.total = res.data.total;
      // });
      let arr = []
      let endIndex = this.startIndex + 10;
        this.isSroll = true;
        this.deviceData = this.deviceData.concat(this.listData.slice(this.startIndex, endIndex));
        arr =JSON.parse(JSON.stringify(this.listData)).slice(this.startIndex, endIndex)
        this.startIndex = endIndex;
        if(arr.length = 0){
          this.isSroll = false;
          this.startIndex = 0
        }
    },
    // 删除用户
    deleteUser(item){
      this.$confirm('确定要删除该用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser({intemployeeId:item.id}).then(res =>{
            if(res.state == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          })
          
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
      
    },
    // 批量添加用户
    addUser(){
      this.dialogVisible = true;
      this.$nextTick(() =>{
        this.$el.querySelector('.el-table__body-wrapper').scrollLeft = 0;
        this.userData = [
          {employeeId:'',password:'123456',employeeLevel:10,groupNum:null,name:'',type:'智能终端',isRecord:0,
          isVideo:0,longitude:null,latitude:null,remark:''},
        ];
      })
    },
    // 弹窗添加人员
    addPeople(){
      let tmp = this.userData.find(item => item.employeeId == '')
      if(tmp){
        this.$message({
          message:'请填写账号',
          type:'warning'
        })
      }else{
        this.userData.push(
          {employeeId:'',password:'123456',employeeLevel:10,groupNum:'',name:'',type:'智能终端',isRecord:0,
          isVideo:0,longitude:null,latitude:null,remark:''},
        );
      }
      
    },
    // 删除人员
    removePeople(index, row,val) {
      console.log(val)
      // if (row.id !== undefined) {
      //   this.$message({
      //     message: "编辑或者追加时无法删除",
      //     type: "warning",
      //   });
      // } else {
        if (index > 0 || this.userData.length > 1) {
          this.userData.splice(index, 1);
        } else {
          this.$message({
            message: "至少要填写一行",
            type: "warning",
          });
        }
      // }
    },
    userSubmit(){
      let paramsData = []
      let tmp = this.userData.find(item => item.employeeId == '');
      if(tmp){
        this.$message.error('请填写账号');
      }else{
        paramsData = JSON.parse(JSON.stringify(this.userData));
        paramsData.map(item =>{
          item.type = '6.0';
          item.name = item.name == '' ? item.employeeId : item.name
        })
        console.log(paramsData)
        addUser(JSON.stringify(paramsData)).then(res =>{
          console.log(res)
          if(res.code == 200){
            this.$message.success('添加成功！')
            this.deviceData = [];
            this.current = 1;
            this.load()
          }
        })
      }
    },
    // 切换标题  通讯录/调度组
    changeTitle(item){
      this.activeTit = item
    },
    //选择设备
    enterDevice(item){
      if(item.isSelect == 1){
        return
      }
      this.activeDevice = item.id
    },
    // 鼠标移出设备
    leaveDevice(){
      this.activeDevice = ''
    },
    // 鼠标进入树节点
    enterNode(node,data){
       if(node.level == 1){
        return;
      }else{
        let tmp = this.selectTreeNode.find(item => item == data.id)
        if(tmp){
          return
        }
        this.activeNode = data.id
      }
    },
    // 鼠标移出树节点
    leaveNode(){
      this.activeNode = ''
    },
    //鼠标进入通话记录
    itemHover(item){
      this.activePhone = item.id
    },
    //鼠标移出通话记录
    leavePhone(){
      this.activePhone = ''
    },
    // 点击树节点
    handleNodeClick(data,node){
     
    },
  },
};
</script>

<style lang="scss" scoped>
.voice_box{
  width: 19.2rem;
  height: 10.8rem;
  background: url("~@/assets/image/bag.png")  no-repeat;
  position: absolute;

  .top_header{
    width: 100%;
    height:1.2rem;
    background: url("~@/assets/image/top.png")  no-repeat;
    display: flex;
    justify-content: space-between;

    .left{
      width: 50%;
      .top_title{
        background: url('~@/assets/image/title.png') no-repeat;
        width: 4.22rem;
        height: 0.6rem;
        margin: 0.2rem 0 0 0.76rem;
      }
    }
    .right{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .top_right{
        width: 100%;
        height: 50%;
        display: flex;
        color: #DCE3F1;
        justify-content: flex-end;
        padding-top: 0.28rem;
        font-family: Microsoft YaHei;


        .date_box{
          font-size: 0.16rem;
          font-family: Microsoft YaHei;
          margin: 0.02rem 0.23rem 0 0;
        }
        .weather_box{
          width: 0.66rem;
          height: 0.44rem;
          display: flex;
          margin-top: -0.15rem;

          img{
            width: 100%;
            height: 100%;
          }
        }
        .weather_txt{
          font-size: 0.2rem;
        }

        .time_txt{
          margin: 0 0.21rem 0 0.33rem;
        }
      }
      .bottom_right{
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;

        .user_box{
          font-family: Microsoft YaHei;
          color: #D6EFFF;
          font-size: 0.16rem;
          display: flex;
          align-items: center;
          height: 0.4rem;

          .name_txt{
            margin: 0 0.33rem 0 0.14rem;
          }

          .exit_txt{
            margin: 0 0.24rem 0 0.09rem;
          }
        }
      }
    }
  }

  .bot_con{
    width: 100%;
    height: 9.24rem;
    margin-top: 0.15rem;
    display: flex;

    .left_con{
      width: 3.38rem;
      height: 100%;
      background: url("~@/assets/image/left_bag.png") no-repeat;
      margin-left: 0.2rem;

      .title_box{
        display: flex;
        margin-top: 0.33rem;
        justify-content: space-around;

        .tit_box{
          height: 0.5rem;
          display: flex;
          align-items: center;
          position: relative;
          cursor: pointer;

          .list_img{
            height: 0.15rem;
          }

          .group_img{
            height: 0.18rem;
          }
          .group_act{
            height: 0.34rem;
          }
          .bot_bor{
            width: 0.25rem;
            height: 0.03rem;
            background: #6CCDFF;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
          }
        }
      }
      .search_box{
          width: 2.8rem;
          height: 0.35rem;
          display: flex;
          margin: 0 auto;
          margin-top: 0.23rem;

          /deep/ .el-input--suffix .el-input__inner{
            background: rgba(3, 17, 40,0.6) !important;
            border: 1px solid #176CE8 !important;
            border-radius: 2px !important;
            color:  #D6EFFF;
            // box-shadow: inset 0px 0px 0.01rem 0.02rem rgba(65, 167, 255, 0.5);
          }
          /deep/.el-input__inner::placeholder {
            color:  rgba(214, 239, 255,0.6);
          }
          //图标的颜色
          /deep/ .el-input__icon {
            color: #41A7FF !important;
          }
        }
      .list_box{
        width: 92%;
        height: 6.6rem;
        margin: 0 auto;
        margin-top: 0.33rem;
        overflow: auto;

        .list_item{
          width: 2.8rem;
          height: 0.35rem;
          cursor: pointer;
          margin: 0 auto;
          color: #D6EFFF;
          position: relative;
          margin-bottom: 0.15rem;

          &.dev_act{
            background: rgba(3, 17, 40,0.6);
            border: 1px solid #176CE8;
            border-radius: 2px;
          }

          &.sele_devi{
            opacity: 0.4;
          }

          .left_bor{
            width: 0.03rem;
            height: 0.35rem;
            background: #6CCDFF;
            position: absolute;
            left: -0.08rem;
          }

          .dev_img{
            display: flex;
            float: left;
            height: 100%;
            display: flex;
            align-items: center;
            margin: 0 0.06rem 0 0.06rem;
            img{
              width: 0.28rem;
              height: 0.28rem;
            }
          }
          .device_name{
            float: left;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 0.35rem;
            width: 2.3rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &.act_dev_name{
              width: 1.5rem;
            }
          }
          .dev_btn_box{
            width: 0.85rem;
            height: 0.35rem;
            position: absolute;
            right: 0.05rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
          
            .dev_btn{
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              float: right;
              width: 0.4rem;
              height: 0.25rem;
              // margin-right: 0.5rem;
              // margin-top: 0.045rem;
              background: #176CE8;
              border-radius: 2px;
              color: #fff;
              text-align: center;
              line-height: 0.25rem;

              &.del_btn{
                background: #D83030;
              }
            }
          }
        }
      }
      .list_box::-webkit-scrollbar{
        width: 0.05rem;
        height: 6.87rem;
        background: rgba(23, 108, 232,0.4);
        border-radius:0.03rem;
      }
      .list_box::-webkit-scrollbar-thumb{ 
        display:block; 
        margin:0 auto; 
        width: 0.05rem;
        background: rgba(108, 205, 255,0.6);
        border-radius: 0.03rem;
      }

      .btn_box{
        width: 1rem;
        height: 0.3rem;
        background: rgba(23, 108, 232,0.8);
        border-radius: 0.04rem;
        color:#D6EFFF;
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        margin-top: 0.25rem;
        cursor: pointer;

        img{
          margin-right: 0.1rem;
        }
      }

      .tree_box{
        width: 92%;
        height: 6.6rem;
        margin: 0 auto;
        margin-top: 0.33rem;
        overflow: auto;

        .el-tree{
          background: transparent;
          font-size: 0.14rem;
          color: #fff;

          /deep/.el-tree-node__content{
            width: 2.8rem;
            margin: 0 auto;
            height: 0.35rem;
            margin-bottom: 0.15rem;
            padding: 0 !important;
          }

        .spread_node{
          background: url("~@/assets/image/spread_btn.png");
          width: 0.18rem;
          height: 0.18rem;
          display: inline-block;
          background-size: 100% 100%;
          float: left;
          margin-top: 0.085rem;
          margin-left: -0.12rem;
        }
        .level_first {
          background: url("~@/assets/image/tree.png");
          width: 0.28rem;
          height: 0.28rem;
          display: inline-block;
          background-size: 100% 100%;
          float: left;
          margin-top: 0.035rem;
          margin-right: 0.05rem;
        }
        .level_second {
          background: url("~@/assets/image/device.png");
          width: 0.28rem;
          height: 0.28rem;
          display: inline-block;
          background-size: 100% 100%;
          float: left;
          margin-top: 0.02rem;
          margin-left: 0.06rem;
          margin-right: 0.06rem;
        }
        .first_span{
          color: #41A7FF;
          line-height: 0.35rem;
        }

        .second_span{
          color: #D6EFFF;
          line-height: 0.35rem;
        }

        .btn_level{
          display: inline-block;
          width: 0.3rem;
          width: 0.5rem;
          height: 0.25rem;
          background: #176CE8;
          border-radius: 0.02rem;
          text-align: center;
          float: right;
          margin: 0.05rem;
          line-height: 0.25rem;
        }

        /deep/.is-expanded{
          .spread_node{
            transform: rotate(90deg);
          }
        }
        /deep/.is-checked{
          .custom-tree-node{
            opacity: 0.4;
          }
        }
        /deep/.el-tree-node.is-current>.el-tree-node__content{
          background: transparent;
        }

        /deep/ .custom-tree-node{
          width: 100%;
          height: 0.35rem;
          margin-top: 0.03rem;
        }

        /deep/ .active_node_item{
          background: rgba(3, 17, 40,0.6);
          border: 1px solid #176CE8;
          border-radius: 0.02rem;
          .second_span{
            color: #41A7FF;
          }

          .active_level_second{
            background: url("~@/assets/image/device_act.png");
          }
        }

        /deep/ .select_node_item{
          opacity: 0.4;
        }

        /deep/ .el-tree-node__content:hover{
          background: transparent;
        }
        /deep/.el-icon-caret-right:before{
          content: none;
        }
        /deep/ .el-tree-node.is-current>.el-tree-node__content{
          color: #fff;
        }

        }
      }
      .tree_box::-webkit-scrollbar{
        width: 0.05rem;
        height: 6.87rem;
        background: rgba(23, 108, 232,0.4);
        border-radius:0.03rem;
      }
      .tree_box::-webkit-scrollbar-thumb{ 
        display:block; 
        margin:0 auto; 
        width: 0.05rem;
        background: rgba(108, 205, 255,0.6);
        border-radius: 0.03rem;
      }
    }
    

    .cen_con{
      width: 11.68rem;
      height: 100%;
      background: url("~@/assets/image/cen_bag.png") no-repeat;
      margin: 0 0.2rem;

      .cen_tit{
        height: 0.37rem;
        display: flex;
        margin: 0.33rem 0 0 0.2rem;
      }

      .bottom_cen{
        width: 11.2rem;
        height: 7.35rem;
        margin: 0 auto;

        .bottom_item{
          width: 3.6rem;
          height: 2.25rem;
          background: #233449;
          margin-top: 0.2rem;
          display: flex;
          flex-direction: column;

          .item_tit{
            width:100%;
            margin: 0.2rem 0 0 0.2rem;
            font-size: 0.14rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #D6EFFF;
          }
          .voice_con{
            width: 100%;
            height: 0.18rem;
            display: flex;
            justify-content: center;
            margin-top: 0.8rem;
          }

          .voice_btn{
            display: flex;
            justify-content: end;
            margin-top: 0.37rem;

            .hang_btn{
              margin: 0 0.18rem 0 0.1rem;
            }
          }
        }
      }
      .group_cen{
        width: 11.2rem;
        height: 7.35rem;
        margin: 0 auto;
       
        .group_video{
          width: 100%;
          height: 100%;
          
          background: #233449;
          margin-top: 0.2rem;
          display: flex;
          flex-direction: column;
        }
       

        .group_tit{
          width: 100%;
          font-size: 0.14rem;
          margin: 0.2rem 0 0 0.2rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #D6EFFF;
        }

        .group_voice{
          width: 100%;
          display: flex;
          margin-top: 3.18rem;
          justify-content: center;
        }

        .voice_btn{
          display: flex;
          justify-content: end;
          margin-top: 3.07rem;

          .hang_btn{
            margin: 0 0.18rem 0 0.1rem;
          }
        }
        
      }

      .bot_cen{
        width: 100%;
        height: 0.44rem;
        margin-top: 0.3rem;
        display: flex;
        justify-content: end;

        .exit{
          margin: 0 0.3rem;
        }
      }
    }
    .right_con{
      width: 3.36rem;
      height: 100%;
      background: url("~@/assets/image/right_bag.png") no-repeat;

      .right_tit{
        display: flex;
        margin-top: 0.43rem;
        margin-left: 0.28rem;
      }

      .phone_box{
        width: 2.8rem;
        height: 3rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        .phone_tit{
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #3593F8;
          display: flex;
          align-items: center;
          margin: 0.15rem 0 0 0.18rem;

          .point{
            width: 0.1rem;
            height: 0.1rem;
            display: inline-block;
            background: #3593F8;
            border-radius: 50%;
            margin-right: 0.04rem;
          }
        }

        .phone_list{
          width: 100%;
          margin-top: 0.16rem;
          padding-bottom: 0.1rem;
          border-bottom: 1px dashed #2C81DB;
          
          
          .phone_item{
            width: 100%;
            height: 0.35rem;
            margin-bottom: 0.15rem;
            cursor: pointer;
            position: relative;

            

            &.active_phone{
              background: rgba(3, 17, 40,0.6);
              border: 1px solid #176CE8;
              border-radius: 0.02rem;
            }

            .time_box{
              height: 100%;
              float: left;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;
              margin-left: 0.15rem;
            }

            .center_txt{
              float: left;
              height: 100%;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;

              .img{
                margin: 0 0.08rem 0 0.06rem;
              }
            }

            .left_item{
              width: 0.03rem;
              height: 0.35rem;
              background: #6CCDFF;
              position: absolute;
              left: -0.08rem;
            }

            .item_btn{
              width: 0.5rem;
              height: 0.25rem;
              background: #D83030;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #FFFFFF;
              position: absolute;
              right: 0.05rem;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 0.02rem;
            }
          }
        }

        .miss_tit{
           font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #E8991D;
          display: flex;
          align-items: center;
          margin: 0.3rem 0 0 0.18rem;

          .point{
            width: 0.1rem;
            height: 0.1rem;
            display: inline-block;
            background: #E8991D;
            border-radius: 50%;
            margin-right: 0.04rem;
          }
        }

        .miss_list{
          width: 100%;
          margin-top: 0.16rem;

          .miss_item{
            width: 100%;
            height: 0.35rem;
            margin-bottom: 0.15rem;
            cursor: pointer;
            opacity: 0.4;

            .miss_time{
              height: 100%;
              float: left;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;
              margin-left: 0.15rem;
              margin-right: 0.2rem;
            }

            .miss_name{
              float: left;
              height: 100%;
              display: flex;
              align-items: center;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #D6EFFF;
            }
          }
        }

        
      }
    }
  }
}
</style>

<style lang="scss">
  .user_dialog{
    // background: red;

    .el-dialog__header{
      display: flex;
    }

    .dialog-footer{
      height: 0.45rem;
      display: flex;
      justify-content: end;
    }
  }

  .el-message .el-icon-warning{
    font-size: 0.16rem;
  }
  .el-message .el-icon-error{
    font-size: 0.16rem;
  }
  .el-message .el-icon-success{
    font-size: 0.16rem;
  }
</style>

