import { Cell, Grid, GridItem, NavBar, Popup, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconA from '../images/icon-photo.png'
import { useRoute } from 'vue-router'
import request from '@/helpers/request'
import { state } from '@/state'
import OFullRefresh from '@/components/o-full-refresh'
import Details from './details'
import OHeader from '@/components/o-header'

export default defineComponent({
  name: 'subsidy-exercise-detail',
  setup() {
    const route = useRoute()
    const refreshing = ref(false)
    const modelData = reactive({
      show: false,
      row: null as any
    })
    const data = reactive({
      /**补助明细 */
      record: {
        courseSalaryRecordDetailList: [{courseScheduleTeacherAttendanceList: [{}]}] as ICourseSalaryRecordDetailItem[]
      } as ICourseSalaryRecordDetail
    })
    const getData = () => {
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/detailInfo/course`, {
          data: {
            id: route.query.id,
            userId: state.user.data.id
          }
        })
        .then((res: any) => {
          data.record = res?.data || {}
        })
        .finally(() => {
          refreshing.value = false
        })
    }
    onMounted(() => {
      getData()
    })
    return () => (
      <div>
        <OFullRefresh
          v-model:modelValue={refreshing.value}
          onRefresh={getData}
          style="min-height: 100vh"
        >
          <div class={styles.item}>
            <Cell center class={styles.rewardItem}>
              {{
                icon: () => <img class={styles.itemPicture} src={iconA} />,
                title: () => (
                  <div class={styles.itemTitle}>
                    <span>邓同学</span>
                  </div>
                ),
                value: () => (
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>{data.record.actualSalary}</span>元
                    </div>
                    <div class={styles.valeLabel}>实际补助</div>
                  </div>
                )
              }}
            </Cell>
          </div>

          {data.record.courseSalaryRecordDetailList.map((item: ICourseSalaryRecordDetailItem) => (
            <div class={styles.item}>
              <Cell
                center
                value={`${item.days}天`}
                isLink
                onClick={() => {
                  modelData.show = true
                  modelData.row = item
                }}
              >
                {{
                  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}>{item.expectSalary || 0}</span>元
                    </div>
                    <div>预计补助</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>{item.reduceSalary || 0}</span>元
                    </div>
                    <div>考勤扣款</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>{item.actualSalary || 0}</span>课元
                    </div>
                    <div>实际补助</div>
                  </div>
                </GridItem>
              </Grid>
            </div>
          ))}
        </OFullRefresh>
        <Popup
          v-model:show={modelData.show}
          position="right"
          style={{
            width: '100vw',
            '--van-popup-background': 'rgba(246,246,246,1)',
            '--van-nav-bar-icon-color': '#333'
          }}
        >
          <NavBar
            leftArrow
            title="补助明细"
            onClickLeft={() => {
              modelData.show = false
            }}
          />
          <div
            style={{
              height: 'calc(100vh - var(--van-nav-bar-height))',
              overflow: 'hidden',
              'overflow-y': 'auto'
            }}
          >
            <Details item={modelData.row || {}} />
          </div>
        </Popup>
      </div>
    )
  }
})