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'
import OEmpty from '@/components/o-empty'

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 loading = ref(true)
    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 () => {
      loading.value = true
      try {
        const res: any = await request.post(`${state.platformApi}/schoolWeekSalaryRecord/manage`)
        if (Array.isArray(res?.data?.salaryRecordList)){
          data.salaryRecordList = res.data.salaryRecordList
        }
        data.schoolWeekPhoto = res?.data?.schoolWeekPhoto || {}
        data.schoolWeekNews = res?.data?.schoolWeekNews || {}
        if (data.schoolWeekPhoto){
          data.schoolWeekPhoto.startDate = data.schoolWeekPhoto?.startDate?.split(' ')[0]
          data.schoolWeekPhoto.endDate = data.schoolWeekPhoto?.endDate?.split(' ')[0]
        }
        if (data.schoolWeekNews){
          data.schoolWeekNews.startDate = data.schoolWeekNews?.startDate?.split(' ')[0]
          data.schoolWeekNews.endDate = data.schoolWeekNews?.endDate?.split(' ')[0]
        }
      } catch (error) {}
      loading.value = false
      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,
            !loading.value &&
              !data.salaryRecordList.length &&
              !data.schoolWeekPhoto.expectPhotoNum &&
              !data.schoolWeekNews.expectNewsNum &&
              'emptyRootContainer'
          ]}
          style="min-height: inherit"
        >
          {!data.salaryRecordList.length ? null : (
            <>
              {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>
                )
              })}
            </>
          )}

          {!data.schoolWeekPhoto.expectPhotoNum ? null : (
            <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>
          )}
          {!data.schoolWeekNews.expectNewsNum ? null : (
            <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>
          )}
          {!loading.value &&
          !data.salaryRecordList.length &&
          !data.schoolWeekPhoto.expectPhotoNum &&
          !data.schoolWeekNews.expectNewsNum ? (
            <OEmpty />
          ) : null}
        </div>
      </OFullRefresh>
    )
  }
})