<template>
  <BasicDrawer v-bind="$attrs" @register="playDrawer" destroyOnClose>
    <a-row type="flex">
      <a-col :xl="leftCol" :lg="leftCol" :md="leftCol">
        <div style="width: 100%; height: calc(100vh - 195px); background: black">
          <Jessibuca v-if="videoUrl" ref="player" :src="videoUrl" fluent autoplay />
        </div>
      </a-col>
    </a-row>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner, Jessibuca } from '@jdlinker/ui';
  import { getPlayUrl } from '../../realtimeMonitor/DeviceService';

  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const player = ref();
  const videoUrl = ref();
  const leftCol = ref(24);
  // const rightCol = ref(0);

  //表单赋值
  const [playDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ title: '播放', isDetail: true, closable: false });
    console.log(' data.record', data.record);
    sendDevicePush(data.record);
  });

  //通知设备上传媒体流
  function sendDevicePush(data) {
    if (data.app && data.stream && data.mediaServerId) {
      getPlayUrl(data.app, data.stream, data.mediaServerId)
        .then((res) => {
          console.log('success', res);
          if (res) {
            videoUrl.value = res.ws_flv;
          } else {
            console.log('error');
          }
        })
        .catch(function () {});
    }
  }
</script>
<style lang="less" scoped>
  .ant-row {
    flex-flow: row nowrap;
  }

  .show_hide_col {
    height: calc(100vh - 195px);
    display: contents;
  }

  .show_hide {
    height: 100%;
    width: 100%;
    display: flex;
    margin: auto 0;
    z-index: 2;
  }
</style>

<style lang="less" scoped>
  .live-player-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px 30px 20px 125px;

    .direction {
      position: relative;
      display: grid;
      grid-gap: 2px;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
      border-radius: 50%;
      transform: rotateZ(45deg);

      .direction-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 100%;
        font-size: 26px;
        background-color: rgba(#000, 0.1);
        transition: background-color 0.3s;

        .direction-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotateZ(-45deg);
        }
      }

      .direction-audio {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45%;
        height: 45%;
        font-size: 30px;
        background-color: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%) rotateZ(-45deg);
      }

      .zoom .zoom-item,
      & .direction-item {
        &:hover {
          color: #fff;
        }

        &:active {
          color: #fff;
        }
      }
    }

    .zoom {
      display: grid;
      grid-gap: 10px;
      grid-template-rows: 1fr 1fr;
      /*align-items: flex-start;*/
      /*display: flex;*/
      /*flex-direction: column;*/
      /*justify-content: space-between;*/

      .zoom-item {
        padding: 10px 10px;
        font-size: 20px;
        text-align: center;
        /*background-color: rgba(#000, 0.1);*/
        cursor: pointer;

        &:hover {
          color: #fff;
        }

        &:active {
          color: #fff;
        }
      }

      .zoom-in,
      .zoom-out {
        border-radius: 15px;
      }
    }
  }

  .specific {
    margin-bottom: 5px;

    :deep(.ant-btn) {
      font-size: 12px;
      padding: 0;
      width: 100%;
    }

    :deep(.ant-input-number) {
      font-size: 12px;
      padding: 0;
      width: 100%;
    }

    .col-title {
      background-color: rgba(#1890ff, 0.2);
    }
  }
</style>
