<template>
  <div>
    <!-- <el-button
      class="drawerButton"
      type="primary"
      v-show="!showComingBox"
      @click="showInComing"
    >
      展开
    </el-button> -->
    <el-card v-if="showComingBox" class="drawerPhone">
      <el-row style="height: 100%">
        
        <!-- <el-col :span="2"></el-col> -->
        <el-col :span="12" style="position: relative">
          <el-tabs type="border-card" style="height: 100%">
            <el-tab-pane :label="orderType ==4000?'用户信息':'客户档案'">
              <div class="tabList">
                <patient-detail v-if="orderType !=4000" :patientCallNumber="patientCallNumber" :descColumn="3"></patient-detail>
                <user-detail v-if="orderType ==4000" :patientCallNumber="patientCallNumber" :descColumn="3"></user-detail>
              </div>
            </el-tab-pane>
            <el-tab-pane label="知识库">
              <div class="tabList">
                <knowledge-list></knowledge-list>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="12">
          <page-order 
          @refreshOrder="hideInComing"
          @orderTypeChange="getOrderType"
          :inCommingData="callData"
          ></page-order>
        </el-col>
      </el-row>
    </el-card>
    <el-button type="primary" v-show="showComingBox" @click="hideInComing" class="hideBtn"
      >隐藏</el-button
    >
  </div>
</template>
<script setup>
  import PageOrder from '@/components/page-order'; 
  import patientDetail from "@/views/main/patientFile/patientFileList/cpns/patientDetail/patientDetail";
  import userDetail from "@/views/main/patientFile/patientFileList/cpns/patientDetail/userDetail";

  import knowledgeList from "@/views/main/knowledgeBase/knowledgeList/knowledgeList";

  import useSocketStore from '@/store/modules/socket';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
  const inComingData = computed(() => {
    return useSocketStore().incomingData;
  });
  watch(inComingData, (newValue, oldValue) => {
    if (newValue) {
      inComingBack(newValue);
    }
  });
  function turnKnowledge() {
    window.open('/knowledgeBase/knowledgeListOuter?outerFlag=1', '_blank');
  }
  const showComingBox = ref(false);
  const orderType = ref('') 
  const callData = ref();
  const patientCallNumber = ref('')
  const callState = ref('1');
  const orderNumber = ref('');
  //显示
  function showInComing() {
    showComingBox.value = true;
  }
  //隐藏
  function hideInComing() {
    showComingBox.value = false;
  }
  function getOrderType(val) {
    orderType.value = val
  }
  function inComingBack(telWSData) {
    console.log('telWSData', telWSData);
    // showComingBox.value = true; // 打开旧的弹屏
    callData.value = telWSData;
    patientCallNumber.value = telWSData.Number
    const callNumber = telWSData.Number
    router.push({
      path: '/inComming/callScreen/'+ callNumber + `?callid=`,
    });
  }
</script>

<style lang="scss" scoped>
  .tabList {
      height: calc(100vh - 280px);
      margin-bottom: 15px;
      scrollbar-width: none;
      /* firefox */
      -ms-overflow-style: none;
      /* IE 10+ */
      overflow-x: hidden;
      overflow-y: auto;
  }
  .tel_input {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;

      .el-input__inner {
        cursor: default !important;
      }
    }
  }

  .drawerButton {
    position: fixed;
    right: 0px;
    top: 84px;
    z-index: 3;
    box-shadow: -1px -1px 1px #b6b6b6;
  }

  .drawerPhone {
    position: fixed;
    left: 200px;
    top: 84px;
    width: calc(100% - 200px);
    height: calc(100vh - 80px);
    overflow-y: scroll;
    background: #ffffff;
    z-index: 3;
    box-shadow: -1px -1px 1px #b6b6b6;

    .buttonStyle {
      margin: 8px;
    }
    :deep(.el-card__body) {
      height: 100% !important;
    }
  }

  .hideBtn {
    position: fixed;
    right: 0px;
    top: 84px;
    z-index: 3;
  }

  .plate {
    text-align: center;
    margin-top: 20px;

    .bottomBtn {
      margin-top: 20px;
    }

    div.tel_input {
      font-size: 26px;
      margin-bottom: 22px;
      width: 186px;

      .el-input__inner {
        background-color: #42484d;
        color: #ffffff;
        font-size: 26px;
        width: 100%;
      }
    }

    .btn_nums {
      background-color: #1f2129;
      width: 63px;
      height: 63px;
      font-size: 28px;
      border-color: transparent;
      margin-bottom: 8px;
    }

    .btn_nums:hover {
      box-shadow: 0px 0px 20px #7e7e7e;
    }

    .btn_nums:active {
      background-color: #409eff;
    }

    .btn_yonghu {
      position: absolute;
      right: 12px;
      bottom: 12px;
      color: #ffffff;
      cursor: pointer;
    }
  }

  .aiDialog{
    z-index: 2033;
    pointer-events: none;
    :deep(.el-dialog) {
      position: absolute;
      height: 700px;
      top: 50px;
      right: 0;
      margin: 0;
      left: unset;
      pointer-events: auto;
    }
  }
</style>
