<template>
  <div class="ModelRongYun">
    <!-- 触发按钮 -->
    <div class="contentSlot">
      <slot name="center"
            :OpenRongYUnDialog="OpenRongYUnDialog"></slot>
    </div>
    <!-- <div class="btn" :style="{ 'left': `${posLeft}px` }" @click="OpenRongYUnDialog"></div> -->
    <!-- 视频弹窗 -->

    <div id="pop-up"
         v-if="dialogVisible"
         class="seletepeople2">
      <div class="leftangle"></div>
      <div class="rightangle"></div>

      <div class="weather-head">
        <div class="head-bg">选择人员</div>
        <el-icon class="weather-icon"
                 size='18'
                 color="#1096DB"
                 @click="closevisible">
          <Close />
        </el-icon>
      </div>
      <div class="custom-body"
           style="height: 100%;">
        <ModalContact v-if="dialogVisible"></ModalContact>
      </div>
    </div>

    <!-- <el-dialog v-model="dialogVisible"
               :append-to-body="true"
               :close-on-click-modal="false"
               class="responseDialog"
               custom-class="my-dialog"
               center
               :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <img @click="dialogVisible = false"
               src="@/assets/images/zhubo/gb_btn.png"
               alt=""
               style="cursor: pointer; position: absolute; right: 30px; top: 30px" />
        </div>
      </template>
      <ModalContact v-if="dialogVisible"></ModalContact>

      <ModalContact v-if="dialogVisible && Boxtype == 'DP'"></ModalContact>
      <OnDutyToday v-if="dialogVisible && Boxtype == 'Tab'"></OnDutyToday>
    </el-dialog> -->

    <!-- 融云 -->

    <div id="pop-up"
         v-if="RYShow"
         class="seletepeople3">
      <div class="leftangle"></div>
      <div class="rightangle"></div>

      <div class="weather-head">
        <div class="head-bg">视频会商</div>
        <el-icon v-show="RongYunWindow"
                 class="weather-icon"
                 size='18'
                 color="#1096DB"
                 @click="clearRY">
          <Close />
        </el-icon>
      </div>
      <div class="custom-body"
           style="height: 100%;">
        <RongYunBox ref="rongYun"
                    v-if="RYShow"
                    :ryUser="ryUser"
                    @close="close"
                    :callType="callType"></RongYunBox>
      </div>
    </div>

    <!-- <el-dialog :close-on-click-modal="false"
               v-model="RYShow"
               class="RongYunWindowShow"
               custom-class="call-dialog"
               :show-close="false">
      <template #header="{ close, titleId, titleClass }"> </template>
      <div class="RYdia"
           v-if="RYShow">
        <div class="topBox">
          <div class="boxName">
            <i class="el-icon-caret-right"></i>
            视频会商
          </div>
          <div class="closeBtn"
               v-show="RongYunWindow">
            <close class="el-icon-close"
                   style="
                width: 1em;
                height: 1em;
                vertical-align: middle;
                cursor: pointer;
              "
                   @click="clearRY" />
          </div>
        </div>
        <RongYunBox ref="rongYun"
                    v-if="RYShow"
                    :ryUser="ryUser"
                    @close="close"
                    :callType="callType"></RongYunBox>
      </div>
    </el-dialog> -->
  </div>
</template>

<script setup>
import ModalContact from "@/components/ModalContact/index.vue";
import OnDutyToday from "@/components/ModalContact/OnDutyToday.vue";
import RongYunBox from "@/components/rongyun/RongYunBox.vue";
import bus from "@/utils";
// import { deptUserTree } from "@/api/fxkhPage/crossLookSqualls";
const allData = reactive({
  callType: "2",
  ryUser: "",
  dialogVisible: true,
  // 融云
  RYShow: false,
  RongYunWindow: true,
  Getphone: "1123598821738675201",
  getmediaType: 2,
  UserTreeData: [],
  form: {
    UserIds: [],
  },
  rules: {
    UserIds: [{ required: true, message: "请选择人员", trigger: "change" }],
  },
  UserTreeProps: {
    multiple: true,
    value: "id",
    label: "name",
    emitPath: false,
  },
});
const rongYun = ref();
const {
  callType,
  ryUser,
  dialogVisible,
  // 融云
  RYShow,
  RongYunWindow,
  Getphone,
  getmediaType,
  UserTreeData,
  form,
  rules,
  UserTreeProps,
} = toRefs(allData);
const props = defineProps({
  posLeft: {
    type: Number,
    default: () => {
      return "-50";
    },
  },
  Boxtype: {
    type: String,
    default: () => {
      // 默认大屏
      return "DP";
    },
  },
});
// components: {
//   RongYunBox,
//   ModalContact,
//   OnDutyToday,
// }
function closevisible () {
  allData.dialogVisible = false;
  bus.emit('changeactiveitem')
}

