<template>
  <div class="flex flex-col justify-between w-full sm:flex-row" style="width:100%;">
    <div class="table-default" style="width:100%;">
      <el-table :data="tableData" class="w-full mt-3" v-loading="loading" style="width:100%;">
        <el-table-column prop="series_name" label="章节名称" />
        <el-table-column prop="is_charge" label="是否付费">
          <template #default="scope">
            <span :class="scope.row.is_charge ? 'text-red-600' : 'text-green-300'">
              {{ scope.row.is_charge ? '【付费】' : '【免费】' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="duration_str" label="章节时长" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="play(scope.row)">播放</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
  </div>
  <Dialog v-model="playVisible" title="视频" destroy-on-close height="100%">
    <video id="my-player" class="video-js" controls autoplay preload="auto" ref="myVideo">
      <source :src="current.public_video_url" type="video/mp4">
    </video>
  </Dialog>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useGetList } from '@/hook/curd/useGetList';
import { useOpen } from '@/hook/curd/useOpen';
const api = 'videoStock/episode/list';
const props = defineProps({
  primary: String | Number,
});
const current = ref({})
const playVisible = ref(false)
const { data, query, search, reset, loading } = useGetList(api);
const { open, close, title, visible, id } = useOpen();
if (props.primary) {
  query.value.video_id = props.primary.id
}
const tableData = computed(() => data.value?.data);
const play = (e: object) => {
  current.value = e;
  playVisible.value = true;
}
onMounted(() => {
  console.log(props.primary, 'props.primaryprops.primary');
  search();
});
</script>

<style lang="scss" scoped>
//播放器样式
video#my-player.video-js {
  width: 80%;
  height: 500px;
  background-color: #000;
}
</style>
