import { Cell, Dialog, Grid, GridItem, Icon, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconTime from '../images/icon-time.png'
import { useRoute } from 'vue-router'
import request from '@/helpers/request'
import { state } from '@/state'
import OFullRefresh from '@/components/o-full-refresh'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import dayjs from 'dayjs'
import { moneyFormat } from '@/helpers/utils'
import ODialog from '@/components/o-dialog'
import questIcon from '@/school/images/quest-icon.png'

export default defineComponent({
  name: 'subsidy-grant-detail',
  setup() {
    const route = useRoute()
    const refreshing = ref(false)
    const dialog = ref(false)
    const data = reactive({
      /**管理补助 */
      manageSalary: {} as ISchoolStaffManageSalary,
      rows: [] as ICourseSchedule[]
    })
    const getData = () => {
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/manageTitle`, {
          data: {
            id: route.query.id,
            userId: state.user.data.id
          }
        })
        .then((res: any) => {
          data.manageSalary = res?.data || {}
        })
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/managePage`, {
          data: {
            id: route.query.id,
            userId: state.user.data.id
          }
        })
        .then((res: any) => {
          data.rows = res?.data?.rows || []
          console.log(data.rows)
        })
        .finally(() => {
          refreshing.value = false
        })
    }
    onMounted(() => {
      getData()
    })
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader
            class={styles.rightTip}
            // rightText="?"
            onClickRight={() => (dialog.value = true)}
            v-slots={{
              right: () => <Icon name={questIcon} size={22} color="#333" />
            }}
          ></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
                style={{
                  '--van-cell-value-color':
                    (data.manageSalary.photoNum || 0) >= (data.manageSalary.expectPhotoNum || 0)
                      ? '#333'
                      : '#F44541'
                }}
                value={`训练照片${data.manageSalary.photoNum || 0}/${
                  data.manageSalary.expectPhotoNum || 0
                }`}
              >
                {{
                  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, styles.small]} style={{ color: '#333' }}>
                        {moneyFormat(data.manageSalary.standardSalary || 0)}
                      </span>
                      元/周
                    </div>
                    <div>补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={[styles.topNum, styles.small]} style={{ color: '#333' }}>
                        {data.manageSalary.coursewareNum || 0}
                      </span>
                      课时
                    </div>
                    <div>本周课时数</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={[styles.topNum, styles.small]}>
                        {moneyFormat(data.manageSalary.actualSalary || 0)}
                      </span>
                      元
                    </div>
                    <div>实际补助</div>
                  </div>
                </GridItem>
              </Grid>
            </div>
            {data.rows.map((item: ICourseSchedule) => (
              <div class={styles.item}>
                <Cell center>
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <img class={styles.titleIcon} src={iconTime} />
                        {item.startTime && item.endTime ? (
                          <span class={styles.timesinfo}>
                            {dayjs(item.startTime).format('YYYY-MM-DD HH:mm')}~
                            {dayjs(item.endTime).format('HH:mm')}
                          </span>
                        ) : (
                          ''
                        )}
                      </div>
                    )
                  }}
                </Cell>
                <div class={styles.itemContent}>
                  <div class={styles.itemContentTitle}>
                    {item.className}-{item.teacherName}
                  </div>
                  <div class={styles.itemContentLabel}>{item.orchestraName}</div>
                </div>
              </div>
            ))}
          </div>
        </OFullRefresh>
        <ODialog
          title="补助标准"
          message="1、管理补助每个学期最多发放16次，且仅在有配置课件课程的周次发放 \n 2、若本周有配置课件的课程，则需在乐团相册中上传6张训练照片，若不足6张，则本周次管理补助扣除 \n 3、若未在本学期时间内发布2篇乐团资讯，则下一学期管理补助按标准金额的80%发放 \n 4、若本学期管理补助是按标准金额的80%发放，只要在本学期内发布2篇或以上乐团资讯，则下学期恢复正常管理补助标准"
          v-model:show={dialog.value}
          dialogMarginTop="env(safe-area-inset-top)"
          messageAlign="left"
          confirmButtonText="我知道了"
        />
      </div>
    )
  }
})