onMounted(() => {
  bus.off("OffRongYun"),
    bus.on("OffRongYun", (data) => {
      allData.RYShow = true;
      allData.ryUser = data;
      allData.callType = data.type;
    });
  bus.off("OffRongYunWindow"),
    bus.on("OffRongYunWindow", (data) => {
      allData.RongYunWindow = data;
    });
});

const OpenRongYUnDialog = () => {
  console.log("融云触发");
  allData.dialogVisible = true;
  allData.form.UserIds = [];
  // allData.loadAddZLUser();
};
//呼叫融云
const callRonYunHandel = () => {
  allData.$refs["ruleForm"].validate((valid) => {
    if (valid) {
      // alert('submit!');
      allData.dialogVisible = false;
      allData.RongYunWindow = true;
      allData.RYShow = true;
    } else {
      // console.log('error submit!!');
      return false;
    }
  });
};
// 融云清除
const clearRY = () => {
  console.log(rongYun.value, "rongYun");
  rongYun.value.close();
  allData.RYShow = false;
};
// 获取新增指令所有的人员
const loadAddZLUser = () => {
  deptUserTree()
    .then((res) => {
      allData.UserTreeData = res.data.data;
    })
    .catch(() => { });
};
</script>
<style lang="scss">
.my-dialog {
  width: 680px !important;
  height: 600px !important;
  // background: url("@/assets/images/zhubo/tkbj_img.png") no-repeat !important;
  background-size: 100% 100% !important;
}
.call-dialog {
  width: 860px !important;
  height: 510px !important;
  background: transparent !important;
  // background-size: 100% 100% !important;
}
</style>
<style lang="scss" scoped>
//@import "@/assets/styles/cockpit.scss";

.ModelRongYun {
  // .btn {
  //   width: 34px;
  //   height: 34px;
  //   position: absolute;
  //   // left: -50px;
  //   top: 50%;
  //   margin-top: -17px;
  //   cursor: pointer;
  //   z-index: 101;
  //   background: url("~@/assets/images/zhubo/RongYun_icon.png") no-repeat center;
  // }
}

.responseDialog {
  #TitleDiv {
    width: 100%;
    height: 76px;
    line-height: 76px;
    font-size: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 30px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #f9feff;
    padding: 3px 20px;
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#9bd8ff),
      to(#d4edff)
    );
    background: linear-gradient(0deg, #9bd8ff 0%, #d4edff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  :deep(.el-dialog__header) {
    display: none;
  }
  :deep(.el-dialog__body) {
    padding: 0;
    width: 100%;
    height: calc(100% - 80px);
  }
  ::deep(.el-dialog) {
    width: 680px;
    height: 550px;
    // background: url("@/assets/images/zhubo/tkbj_img.png") no-repeat;
    background-size: 100% 100%;
  }

  #DialogForm {
    width: 100%;
    max-height: calc(100% - 75px);
    box-sizing: border-box;
    padding-top: 20px;
    overflow: auto;

    :deep().el-form-item__label {
      color: #c0c3c6;
    }
    :deep(.el-input__inner),
    :deep(.el-textarea__inner) {
      background: #031c33;
      border: 1px solid #22598b;
      opacity: 0.8;
      border-radius: 4px;
      color: #5691b2;
    }
    :deep(.el-select .el-input .el-select__caret) {
      color: #00b4ff;
    }
    :deep(.el-checkbox) {
      color: #c0c3c6;
    }
    :deep(.el-checkbox__inner) {
      border: 1px solid #00b4ff;
      background: none;
    }
  }
}

.RongYunWindowShow {
  :deep(.el-dialog__header) {
    display: none;
  }
  :deep(.el-dialog__body) {
    padding: 0;
    width: 100%;
    height: calc(100% - 80px);
  }
}

.RYdia {
  position: fixed;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: #185d7fba;
  border-radius: 5px;
  min-height: 250px;
  min-width: 250px;
  max-width: 1370px;
  width: 854px;
  height: auto;
  .topBox {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
}
</style>