mediate-manage-web/src/pages/mediation-page/components/caseVideoReservationDialog.vue

<template>
  <div class="case-videoReservation-dialog p-16">
    <div class="flex-row justify-content-between width100 pl-16 pr-16 pt-6 pb-16 bor-E5E6EB">
      <div class="color-000 f-weight600 f16">视频调解预约</div>
      <div class="f16 cursor-pointer" @click="handleClose"><i class="el-icon-close"></i></div>
    </div>
    <div class="pl-16 pr-16">
      <div class="flex-row justify-content-between align-items-center pt-16 pb-16">
        <div class="flex-row justify-content-between">
          <div class="pt-6 pb-6 ml-16 mr-16 cursor-pointer"
               v-for="(item,index) in videoTypeList" :key="index"
               :class="{ 'actionVideo': item.value === queryCondition.type }"
               @click="selectType(item.value)">
            {{item.label}}</div>
        </div>
        <div class="f14 pt-6 pb-6 pl-16 pr-16 cursor-pointer color-fff bag-BC6F60"
             @click="VideoDialog={caseId:visiblePopover.caseId}">新增预约</div>
      </div>
      <div class="p-16 border-radius-8 border-solid-lighter-1">
        <el-scrollbar :style="'height: 130px'">
          <div class="pb-6 pt-6 bor-E5E6EB" v-for="(item, index) in videoTableData" :key="index">
            <div class="flex-row justify-content-between">
              <div class="flex-row">
                <div class="mr-8 color-000 f-weight600 f16">
                  {{item.bookingTime}}
                </div>
                

                <el-tag v-if="$util.getTimeContrast(item.bookingEndTime)" size="small" :type="queryCondition.type?'success':''">{{ queryCondition.type ? '已视频' : '待视频' }}</el-tag>
                <el-tag v-else size="small" type="warning">已过期</el-tag>
              </div>
              <div class="flex-row align-items-center">
                
                <div v-if="$util.getTimeContrast(item.bookingEndTime)" >
                  <div class="f16 mr-8 cursor-pointer"
                      v-if="item.roomId && item.sdkAppId && item.userId && item.userSig && (item.status.code === 0 || item.status.code === 1)"
                      @click="handleVideoCall(item)">
                    <i class="el-icon-video-camera"></i>
                  </div>
                </div>

                <div class="f16 mr-8 cursor-pointer"
                     v-if="item.status.code === 0 && timeComparison(item.bookingTime)"
                     @click="VideoEditDialog={id:item.id, bookingTime:item.bookingTime}">
                  <i class="el-icon-edit-outline"></i>
                </div>
                <div class="f16 mr-8 cursor-pointer"
                     v-if="item.status.code === 0 && timeComparison(item.bookingTime)"
                     @click="handleBackCase(item)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
            </div>
            <div class="flex-row justify-content-between align-items-center">
              <div class="f12">{{item.content}}</div>
              <!-- <div class="flex-row align-items-center">
                <div class="f16 mr-8 cursor-pointer"
                     v-if="item.roomId && item.sdkAppId && item.userId && item.userSig && (item.status.code === 0 || item.status.code === 1)"
                     @click="handleVideoCall(item)">
                  <i class="el-icon-video-camera"></i>
                </div>
                <div class="f16 mr-8 cursor-pointer"
                     v-if="item.status.code === 0"
                     @click="VideoEditDialog={id:item.id, bookingTime:item.bookingTime}">
                  <i class="el-icon-edit-outline"></i>
                </div>
                <div class="f16 mr-8 cursor-pointer"
                     v-if="item.status.code === 0"
                     @click="handleBackCase(item)">
                  <i class="el-icon-delete"></i>
                </div>
              </div> -->
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <!-- 视频预约 -->
    <VideoReservationDialog v-if="VideoDialog" :eventDialog.sync="VideoDialog" />
    <!--  视频预约修改  -->
    <videoReservationEditDialog v-if="VideoEditDialog" :eventDialog.sync="VideoEditDialog" />
    <!--  视频房间  -->
<!--    <VideoRoom v-if="VideoCallDialog" :eventDialog.sync="VideoCallDialog" />-->
  </div>
</template>

<script>
import videoTelephone from "@/services/videoTelephone";
export default {
  name: "caseVideoReservationDialog",
  components: {
    VideoReservationDialog: () => import('./VideoReservationDialog'),//视频预约
    videoReservationEditDialog: () => import('../../event-tracing/components/videoReservationDialog'),//视频预约修改
    // VideoRoom: () => import('./VideoRoom'),
  },
  props: {
    visiblePopover: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return{
      videoTypeList: [
        {label: '待视频', value: 0},
        {label: '已视频', value: 1}
      ],
      queryCondition: {
        type: 0,
        size: 99999,
        current: 1,
      },
      videoTableData: [],
      VideoDialog: null,
      VideoEditDialog: null,
      // VideoCallDialog: null
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClose() {
      this.$emit('update:visiblePopover', null)
    },
    selectType(typeValue) {
      this.queryCondition.type = typeValue;
      this.getList()
    },
    // 列表数据
    getList() {
      let dataJson = {
        ...this.queryCondition,
        caseId: this.visiblePopover.caseId
      }
      videoTelephone.getListByCaseId(dataJson).then(res => {
        if (!res.code) {
          this.videoTableData = res;
        }
      })
    },
    handleBackCase(item) {
      this.$confirm("请确定是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        let data = {id:item.id}
        videoTelephone.videoTelephoneCancel(data).then((res) => {
          this.$message.success("取消成功");
          this.getList()
        });
      }).catch(() => {});
    },
    handleVideoCall(item) {
      if(!this.$parent.VideoCallDialog) {
        this.$parent.VideoCallDialog = {
          id: item.id,
          roomId: item.roomId,
          sdkAppId: item.sdkAppId,
          userId: item.userId,
          userSig:  item.userSig
        }
        // videoTelephone.getEnterById({id: item.id}).then((res) => {
        //
        // });
      }else {
        this.$message.warning("请先关闭当前视频通话，才能再次点击视频通话！");
      }
    },
    timeComparison(time) {
      let nowTime = new Date().getTime();
      let bookingTime = new Date(time).getTime();
      if (nowTime > bookingTime) {
        return false;
      } else {
        return true;
      }
    },
  }
}
</script>

<style scoped lang="scss">
.case-videoReservation-dialog{
  width: 500px;
  background-color: #FFFFFF;
  border: 1px solid #f5f5f5;
  position: absolute;
  bottom: 86px;
  left: calc(50% - 432px);
}

.actionVideo{
  color: #BC6F60;
  border-bottom: 1px solid #BC6F60;
}

.bag-BC6F60{
  background-color: #BC6F60;
}
.bor-E5E6EB{
  border-bottom: solid 1px #E5E6EB;
}
</style>