import { Button, Cell, Dialog, Grid, GridItem, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconA from '../images/icon-photo.png'
import request from '@/helpers/request'
import { state } from '@/state'
import { useRoute, useRouter } from 'vue-router'
import OFullRefresh from '@/components/o-full-refresh'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import iconTeacher from '@/common/images/icon_teacher.png'

export default defineComponent({
  name: 'approval-manage-subsidy',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const dialog = ref(false)
    const refreshing = ref(false)
    const recordId = ref('')
    const data = reactive({
      startDate: '',
      endDate: '',
      manageSalary: '',
      courseSalary: '',
      trainingSalary: '',
      /**管理补助 */
      manageSalaryInfo: {} as any,
      /**训练补助 */
      courseSalaryInfo: {} as any,
      /**练习奖励 */
      practiceSalaryInfo: {} as any
    })
    const getData = async () => {
      try {
        const res: any = await request.post(
          `${state.platformApi}/schoolWeekSalaryRecord/manageConfirm/${route.query.salaryId}`,
          {
            hideLoading: refreshing.value
          }
        )
        if (res?.data) {
          const {
            courseSalaryInfo,
            manageSalaryInfo,
            practiceSalaryInfo,
            startDate = '',
            endDate = '',
            manageSalary,
            courseSalary,
            trainingSalary,
            id
          } = res.data
          data.courseSalaryInfo = courseSalaryInfo
          data.manageSalaryInfo = manageSalaryInfo
          data.practiceSalaryInfo = practiceSalaryInfo
          data.startDate = startDate?.split(' ')[0] || ''
          data.endDate = endDate?.split(' ')[0] || ''
          data.manageSalary = manageSalary
          data.courseSalary = courseSalary
          data.trainingSalary = trainingSalary
          recordId.value = id
        }
      } catch (error) {}
      refreshing.value = false
    }
    onMounted(() => {
      getData()
    })
    /**确认补助 */
    const sendConfirm = () => {
      request
        .post(`${state.platformApi}/schoolWeekSalaryRecord/manageConfirmed/${route.query.salaryId}`)
        .then((res: any) => {
          if (res?.code == 200) {
            router.back()
          }
        })
    }
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader
            class={styles.rightTip}
            rightText="?"
            onClickRight={() => (dialog.value = true)}
            title={route.query.display ? '补助详情' : '补助确认'}
          ></OHeader>
        </OSticky>
        <OFullRefresh
          v-model:modelValue={refreshing.value}
          onRefresh={getData}
          style="min-height: calc(100vh - var(--header-height))"
        >
          <div class={styles.wrap}>
            {!!data.courseSalaryInfo && (
              <div class={styles.item}>
                <Cell center>
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <span>
                          {data.startDate} 至 {data.endDate}
                        </span>
                        <span class={styles.itemTag}>补助周期</span>
                      </div>
                    )
                  }}
                </Cell>
                <Grid class={styles.grid} columnNum={3} border={false}>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.manageSalary || 0}</span>元
                      </div>
                      <div>管理补助</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.courseSalary || 0}</span>元
                      </div>
                      <div>训练补助</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.trainingSalary || 0}</span>元
                      </div>
                      <div>练习奖励</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            )}

            {!!data.manageSalaryInfo && (
              <div class={styles.item}>
                <Cell
                  style={{ '--van-cell-value-color': '#F44541' }}
                  center
                  value={`${data.manageSalaryInfo.expectPhotoNum || 0}/${
                    data.manageSalaryInfo.photoNum || 0
                  }`}
                  isLink
                  to={`/subsidy-grant-detail?id=${recordId.value}`}
                >
                  {{
                    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.manageSalaryInfo.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.manageSalaryInfo.standardSalary || 0}
                        </span>
                        课时
                      </div>
                      <div>本周课时数</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.manageSalaryInfo.actualSalary || 0}</span>
                        元
                      </div>
                      <div>实际补助</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            )}

            {!!data.practiceSalaryInfo && (
              <div class={styles.item}>
                <Cell center isLink to={`/subsidy-reward-detail?id=${recordId.value}`}>
                  {{
                    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}>
                          {data.practiceSalaryInfo.standardSalary || 0}
                        </span>
                        元/人
                      </div>
                      <div>补助标准</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.practiceSalaryInfo.targetNum || 0}</span>
                        人
                      </div>
                      <div>练习达标人数</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>
                          {data.practiceSalaryInfo.actualSalary || 0}
                        </span>
                        元
                      </div>
                      <div>实际奖励</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            )}

            <div class={styles.item}>
              <Cell center>
                {{
                  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}>
                        {data.courseSalaryInfo.singleSubsidyStandard || 0}
                      </span>
                      元/人
                    </div>
                    <div>单技补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>
                        {data.courseSalaryInfo.musicSubsidyStandard || 0}
                      </span>
                      元/天
                    </div>
                    <div>乐理补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={styles.topNum}>
                        {data.courseSalaryInfo.ensembleSubsidyStandard || 0}
                      </span>
                      元
                    </div>
                    <div>合奏补助标准</div>
                  </div>
                </GridItem>
              </Grid>
              {Array.isArray(data.courseSalaryInfo.salaryRecordDetailItemList) &&
                data.courseSalaryInfo.salaryRecordDetailItemList.map((teacher: any) => {
                  return (
                    <Cell
                      center
                      title={teacher.userName}
                      isLink
                      to={`/subsidy-exercise-detail?id=${recordId.value}&userId=${teacher.userId}`}
                    >
                      {{
                        icon: () => (
                          <img class={styles.itemPicture} src={teacher.avatar || iconTeacher} />
                        ),
                        value: () => (
                          <div class={styles.gridItem}>
                            <div class={styles.gridItemTop}>
                              <span class={styles.topNum}>{teacher.salary || 0}</span>元
                            </div>
                            <div class={styles.valeLabel}>实际奖励</div>
                          </div>
                        )
                      }}
                    </Cell>
                  )
                })}
            </div>

            <div class="van-safe-area-bottom">
              <div style={{ height: 'calc(var(--van-button-default-height) + 0.8rem)' }}></div>
            </div>
          </div>
        </OFullRefresh>
        {route.query.display && (
          <div class={styles.confirmBtn}>
            <div class="van-safe-area-bottom">
              <Button block type="primary" round onClick={sendConfirm}>
                确认无误
              </Button>
            </div>
          </div>
        )}
        <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、每周一上午10点生成上一周实际补助数据
              <br />
              2、每周一24点前完成补助确认，则该补助将会在当周周五发放
              <br />
              3、超过周一24点确认，则延后到下周周五发放
              <br />
              4、如遇法定节假日，则统一延后到下一周五发放
              <br />
              5、未绑定银行卡导致无法发放时，将在绑定银行卡后的下一周五，一次性将已确认且未发放的补助金额发放
            </div>
          </div>
        </Dialog>
      </div>
    )
  }
})