<template>
  <div>
    <a-modal v-model:visible="visible" width="66%" :closable="false" :maskClosable="false" :title="titleText"
      :footer="null">
      <div class="box-text">
        <video ref="videoPlayer" controls class="video-box">
          <source :src="videoPlayer" type="video/mp4">
        </video>
      </div>
      <div class="btn-box">
        <a-button class="play-look" @click="playVideo">开始</a-button>
        <a-button class="play-look" @click="pauseVideo">暂停</a-button>
        <a-button @click="handleCancel">关闭弹框</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const visible = ref(false)
const titleText = ref('')
const emit = defineEmits(['isVisible'])

const videoPlayer = ref(null);
// 开始
const playVideo = () => {
  videoPlayer.value.play();
};
// 暂停
const pauseVideo = () => {
  videoPlayer.value.pause();
};
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  videoPlayer.value = null
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    videoPlayer.value = newValue.videoLink
    visible.value = newValue.visible
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.title-box {
  width: 91.7%;
}

.from-input {
  width: 101.4%;
}

::v-deep.ant-modal-footer {
  display: none !important;
}

.box-text {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  /* 关键属性 */
  margin-bottom: 16px;
}

.video-box {
  width: 100%;
}

.play-btn {
  width: 100%;
  text-align: center;
}

.play-look {
  margin-right: 16px;
}

.box-img {
  width: 100%;
  height: 82%;
  margin: 12px;
  flex: 0 0 auto;
}

.btn-box {
  text-align: center;
}
</style>