import { Cell, Dialog, Grid, GridItem, 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'

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 || []
        })
        .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)}
          ></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
                value={`${data.manageSalary.photoNum}/${data.manageSalary.expectPhotoNum}`}
              >
                {{
                  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} style={{ color: '#333' }}>
                        {data.manageSalary.standardSalary || 0}
                      </span>
                      元/周
                    </div>
                    <div>补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum} 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}>{data.manageSalary.actualSalary || 0}</span>元
                    </div>
                    <div>实际补助</div>
                  </div>
                </GridItem>
              </Grid>
            </div>

            {data.rows.map((item: ICourseSchedule) => {
              return () => (
                <div class={styles.item}>
                  <Cell center>
                    {{
                      title: () => (
                        <div class={styles.itemTitle}>
                          <img class={styles.titleIcon} src={iconTime} />
                          <span>{item.startTime}</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>
        <Dialog v-model:show={dialog.value} confirmButtonText="我知道了">
          <div class={[styles.item, styles.tipItem]}>
            <Cell center border={false}>
              {{
                title: () => (
                  <div class={styles.itemTitle}>
                    <div class={styles.titleLine}></div>
                    <span>补助标准</span>
                  </div>
                )
              }}
            </Cell>
            <div class={styles.tipContent}>
              1、若未在学期时间内发布不少于2篇乐团资讯，则下一学期管理补助按标准金额的80%发放
              <br />
              2、如该学期管理补助是按标准金额的80%发放，只要该学期完成不少于2篇乐团资讯推送，则下学期恢复正常管理补助标准
            </div>
          </div>
        </Dialog>
      </div>
    )
  }
})
