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

export default defineComponent({
  name: 'video-class',
  data() {
    const videoActiveName = sessionStorage.getItem('videoActiveName')
    sessionStorage.removeItem('videoActiveName')
    return {
      activeName: videoActiveName || 'PASS'
    }
  },
  render() {
    return (
      <div class={[styles.liveClass, 'relative px-[25px]']}>
        {/* 审核状态(DOING:待审核 PASS:通过 */}
        {/* UNPASS:未通过),可用值:UNPAALY,DOING,PASS,UNPASS */}
        <ElButton
          round
          type="primary"
          class="absolute right-11 top-3 z-10"
          onClick={() => {
            if (state.user.data?.entryFlag) {
              this.$router.push('/userInfo/videoOperation')
            } else {
              ElMessage.error('您还未完成达人认证，认证后才可创建视频课')
              return
            }
          }}
        >
          新建课程
        </ElButton>
        <ElTabs v-model={this.activeName}>
          <ElTabPane label="已上架" name="PASS">
            {this.activeName === 'PASS' && <List auditStatus="PASS" />}
          </ElTabPane>
          <ElTabPane label="审核中" name="DOING">
            {this.activeName === 'DOING' && <List auditStatus="DOING" />}
          </ElTabPane>
          <ElTabPane label="审核失败" name="UNPASS">
            {this.activeName === 'UNPASS' && <List auditStatus="UNPASS" />}
          </ElTabPane>
          <ElTabPane label="已下架" name="OUT_SALE">
            {this.activeName === 'OUT_SALE' && <List auditStatus="OUT_SALE" />}
          </ElTabPane>
        </ElTabs>
      </div>
    )
  }
})
