<template>
  <div class="v-page live-lectures">
    <h2 class="v-title">直播列表</h2>
    <div class="live-lectures-header">
      <searchInput v-model="searchValue" @query="getSearchList"></searchInput>
      <div class="header-manage">
        <!-- <el-button type="primary" icon="el-icon-plus" round @click="addLive"
          >新建直播</el-button
        >
        <el-button type="danger" round @click="removeSelect"
          >删除选中</el-button
        > -->
      </div>
    </div>
    <div class="live-lectures-content" v-loading="listLoading">
      <TableLayout
        :data="liveList"
        :column="column"
        :pageInfo="pageInfo"
        selection
        @current-change="pageChange"
        @size-change="pageSizeChange"
        @selection-change="selectionChange"
      >
        <template v-slot:lecturer="props">
          {{ props.row.lecturerInfo?.name }}
        </template>
        <template v-slot:status="props">
          <el-tag type="info" v-if="props.row.status == 0">未开始</el-tag>
          <el-tag v-if="props.row.status == 1">直播中</el-tag>
          <el-tag type="success" v-if="props.row.status == 2">已完成</el-tag>
        </template>
        <template v-slot:startTime="props">
          {{ new Date(props.row.startTime).format("yyyy-MM-dd") }}
        </template>
        <template v-slot:createTime="props">
          {{ new Date(props.row.createTime).format("yyyy-MM-dd") }}
        </template>
        <template v-slot:action="props">
          <!-- <el-button type="text" v-if="props.row.status == 2"
            ><i class="el-icon-help"></i> 查看回放</el-button
          > -->
          <el-button
            type="text"
            style="color: #e6a23c"
            v-if="props.row.status == 1"
            @click="toLiveWatch(props.row)"

          >
            <i class="el-icon-video-play"></i> 继续观看</el-button
          >
          <el-button
            type="text"
            style="color: #02c761"
            v-if="props.row.status == 0"
            @click="toLiveWatch(props.row)"
          >
            <i class="el-icon-video-camera"></i>
            进入直播</el-button
          >
        </template>
      </TableLayout>
    </div>
  </div>
</template>

<script>
import searchInput from '@/components/widget/QueryInput.vue'
import TableLayout from '@/components/layout/TableLayout.vue'
import { getMyLiveListAPI, searchMyLiveListAPI } from '@/api/online-teaching/live-student'
import { dataReportMixin } from '@/utils/data-report'
export default {
  components: {
    searchInput,
    TableLayout
  },
  data () {
    return {
      column: [
        {
          prop: 'title',
          label: '直播名称',
          align: 'center',
          'show-overflow-tooltip': true,
          'min-width': '150px'
        },
        // { prop: 'classifyName', label: '课程分类', align: 'center' },
        { prop: 'status', label: '状态', align: 'center', width: 100 },
        { prop: 'startTime', label: '开始时间', align: 'center' },
        { prop: 'duration', label: '预计时长', align: 'center' },
        { prop: 'userName', label: '讲师', align: 'center', width: 150 },
        { prop: 'createTime', label: '创建时间', align: 'center' },
        { prop: 'action', label: '操作', align: 'center' }
      ],
      listLoading: false,
      liveList: [],
      nowSeletedLive: [],
      searchValue: '',
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    async getLiveList () {
      this.listLoading = true
      const { data } = await getMyLiveListAPI(this.pageInfo)
      this.pageInfo.total = data.total
      this.liveList = data.data
      this.listLoading = false
    },
    checkIsLecturer (lecturerId) {
      if (lecturerId === this.$store.user.id) {
        return true
      }
      return false
    },
    async getSearchList () {
      this.listLoading = true
      if (this.searchValue.trim().length <= 0) {
        this.getLiveList()
      }
      this.page = 1
      const { data } = await searchMyLiveListAPI({
        ...this.pageInfo,
        value: this.searchValue
      })
      this.liveList = data.data
      this.pageInfo.total = data.total
      this.listLoading = false
    },
    pageChange (e) {
      this.pageInfo.page = e
      this.getLiveList()
    },
    pageSizeChange (e) {
      this.pageInfo.pageSize = e
      this.getLiveList()
    },
    selectionChange (e) {
      this.nowSeletedLive = e
    },
    addLive () {
      this.$router.push({
        // path: '/online-teaching/live-lectures/live-editor',
        path: '/online-course/live-lectures/live-editor',
        query: { id: 0 }
      })
    },
    editorLive (live) {
      this.$router.push({
        // path: '/online-teaching/live-lectures/live-editor',
        path: '/online-course/live-lectures/live-editor',
        query: { id: live.id }
      })
    },
    toLiveWatch (live) {
      this.$router.push({
        // path: '/online-teaching/live-in-class/live-watch',
        path: '/online-course/live-in-class/live-watch',
        query: { id: live.id }
      })
    }
  },
  async created () {
    this.getLiveList()
  },

  mixins: [
    /**
     * 数据上报
     */
    dataReportMixin('LIVE_TEACHING')
  ]
}
</script>

<style lang="scss" scoped>
.live-lectures {
  display: unset;
  .live-lectures-header {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
