import ColHeader from '@/components/col-header'
import ColResult from '@/components/col-result'
import request from '@/helpers/request'
import { formatterDate } from '@/helpers/utils'
import dayjs from 'dayjs'
import { Col, DatetimePicker, Icon, List, Popup, Row } from 'vant'
import { defineComponent } from 'vue'
import Course from '../components/course'
import styles from './index.module.less'

export default defineComponent({
  name: 'courseRecord',
  data() {
    return {
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      monthTxt: dayjs().format('YYYY年MM月'),
      month: new Date(),
      params: {
        status: 'COMPLETE',
        month: dayjs().format('YYYY-MM'),
        page: 1,
        rows: 20
      },
      timeShow: false,
      studentStatus: false,
      consumeTime: 0
    }
  },
  async mounted() {
    this.getConsumeTime()
    this.getList()
  },
  methods: {
    onSearch() {
      this.dataShow = true
      this.loading = false
      this.finished = false
      this.list = []
      this.params.page = 1
      this.getConsumeTime()
      this.getList()
    },
    async getConsumeTime() {
      try {
        const res = await await request.get(
          '/api-teacher/courseSchedule/selectConsumeTime',
          {
            params: {
              month: this.params.month
            }
          }
        )
        console.log(res)
        this.consumeTime = res.data.consumeTime || 0
      } catch {}
    },
    async getList() {
      try {
        const res = await request.post(
          '/api-teacher/courseSchedule/selectConsumeTimeList',
          {
            data: this.params
          }
        )
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    }
  },
  render() {
    return (
      <>
        <ColHeader />
        <Row class={[styles.countTimer, 'van-hairline--bottom']}>
          <Col span={9}>
            <p class={styles.timer}>
              {this.consumeTime}
              <span>分钟</span>
            </p>
            <p class={styles.title}>
              <span>已消耗时长</span>
            </p>
          </Col>
        </Row>
        <div class={styles.searchList}>
          <div
            class={styles.dataItem}
            onClick={() => {
              this.timeShow = true
            }}
          >
            {this.monthTxt}
            <Icon
              classPrefix="iconfont"
              name="down"
              size={8}
              style={{ marginLeft: '4px' }}
              color="#CCCCCC"
            />
          </div>
        </div>

        {this.dataShow ? (
          <List
            v-model:loading={this.loading}
            finished={this.finished}
            finishedText=" "
            class={[styles.liveList, 'mb12']}
            immediateCheck={false}
            onLoad={this.getList}
          >
            {this.list.map((item: any) => (
              <Course item={item} operation={false} />
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无课程" />
        )}

        <Popup position="bottom" v-model:show={this.timeShow} round>
          <div class={styles.picker}>
            <DatetimePicker
              v-model={this.month}
              type="year-month"
              formatter={formatterDate}
              onConfirm={(item: any) => {
                this.monthTxt = dayjs(item).format('YYYY年MM月')
                this.params.month = dayjs(item).format('YYYY-MM')
                this.timeShow = false
                this.onSearch()
              }}
              onCancel={() => (this.timeShow = false)}
            />
          </div>
        </Popup>
      </>
    )
  }
})
