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

      <a-col v-show="hasPermission('videoCenter:channel:PTZControl')" :xl="rightCol" :lg="rightCol" :md="rightCol" style="padding-left: 5px">
        <div style="font-size: 16px">云台控制</div>
        <a-row :gutter="40" justify="start" align="middle" class="live-player-tools" style="margin: 0">
          <a-col :xl="20" class="direction" style="padding: 0" offset="{4}">
            <div class="direction-item">
              <CaretUpOutlined class="direction-icon" />
            </div>
            <div class="direction-item right">
              <CaretRightOutlined class="direction-icon" />
            </div>
            <div class="direction-item">
              <CaretLeftOutlined class="direction-icon" />
            </div>
            <div class="direction-item down">
              <CaretDownOutlined class="direction-icon" />
            </div>
            <div class="direction-audio"> </div>
          </a-col>
          <a-col :xl="4" class="zoom">
            <div class="zoom-item zoom-in">
              <PlusOutlined />
            </div>
            <div class="zoom-item zoom-out">
              <MinusOutlined />
            </div>
          </a-col>
        </a-row>
        <a-row class="specific">
          <a-col :span="4">
            <c-button class="col-title" type="link">预置位编号</c-button>
          </a-col>
          <a-col :span="4">
            <a-input-number />
          </a-col>
          <a-col :span="4">
            <c-button>设置</c-button>
          </a-col>
          <a-col :span="4">
            <c-button>删除</c-button>
          </a-col>
          <a-col :span="4" />
          <a-col :span="4">
            <c-button type="primary">调用</c-button>
          </a-col>
        </a-row>
        <a-row class="specific">
          <a-col :span="4">
            <c-button class="col-title" type="link">巡航速度</c-button>
          </a-col>
          <a-col :span="4">
            <a-input-number />
          </a-col>
          <a-col :span="4">
            <c-button>设置</c-button>
          </a-col>
          <a-col :span="4">
            <c-button>停留时间</c-button>
          </a-col>
          <a-col :span="4">
            <a-input-number />
          </a-col>
          <a-col :span="4">
            <c-button>设置</c-button>
          </a-col>
        </a-row>
        <a-row class="specific">
          <a-col :span="4">
            <c-button class="col-title" type="link">巡航组编号</c-button>
          </a-col>
          <a-col :span="4">
            <a-input-number />
          </a-col>
          <a-col :span="4">
            <c-button>添加点</c-button>
          </a-col>
          <a-col :span="4">
            <c-button>删除点</c-button>
          </a-col>
          <a-col :span="4">
            <c-button>删除组</c-button>
          </a-col>
          <a-col :span="4">
            <c-button type="primary">巡航</c-button>
          </a-col>
        </a-row>
        <a-row class="specific">
          <a-col :span="4">
            <c-button class="col-title" type="link">扫描速度</c-button>
          </a-col>
          <a-col :span="4">
            <a-input-number />
          </a-col>
          <a-col :span="4">
            <c-button>设置</c-button>
          </a-col>
          <a-col :span="4" />
          <a-col :span="4" />
          <a-col :span="4">
            <c-button type="primary">扫描</c-button>
          </a-col>
        </a-row>
        <a-row class="specific">
          <a-col :span="4">
            <c-button class="col-title" type="link">扫描组编号</c-button>
          </a-col>
          <a-col :span="4">
            <a-input-number />
          </a-col>
          <a-col :span="4">
            <c-button>左边界</c-button>
          </a-col>
          <a-col :span="4">
            <c-button>右边界</c-button>
          </a-col>
          <a-col :span="4" />
          <a-col :span="4">
            <c-button danger type="primary">停止</c-button>
          </a-col>
        </a-row>
      </a-col>
      <a-col v-show="hasPermission('videoCenter:channel:PTZControl')" class="show_hide_col">
        <div v-if="leftCol === 24" class="show_hide" @click="PTZControl">
          <DoubleLeftOutlined />
        </div>
        <div v-if="rightCol === 8" class="show_hide" @click="hidePTZControl">
          <DoubleRightOutlined />
        </div>
      </a-col>
    </a-row>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
  import { BasicDrawer, useDrawerInner, Jessibuca } from '@jdlinker/ui';
  import { playStart } from '../../realtimeMonitor/DeviceService';
  import {
    DoubleLeftOutlined,
    DoubleRightOutlined,
    CaretUpOutlined,
    CaretRightOutlined,
    CaretLeftOutlined,
    CaretDownOutlined,
    PlusOutlined,
    MinusOutlined,
  } from '@ant-design/icons-vue';
import { usePermission } from "@/hooks/web/usePermission";

const { hasPermission } = usePermission();

// 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) => {
    console.log(' data.record', data.record);
    sendDevicePush(data.record);
    // PTZControl();
  });

  function PTZControl() {
    leftCol.value = 16;
    rightCol.value = 8;
  }

  function hidePTZControl() {
    leftCol.value = 24;
    rightCol.value = 0;
  }

  //通知设备上传媒体流
  function sendDevicePush(itemData) {
    console.log('itemData', itemData);
    let deviceId = itemData.deviceId;
    let channelId = itemData.channelId;
    if (deviceId && channelId && deviceId !== '' && channelId !== '') {
      console.log('通知设备推流1：' + deviceId + ' : ' + channelId);
      playStart(deviceId, channelId)
        .then((res) => {
          console.log('success', res);
          if (res) {
            videoUrl.value = res.ws_flv;
          } else {
            console.log('error');
          }
        })
        .catch(function (e) {});
    }
  }

</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>
