import { Cell, Grid, GridItem } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconSubsidy from '../images/icon-subsidy.png'
import iconNews from '../images/icon-news.png'
import iconPhoto from '../images/icon-photo.png'
import request from '@/helpers/request'
import { state } from '@/state'
import OFullRefresh from '@/components/o-full-refresh'

interface ISalaryRecord {
  /**学校补助确认记录ID */
  id: string
  /**练习补助 */
  trainingSalary: number | string
  /**课程训练补助 */
  courseSalary: number | string
  /**一周开始日期 */
  startDate: string
  /**一周结束日期 */
  endDate: string
  /**已发练习补助 */
  issueTrainingSalary: number | string
  /**结算状态 */
  withdrawalStatus: 'WAIT' | 'SETTLED' | 'PART_SETTLED' | 'SETTLE_FAIL'
  /**管理补助 */
  manageSalary: number | string
  /**已发课程训练补助 */
  issueCourseSalary: number | string
  /**已发管理补助 */
  issueManageSalary: number | string
}

export default defineComponent({
  name: 'approval-manage-agency',
  setup() {
    const data = reactive({
      salaryRecordList: [{}] as ISalaryRecord[],
      /**训练照片 */
      schoolWeekPhoto: {
        /**预计的训练照片数 */
        expectPhotoNum: 0,
        /**结束日期 */
        endDate: '',
        /**开始日期 */
        startDate: '',
        /**训练照片数 */
        photoNum: 0
      },
      /**乐团资讯 */
      schoolWeekNews: {
        //
        /**乐团资讯数 */
        newsNum: 0,
        /**结束日期 */
        endDate: '',
        /**开始日期 */
        startDate: '',
        /**预计的乐团资讯数 */
        expectNewsNum: 0
      }
    })
    const refreshing = ref(false)
    const getData = async () => {
      try {
        const res: any = await request.post(`${state.platformApi}/schoolWeekSalaryRecord/manage`)
      } catch (error) {}
      refreshing.value = false
    }
    onMounted(() => {
      getData()
    })
    return () => (
      <OFullRefresh
        v-model:modelValue={refreshing.value}
        onRefresh={getData}
        style="min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height))"
      >
        <div class={styles.wrap}>
          {data.salaryRecordList.map((item: ISalaryRecord) => {
            return (
              <div class={styles.item} style={{ marginTop: 0 }}>
                <Cell
                  center
                  label={`${item.startDate} 至 ${item.endDate}`}
                  isLink
                  to={'/approval-manage-subsidy?salaryId=' + (item.id || '')}
                >
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <img class={styles.titleIcon} src={iconSubsidy} />
                        <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.manageSalary}</span>元
                      </div>
                      <div>管理补助</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{item.courseSalary}</span>元
                      </div>
                      <div>训练补助</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{item.trainingSalary}</span>元
                      </div>
                      <div>练习奖励</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            )
          })}

          <div class={styles.item}>
            <Cell
              style={{ '--van-cell-value-color': '#333' }}
              center
              label={`${data.schoolWeekPhoto.startDate} 至 ${data.schoolWeekPhoto.endDate}`}
              value={data.schoolWeekPhoto.photoNum + '/' + data.schoolWeekPhoto.expectPhotoNum}
              isLink
            >
              {{
                title: () => (
                  <div class={styles.itemTitle}>
                    <img class={styles.titleIcon} src={iconNews} />
                    <span>训练照片</span>
                  </div>
                )
              }}
            </Cell>
          </div>
          <div class={styles.item}>
            <Cell
              style={{ '--van-cell-value-color': '#333' }}
              center
              label={`${data.schoolWeekNews.startDate} 至 ${data.schoolWeekNews.endDate}`}
              value={data.schoolWeekNews.newsNum + '/' + data.schoolWeekNews.expectNewsNum}
              isLink
            >
              {{
                title: () => (
                  <div class={styles.itemTitle}>
                    <img class={styles.titleIcon} src={iconPhoto} />
                    <span>乐团资讯</span>
                  </div>
                )
              }}
            </Cell>
          </div>
        </div>
      </OFullRefresh>
    )
  }
})