import { Cell, Grid, GridItem } from 'vant'
import { defineComponent, onMounted, reactive, ref, Transition, TransitionGroup } 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'
import { useRouter } from 'vue-router'
import { approvalManageStrips } from '..'
import { moneyFormat } from '@/helpers/utils'

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

export default defineComponent({
  name: 'approval-manage-agency',
  setup() {
    const router = useRouter()
    const loading = ref(true)
    const data = reactive({
      salaryRecordList: [] as ISalaryRecord[],
      /**训练照片 */
      schoolWeekPhoto: {
        /**预计的训练照片数 */
        expectPhotoNum: 0,
        /**结束日期 */
        endDate: '',
        /**开始日期 */
        startDate: '',
        /**训练照片数 */
        photoNum: 0
      } as any,
      /**乐团资讯 */
      schoolWeekNews: {
        //
        /**乐团资讯数 */
        newsNum: 0,
        /**结束日期 */
        endDate: '',
        /**开始日期 */
        startDate: '',
        /**预计的乐团资讯数 */
        expectNewsNum: 0
      } as any
    })
    const refreshing = ref(false)
    const getData = async () => {
      loading.value = true
      /** 下拉刷新,重置数据 */
      if (refreshing.value) {
        data.salaryRecordList = []
        data.schoolWeekPhoto = {}
        data.schoolWeekNews = {}
      }
      try {
        const res: any = await request.post(`${state.platformApi}/schoolWeekSalaryRecord/manage`, {
          // hideLoading: refreshing.value
        })
        if (Array.isArray(res?.data?.salaryRecordList)) {
          data.salaryRecordList = res.data.salaryRecordList.map((n: any) => {
            return {
              ...n,
              startDate: n?.startDate?.split(' ')[0] || '',
              endDate: n?.endDate?.split(' ')[0] || ''
            }
          })
          approvalManageStrips.agencty = data.salaryRecordList.length
        }
        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
        modelValue={refreshing.value}
        onRefresh={() => {
          refreshing.value = true
          getData()
        }}
      >
        <div
          class={styles.wrap}
          style="min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height))"
        >
          <TransitionGroup name="van-fade">
            {!!data.salaryRecordList.length && (
              <div key="salaryRecordList">
                {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?display=1&salaryId=' + (item.id || '')}
                      >
                        {{
                          title: () => (
                            <div class={styles.itemTitle}>
                              <img class={styles.titleIcon} src={iconSubsidy} />
                              <span>补助确认</span>
                            </div>
                          )
                        }}
                      </Cell>
                      <Grid class={styles.grid} columnNum={2} border={false}>
                        <GridItem>
                          <div class={styles.gridItem}>
                            <div class={styles.gridItemTop}>
                              <span class={styles.topNum}>
                                {moneyFormat(item.manageSalary || 0)}
                              </span>
                              元
                            </div>
                            <div>管理补助</div>
                          </div>
                        </GridItem>
                        <GridItem>
                          <div class={styles.gridItem}>
                            <div class={styles.gridItemTop}>
                              <span class={styles.topNum}>
                                {moneyFormat(item.courseSalary || 0)}
                              </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>
            )}

            {!data.schoolWeekPhoto.expectPhotoNum ? null : (
              <div
                key="schoolWeekPhoto"
                class={styles.item}
                onClick={() => {
                  router.push({
                    path: '/school-photo'
                  })
                }}
              >
                <Cell
                  style={{ '--van-cell-value-color': '#333' }}
                  center
                  label={`${data.schoolWeekPhoto.startDate} 至 ${data.schoolWeekPhoto.endDate}`}
                  valueClass={styles.agencyNumber}
                  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
                key="schoolWeekNews"
                class={styles.item}
                onClick={() => {
                  router.push({
                    path: '/orchestra-information'
                  })
                }}
              >
                <Cell
                  style={{ '--van-cell-value-color': '#333' }}
                  center
                  label={`${data.schoolWeekNews.startDate} 至 ${data.schoolWeekNews.endDate}`}
                  valueClass={[
                    styles.agencyNumber,
                    data.schoolWeekNews.newsNum >= data.schoolWeekNews.expectNewsNum &&
                      styles.valueColor
                  ]}
                  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 key="OEmpty" class="emptyFixedHeightContainer" tips="暂无处理事项" />
            ) : null}
          </TransitionGroup>
        </div>
      </OFullRefresh>
    )
  }
})