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 } from 'vue-router'
import OFullRefresh from '@/components/o-full-refresh'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'

export default defineComponent({
  name: 'approval-manage-subsidy',
  setup() {
    const route = useRoute()
    const dialog = ref(false)
    const refreshing = ref(false)
    const data = reactive({
      startDate: '',
      endDate: '',
      manageSalary: '',
      courseSalary: '',
      practiceSalary: '',
      /**管理补助 */
      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}`
        )
      } catch (error) {}
      refreshing.value = false
    }
    onMounted(() => {
      getData()
    })
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader
            class={styles.rightTip}
            rightText="?"
            onClickRight={() => (dialog.value = true)}
          ></OHeader>
        </OSticky>
        <OFullRefresh
          v-model:modelValue={refreshing.value}
          onRefresh={getData}
          style="min-height: calc(100vh - var(--header-height))"
        >
          <div class={styles.wrap}>
            <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.practiceSalary || 0}</span>元
                    </div>
                    <div>练习奖励</div>
                  </div>
                </GridItem>
              </Grid>
            </div>

            <div class={styles.item}>
              <Cell
                style={{ '--van-cell-value-color': '#F44541' }}
                center
                value={`${data.manageSalaryInfo.expectPhotoNum}/${data.manageSalaryInfo.photoNum}`}
                isLink
                to={'/subsidy-grant-detail?id=' + (data.manageSalaryInfo.id || '')}
              >
                {{
                  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>

            <div class={styles.item}>
              <Cell center isLink to={'/subsidy-reward-detail'}>
                {{
                  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=' + teacher.id}
                    >
                      {{
                        icon: () => <img class={styles.itemPicture} src={teacher.avatar} />,
                        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>
        <div class={styles.confirmBtn}>
          <div class="van-safe-area-bottom">
            <Button block type="primary" round>
              确认无误
            </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点确认，则延后到下周周五发放 4、如遇法定节假日，则统一延后到下一周五发放
              <br />
              5、未绑定银行卡造成无法发放时，在绑定银行卡后的下一周五一次性将已确认且未发放的金额一次性发放
            </div>
          </div>
        </Dialog>
      </div>
    )
  }
})