import { defineComponent, reactive, onMounted, computed } from 'vue'
import { Cell, Grid, GridItem, Progress, Icon, List } from 'vant'
import OEmpty from '@/components/o-empty'
import styles from './index.module.less'
import OSticky from '@/components/o-sticky'
import OHeader from '@/components/o-header'
import request from '@/helpers/request'
import dayjs from 'dayjs'
import { moneyFormat } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'

export default defineComponent({
  name: 'practice-rewards',
  setup() {
    const state = reactive({
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      statistics: {
        totalTrainingSalary: 0,
        waitSalary: 0
      }
    })

    const getStatistics = async () => {
      try {
        const { data } = await request.post('/api-school/schoolWeekSalaryRecord/trainingStatistics')
        console.log(data)
        state.statistics = {
          totalTrainingSalary: data.totalTrainingSalary || 0,
          waitSalary: data.waitSalary || 0
        }
      } catch {
        //
      }
    }

    const getList = async () => {
      try {
        const res = await request.post('/api-school/schoolWeekSalaryRecord/trainingList', {
          data: {}
        })
        const result = res.data || []
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        state.list = res.data || []
        state.listState.dataShow = state.list.length > 0
      } catch {
        state.listState.dataShow = false
      }
    }

    onMounted(() => {
      getStatistics()
      getList()
    })
    return () => (
      <div class={styles.practiceRewards}>
        <OSticky position="top" style={{ background: 'transparent' }}>
          <OHeader border={false} background={'transparent'}>
            {/* {{
              right: () => (
                <span
                  class={styles.btn}
                  onClick={() => {
                    // MANAGE,COURSE,TRAINING
                    postMessage({
                      api: 'open_app_page',
                      content: {
                        action: 'app',
                        pageTag: 'settlementRecord',
                        url: '',
                        params: JSON.stringify({ type: 'TRAINING' })
                      }
                    })
                  }}
                >
                  结算记录
                </span>
              )
            }} */}
          </OHeader>
          <div class={styles.headerContainer}>
            <div class={styles.headerContent}>
              <div class={styles.priceTitle}>待结算金额 (元)</div>
              <div class={styles.priceCount}>
                <span>¥</span>
                {moneyFormat(state.statistics.waitSalary)}
              </div>

              <span
                class={styles.btn}
                onClick={() => {
                  // MANAGE,COURSE,TRAINING
                  postMessage({
                    api: 'open_app_page',
                    content: {
                      action: 'app',
                      pageTag: 'settlementRecord',
                      url: '',
                      params: JSON.stringify({ type: 'TRAINING' })
                    }
                  })
                }}
              >
                结算记录
              </span>
            </div>
          </div>
        </OSticky>
        {state.listState.dataShow ? (
          state.list.map((item: any) => (
            <div class={styles.gridGroup}>
              <Cell center isLink to={'/practice-rewards-detail?id=' + item.id}>
                {{
                  title: () => (
                    <div class={styles.itemTitle}>
                      <span style={{ fontFamily: 'DINA' }}>
                        {dayjs(item.startTime).format('YYYY-MM-DD')} 至{' '}
                        {dayjs(item.endTime).format('YYYY-MM-DD')}
                      </span>
                      <span class={[styles.status, !item.settleFlag && styles.red]}>
                        {!item.settleFlag ? '待结算' : '已结算'}
                      </span>
                    </div>
                  )
                }}
              </Cell>
              <Grid class={styles.grid} columnNum={2} border={false}>
                <GridItem class={styles.gridBorderRight}>
                  <div class={[styles.gridItem]}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum} style={{ color: '#333' }}>
                        {item.targetNum || 0}
                      </span>
                    </div>
                    <div>练习达标人数</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum} style={{ color: '#333' }}>
                        {moneyFormat(item.totalSalary || 0)}
                      </span>
                      元
                    </div>
                    <div>奖励金额</div>
                  </div>
                </GridItem>
              </Grid>
            </div>
          ))
        ) : (
          <OEmpty btnStatus={false} tips="暂无练习奖励记录" />
        )}
      </div>
    )
  }
})