通讯-- 通讯录

<!-- 通讯-- 通讯录 -->
<template>
  <div class="telBar-wrap com-pop-wrap">
    <div class="big-light"></div>
    <div class="small-light"></div>
    <div class="com-drag-header drag-ing" v-drag>
      <div class="close" @click="closePanel">×</div>
    </div>
    <span class="deg-1"></span>
    <span class="deg-2"></span>
    <span class="deg-3"></span>
    <span class="deg-4"></span>

    <div class="pop-outer">
      <div class="com-pop-tab">
        <div class="tab-item" :class="{'active': currentTab === 0}" @click="changeTab(0)">通讯录</div>
        <div class="tab-item" :class="{'active': currentTab === 1}" @click="changeTab(1)" v-if="eventDetailObj">总指挥部</div>
        <div class="tab-item" :class="{'active': currentTab === 2}" @click="changeTab(2)" v-if="eventDetailObj">现场指挥部</div>
      </div>

      <div class="fast-call" v-show="(currentTab === 1 || currentTab === 2) && fastData.length">
        <div class="calling-button" :class="{'active': isFastCall}" @click="fastCall">
          <span>一键呼叫</span>
        </div>
      </div>

      <div class="fast-panel com-pop-wrap" v-show="(currentTab === 1 || currentTab === 2) && fastData.length">
        <span class="deg-1"></span>
        <span class="deg-2"></span>
        <span class="deg-3"></span>
        <span class="deg-4"></span>
        <div class="fast-inner">
          <el-scrollbar class="custom-el-scrollbar" style="height: 880px;">
            <div class="fast-list">
              <div class="fast-item" v-for="(item, index) in fastData" :key="index" v-if="item.tel !== ''">
                <div class="fast-close" v-show="!isFastCall" @click="removeFast(item.tel, item.name)">×</div>
                <div class="fast-name">{{item.org}}</div>
                <div class="fast-info">
                  <div class="name">{{item.type === 1 ? '主要领导' : '联络员'}}: <span class="big" style="color: #ffff5e;">{{item.name}}</span></div>
                  <div class="job of-1">职务: <span class="big">{{item.job}}</span></div>
                  <div class="number">{{item.tel | hidePhone}}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <div class="pop-inner">
        <!--   通讯录   -->
        <MailList v-if="currentTab === 0"></MailList>
        <!--   总指挥部   -->
        <ZongCommand :type="currentTab" v-if="currentTab === 1 || currentTab === 2" @tel-change="handleFastChanged"></ZongCommand>
      </div>

    </div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Watch,
  Emit,
  Inject
} from "vue-property-decorator";
import { telServer } from "@/api/installServer";
import MailList from "@/views/common/MailList.vue";
import ZongCommand from "@/views/common/ZongCommand.vue";

@Component({
  name: "TelBar",
  components: {
    MailList,
    ZongCommand
  }
})
export default class TelBar extends Vue {
  private currentTab: any = 0;
  private isFastCall: any = false;
  private fastData: any = [];
  private changeTab(index: any) {
    this.currentTab = index;
  }
  private closePanel() {
    this.$store.commit("baseModule/setShowTelPanel", false);
  }
  get eventDetailObj() {
    return this.$store.state.eventModule.currentResponseLevel;
  }
  private fastCall() {
    let arr: any = [];
    this.fastData.forEach((d: any) => {
      if (d.tel !== "") {
        arr.push(d.tel);
      }
    });

    if (!this.isFastCall) {
      // 发起组呼
      telServer
        .callGroupNumber({ calledNumber: arr.join(",") })
        .then((res: any) => {
          console.log(res);
        });
    } else {
      // 挂断组呼
      telServer
        .brokenGroupNumber({ calledNumber: arr.join(",") })
        .then((res: any) => {
          console.log(res);
        });
    }

    this.isFastCall = !this.isFastCall;
  }
  private handleFastChanged(data: any) {
    this.fastData = data;
  }
  private removeFast(tel: any, name: any) {
    this.fastData = this.fastData.filter((res: any) => {
      return res.tel !== tel && res.name !== name;
    });
  }
}
</script>
<style lang="less" scoped>
.telBar-wrap {
  position: absolute;
  left: 700px;
  top: 160px;
  width: 1600px;
  height: 910px;
  z-index: 3;
  .pop-outer {
    padding: 24px 0;
    .com-pop-tab {
      width: 1050px;
      margin: 0 auto;
      .tab-item {
        flex: 0 0 auto;
        width: 350px;
        flex-basis: 350px;
      }
    }
    .pop-inner {
      padding: 30px 30px 0;
    }
    .fast-call {
      position: absolute;
      right: 60px;
      top: 0;
      .calling-button {
        width: 170px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        margin: 15px auto 0;
        font-size: 20px;
        cursor: pointer;
        background: url("../../assets/img/tel/btn_n.png") no-repeat center
          center;
        &.active {
          background-image: url("../../assets/img/tel/btn_p.png");
          color: #ffff5e;
          &:before {
            background-image: url("../../assets/img/tel/icon_tel_p.png");
          }
        }
        &:before {
          content: "";
          display: inline-block;
          vertical-align: -4px;
          width: 20px;
          height: 20px;
          margin-right: 10px;
          background: url("../../assets/img/tel/icon_tel_n.png") no-repeat
            center center;
        }
      }
    }
    .fast-panel {
      position: absolute;
      left: calc(100% + 20px);
      top: 0;
      width: 460px;
      height: 100%;
      .fast-inner {
        .fast-list {
          display: flex;
          flex-wrap: wrap;
          padding-left: 10px;
          padding-top: 10px;
          .fast-item {
            flex: 0 0 auto;
            width: 204px;
            height: 180px;
            border: 2px solid #078495;
            font-size: 16px;
            color: #fff;
            margin-left: 10px;
            margin-top: 10px;
            position: relative;
            background: #042231;
            .fast-close {
              position: absolute;
              right: 0;
              top: 0;
              width: 42px;
              height: 42px;
              text-align: center;
              line-height: 32px;
              font-size: 30px;
              color: #00e3ff;
              cursor: pointer;
              opacity: 0.6;
              &:hover {
                opacity: 1;
              }
            }
            .fast-name {
              text-align: center;
              height: 42px;
              line-height: 42px;
              background-color: #073c57;
              border-bottom: 2px solid #078495;
            }
            .fast-info {
              line-height: 30px;
              padding: 20px;
              text-align: left;
              font-size: 16px;
              .big {
                font-size: 18px;
              }
              .number {
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}
</style>