import Pagination from '@/components/pagination'
import { state } from '@/state'
import { ElButton, ElMessage, ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import Item from '../components/item'
import styles from './index.module.less'
import List from './list'

export default defineComponent({
  name: 'live-class',
  data() {
    return {
      activeName: 'ING'
    }
  },
  render() {
    return (
      <div class={[styles.liveClass, 'relative px-[25px]']}>
        <ElButton
          round
          type="primary"
          class="absolute right-11 top-3 z-10"
          onClick={() => {
            // 直播课需要达人认证和开通直播
            if (state.user.data?.entryFlag && state.user.data?.liveFlag) {
              this.$router.push({
                path: '/userInfo/liveOperation',
                query: {
                  type: 'create'
                }
              })
            } else {
              if (!state.user.data?.entryFlag) {
                ElMessage.error('您还未完成达人认证，认证后才可创建视频课')
                return
              }

              if (!state.user.data?.liveFlag) {
                ElMessage.error('您尚未开通直播服务，开通后即可创建直播课程')
                return
              }
            }
          }}
        >
          新建课程
        </ElButton>
        <ElTabs v-model={this.activeName}>
          <ElTabPane label="进行中" name="ING">
            {this.activeName === 'ING' && <List groupStatus="ING" />}
          </ElTabPane>
          <ElTabPane label="未上架" name="NOT_SALE">
            {this.activeName === 'NOT_SALE' && <List groupStatus="NOT_SALE" />}
          </ElTabPane>
          <ElTabPane label="销售中" name="APPLY">
            {this.activeName === 'APPLY' && <List groupStatus="APPLY" />}
          </ElTabPane>
          <ElTabPane label="已完成" name="COMPLETE">
            {this.activeName === 'COMPLETE' && <List groupStatus="COMPLETE" />}
          </ElTabPane>
          <ElTabPane label="已取消" name="CANCEL">
            {this.activeName === 'CANCEL' && <List groupStatus="CANCEL" />}
          </ElTabPane>
        </ElTabs>
        {/* 课程组状态 ING(进行中) NOT_SALE(未开售,未上架) APPLY(报名中,销售中)
        COMPLETE(已完成) CANCEL(已取消) */}
      </div>
    )
  }
})