import { ActionSheet, ActionSheetAction, Cell, Grid, GridItem } from 'vant'
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconA from '../images/icon-photo.png'
import iconArrow from '../images/icon-arrow.png'
import OFullRefresh from '@/components/o-full-refresh'
import { useRoute } from 'vue-router'
import request from '@/helpers/request'
import { state } from '@/state'
import OEmpty from '@/components/o-empty'
import OSticky from '@/components/o-sticky'
import OHeader from '@/components/o-header'

export default defineComponent({
  name: 'subsidy-reward-detail',
  setup() {
    const route = useRoute()
    const refreshing = ref(false)
    const dialog = ref(false)
    const data = reactive({
      /**声部ID */
      subjectId: '',
      /**声部列表 */
      subjects: [] as any[],
      /**管理补助 */
      manageSalary: {} as ISchoolStaffTrainingSalary,
      rows: [] as IStudent[]
    })
    const getData = () => {
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/trainingTitle`, {
          data: {
            id: route.query.id,
            userId: state.user.data.id,
            subjectId: data.subjectId
          }
        })
        .then((res: any) => {
          data.manageSalary = res?.data || {}
        })
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/trainingPage`, {
          data: {
            id: route.query.id,
            userId: state.user.data.id,
            subjectId: data.subjectId
          }
        })
        .then((res: any) => {
          data.rows = res?.data?.rows || []
        })
        .finally(() => {
          refreshing.value = false
        })
    }
    onMounted(() => {
      request
        .post(`${state.platformApi}/subjectBasicConfig/page`, {
          data: { page: 1, rows: 9999 }
        })
        .then((res: any) => {
          if (Array.isArray(res?.data?.rows)) {
            data.subjects = res.data.rows
          }
        })
      getData()
    })
    const actions = computed(() => {
      const subList = data.subjects.map((n: any) => {
        return {
          name: n.subjectName,
          value: n.subjectId,
          color: activeName.value == n.subjectName ? 'var(--van-primary-color)' : ''
        }
      })
      return [
        {
          name: '全部声部',
          color: activeName.value == '全部声部' ? 'var(--van-primary-color)' : ''
        },
        ...subList
      ]
    })
    const activeName = ref('全部声部')
    const show = ref(false)
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader></OHeader>
        </OSticky>
        <OFullRefresh
          v-model:modelValue={refreshing.value}
          onRefresh={getData}
          style="min-height: calc(100vh - var(--header-height))"
        >
          <div class={styles.wrap}>
            <div class={styles.item}>
              <Cell center>
                {{
                  title: () => (
                    <div class={styles.itemTitle}>
                      <div class={styles.titleLine}></div>
                      <span>练习奖励</span>
                    </div>
                  )
                }}
              </Cell>
              <Grid class={styles.grid} columnNum={3} border={false}>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>{data.manageSalary.standardSalary || 0}</span>
                      元/人
                    </div>
                    <div>补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>{data.manageSalary.targetNum || 0}</span>人
                    </div>
                    <div>练习达标人数</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>{data.manageSalary.actualSalary || 0}</span>元
                    </div>
                    <div>实际奖励</div>
                  </div>
                </GridItem>
              </Grid>
            </div>

            <div class={styles.itemSelect}>
              <div class={styles.select} onClick={() => (show.value = true)}>
                <span>{activeName.value}</span>
                <img src={iconArrow} />
              </div>
            </div>

            {data.rows.length ? (
              <div class={styles.item}>
                {data.rows.map((item: IStudent) => {
                  return (
                    <Cell center>
                      {{
                        icon: () => <img class={styles.itemPicture} src={item.avatar} />,
                        title: () => (
                          <div class={styles.itemTitle}>
                            <span>{item.nickname}</span>
                          </div>
                        ),
                        label: () => <span class={styles.itemTag}>{item.subjectNames}</span>,
                        value: () => (
                          <div class={styles.gridItem}>
                            <div class={styles.gridItemTop}>
                              <span class={styles.topNum}>{item.practiceTimes}</span>分钟
                            </div>
                            <div class={styles.valeLabel}>练习时长</div>
                          </div>
                        )
                      }}
                    </Cell>
                  )
                })}
              </div>
            ) : (
              <OEmpty tips="暂无学生练习" />
            )}
          </div>
        </OFullRefresh>
        <ActionSheet
          teleport="body"
          cancelText="取消"
          v-model:show={show.value}
          actions={actions.value}
          onSelect={(action: any, index: number) => {
            activeName.value = action.name || '全部声部'
            data.subjectId = action.value || ''
            show.value = false
            getData()
          }}
        ></ActionSheet>
      </div>
    )
  }
})
