import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
import player from '../images/player.png'
import clock from '../images/clock.png'
import classes from './videoCourseItem.module.less'
import detaile from '@/components/videoDetailItem/images/detaile.png'
import { ElDialog } from 'element-plus'
import downModel from './downModel'

export default defineComponent({
  name: 'videoCourseItem',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  components: {
    downModel
  },
  setup(props, conent) {
    const state = reactive({
      title: props.item,
      item: props.item,
      showDown: false
    })
    watch(
      () => props.item,
      item => {
        state.item = item
      }
    )
    return () => (
      <>
        <div
          class={classes.videoWrap}
          onClick={() => {
            state.showDown = true
          }}
        >
          <div class={classes.videoImgWrap}>
            <img
          class={ classes.videoImgWrapImg}
              src={state.item.coverUrl ? state.item.coverUrl : detaile}
              alt=""
            />
            <img src={player} alt="" class={classes.player} />
          </div>

          <div class={classes.courseInfo}>
            <h4>{state.item.videoTitle}</h4>
            <p class={classes.courseDetial}>{state.item.videoContent}</p>
            <p  class={classes.courseDetialTime}><img src={clock} alt="" /> <span>课时：</span><span>120分钟</span></p>
          </div>
          <ElDialog
            modelValue={state.showDown}
            onUpdate:modelValue={val => (state.showDown = val)}
            closeOnClickModal={false}
            closeOnPressEscape={false}
          >
            <downModel onClose={() => (state.showDown = false)}></downModel>
          </ElDialog>
        </div>
      </>
    )
  }
})