import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
import player from '../images/player.png'
import classes from './showVideoDetail.module.less'
import detaile from '@/components/videoDetailItem/images/detaile.png'
import { ElDialog, ElButton } from 'element-plus'
import QrcodeVue from 'qrcode.vue'
import register_bg from '@/views/login/images/register_bg.png'
import colVideo from '@/components/col-video/index'
export default defineComponent({
  name: 'downModel',
  emits: ['close'],
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  components: {
    QrcodeVue,
    colVideo
  },
  setup(props, conent) {
    const state = reactive({
      item: props.item as any
    })
    watch(
      () => props.item,
      item => {
        state.item = item
      }
    )
    const onClose = () => {
      conent.emit('close')
    }
    return () => (
      <>
        {/*    */}
        <div class={classes.wrap}>
          <colVideo
            styleValue={{ with: '800px', height: '450px' }}
            controls={false}
            src={state.item.videoUrl}
            class={classes.videoItemVideo}
          />
        </div>
      </>
    )
  }
})
