import OSticky from '@/components/o-sticky'
import { configUnit } from '@/constant'
import {
  addFormMinute,
  addFormMinuteAddS,
  reduceFormMinute,
  reduceFormMinuteAddS
} from '@/helpers/date'
import request from '@/helpers/request'
import { verifiyNumberInteger } from '@/helpers/toolsValidate'
import { Button, Cell, CellGroup, Field, Popover, showToast } from 'vant'
import { defineComponent, onMounted, reactive, shallowRef, Teleport } from 'vue'
import styles from '../index.module.less'

export const actions = [
  {
    text: '元',
    value: 'MONEY'
  },
  {
    text: '%',
    value: 'PERCENTAGE'
  }
]

export default defineComponent({
  name: 'sigin-in-rule',
  setup() {
    const statusList = reactive({
      show1: false,
      show2: false,
      show3: false,
      show4: false
    })
    const beforeData: any = shallowRef({}) // 储存原始数据
    const forms = reactive({} as any)

    const getDetails = async () => {
      try {
        const { data } = await request.get('/api-school/schoolParamConfig/queryByParamNameList', {
          params: {
            // schoolId: '',
            paramNames:
              'normal_sign_in_start,normal_sign_in_end,abnormal_sign_in,abnormal_sign_in_fee,abnormal_sign_in_fee_type,late_sign_in,late_sign_in_fee,late_sign_in_fee_type,absence_sign_in,absence_sign_in_fee,absence_sign_in_fee_type,not_sign_in_fee,not_sign_in_fee_type'
          }
        })
        console.log(data, 'data')
        const rows = data || []
        rows.forEach((row: any) => {
          forms[row.paramName] = row.paramValue
        })
        beforeData.value = { ...forms }
      } catch {
        //
      }
    }

    // 数组进行对比
    const dataCompare = (beforeData: any, afterData: any) => {
      const changeDate: any = []
      for (const key in beforeData) {
        if (beforeData[key] != afterData[key]) {
          changeDate.push({
            paramName: key,
            paramValue: afterData[key]
          })
        }
      }
      return changeDate || []
    }

    // 修改
    const onSubmit = async () => {
      if (!forms['normal_sign_in_start']) {
        showToast('请输入签到时间范围')
        return
      }
      if (!forms['normal_sign_in_end']) {
        showToast('请输入正常签到时间')
        return
      }
      console.log(forms['normal_sign_in_end'], forms['normal_sign_in_start'])
      if (forms['normal_sign_in_end'] - forms['normal_sign_in_start'] > 0) {
        console.log(true)
        showToast('正常签到时间不能大于签到时间范围')
        return
      }
      if (!forms['abnormal_sign_in_fee']) {
        showToast('请输入异常签到扣减金额')
        return
      }
      if (
        forms['abnormal_sign_in_fee'] > 100 &&
        forms['abnormal_sign_in_fee_type'] === 'PERCENTAGE'
      ) {
        showToast('异常签到扣减金额输入有误')
        return
      }

      if (!forms['late_sign_in']) {
        showToast('请输入迟到时间')
        return
      }
      if (!forms['late_sign_in_fee']) {
        showToast('请输入迟到扣减金额')
        return
      }
      if (forms['late_sign_in_fee'] > 100 && forms['late_sign_in_fee_type'] === 'PERCENTAGE') {
        showToast('迟到扣减金额输入有误')
        return
      }

      if (!forms['absence_sign_in_fee']) {
        showToast('请输入旷课扣减金额')
        return
      }
      if (
        forms['absence_sign_in_fee'] > 100 &&
        forms['absence_sign_in_fee_type'] === 'PERCENTAGE'
      ) {
        showToast('旷课扣减金额输入有误')
        return
      }

      if (!forms['not_sign_in_fee']) {
        showToast('请输入未签到扣减金额')
        return
      }
      if (forms['not_sign_in_fee'] > 100 && forms['not_sign_in_fee_type'] === 'PERCENTAGE') {
        showToast('未签到扣减金额输入有误')
        return
      }
      try {
        const submitData = dataCompare(beforeData.value, forms)
        if (submitData.length > 0) {
          await request.post('/api-school/schoolParamConfig/update', {
            hideLoading: false,
            data: { configs: [...submitData], group: 'ATTENDANCE' }
          })

          beforeData.value = { ...forms }
        }
        setTimeout(() => {
          showToast('保存成功')
        }, 200)
      } catch {
        //
      }
    }

    onMounted(() => {
      getDetails()
    })

    const onFormatterInt = (val: any) => {
      if (val && val >= 0) {
        return verifiyNumberInteger(val)
      } else {
        return ''
      }
    }
    return () => (
      <div class={styles.ruleContainer}>
        <CellGroup inset>
          <Cell>{{ title: () => <div class={styles.ruleTitle}>签到时间范围</div> }}</Cell>
          <Cell>
            {{
              title: () => (
                <div class={styles.ruleContent}>
                  <div class={styles.ruleRange}>
                    课程开始前多少分钟可以签到：
                    <Field
                      class={[styles.field, styles['field-w102']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['normal_sign_in_start']}
                    >
                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
                    </Field>
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>开始的课程为例,最早
                    <span>{reduceFormMinute('12:00:00', forms['normal_sign_in_start'])}</span>
                    可以进行签到
                  </div>
                </div>
              )
            }}
          </Cell>
        </CellGroup>

        <CellGroup inset>
          <Cell>{{ title: () => <div class={styles.ruleTitle}>正常签到</div> }}</Cell>
          <Cell>
            {{
              title: () => (
                <div class={styles.ruleContent}>
                  <div class={styles.ruleRange}>
                    签到时间早于课程开始时间：
                    <Field
                      class={[styles.field, styles['field-w102']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['normal_sign_in_end']}
                      onUpdate:modelValue={(value: any) => {
                        console.log(value, 'value')
                        forms['abnormal_sign_in'] = value
                      }}
                    >
                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
                    </Field>
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>开始的课程为例,在
                    <span style="display: inline-block;">
                      {reduceFormMinute('12:00:00', forms['normal_sign_in_start'])}~
                      {reduceFormMinute('12:00:00', forms['normal_sign_in_end'])}
                    </span>
                    时间范围内签到属于<span>正常签到</span>
                  </div>
                </div>
              )
            }}
          </Cell>
        </CellGroup>

        <CellGroup inset>
          <Cell>
            {{
              title: () => <div class={[styles.ruleTitle]}>异常签到</div>
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleContent, styles.ruleMore]}>
                  <div class={styles.ruleDesc}>
                    签到时间晚于课程开始时间<span>前{forms['normal_sign_in_end'] || 0}分钟</span>{' '}
                    <br />
                    早于课程开始时间时，扣减当日训练补助
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>开始的课程为例,在
                    <span style="display: inline-block;">
                      {reduceFormMinuteAddS('12:00:00', forms['normal_sign_in_end'])}~12:00:00
                    </span>
                    时间范围内签到属于<span>异常签到</span>
                  </div>
                  {/* <div style={{ paddingTop: '20px' }} class={styles.flexDev}>
                    单次扣减金额：
                    <Field
                      class={[styles.field, styles['field-m'], styles['field-w136']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['abnormal_sign_in_fee']}
                    >
                      {{
                        extra: () => (
                          <Popover
                            v-model:show={statusList.show1}
                            class={styles.popover}
                            actions={actions}
                            onSelect={(val: any) => {
                              forms['abnormal_sign_in_fee_type'] = val.value
                            }}
                          >
                            {{
                              reference: () => (
                                <div class={[styles.unit, statusList.show1 && styles.active]}>
                                  {configUnit[forms['abnormal_sign_in_fee_type']]}
                                </div>
                              )
                            }}
                          </Popover>
                        )
                      }}
                    </Field>
                  </div> */}
                </div>
              )
            }}
          </Cell>
        </CellGroup>

        <CellGroup inset>
          <Cell>
            {{
              title: () => <div class={[styles.ruleTitle]}>迟到</div>
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleContent, styles.ruleMore]}>
                  <div class={styles.ruleRange}>
                    签到时间晚于课程开始时间：
                    <Field
                      class={[styles.field, styles['field-w102']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['late_sign_in']}
                      onUpdate:modelValue={(value: any) => {
                        forms['absence_sign_in'] = value
                      }}
                    >
                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
                    </Field>
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>开始的课程为例,在
                    <span style="display: inline-block;">
                      {addFormMinuteAddS('12:00:00', 0)} ~{' '}
                      {addFormMinute('12:00:00', forms['late_sign_in'])}
                    </span>
                    时间范围内签到属于<span>迟到</span>
                  </div>
                  {/* <div style={{ paddingTop: '20px' }} class={styles.flexDev}>
                    单次扣减金额：
                    <Field
                      class={[styles.field, styles['field-m'], styles['field-w136']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['late_sign_in_fee']}
                    >
                      {{
                        extra: () => (
                          <Popover
                            v-model:show={statusList.show2}
                            class={styles.popover}
                            actions={actions}
                            onSelect={(val: any) => {
                              forms['late_sign_in_fee_type'] = val.value
                            }}
                          >
                            {{
                              reference: () => (
                                <div class={[styles.unit, statusList.show2 && styles.active]}>
                                  {configUnit[forms['late_sign_in_fee_type']]}
                                </div>
                              )
                            }}
                          </Popover>
                        )
                      }}
                    </Field>
                  </div> */}
                </div>
              )
            }}
          </Cell>
        </CellGroup>

        <CellGroup inset>
          <Cell>
            {{
              title: () => <div class={[styles.ruleTitle]}>旷课</div>
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleContent, styles.ruleMore]}>
                  <div class={styles.ruleDesc}>
                    签到时间晚于课程开始时间<span>{forms['late_sign_in'] || 0}分钟</span> <br />
                    扣减当日训练补助
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>开始的课程为例,在
                    <span>{addFormMinute('12:00:00', forms['late_sign_in'])}</span>
                    后签到(含{addFormMinute('12:00:00', forms['late_sign_in'])}) 属于
                    <span>旷课</span>
                  </div>
                  {/* <div style={{ paddingTop: '20px' }} class={styles.flexDev}>
                    单次扣减金额：
                    <Field
                      class={[styles.field, styles['field-m'], styles['field-w136']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['absence_sign_in_fee']}
                    >
                      {{
                        extra: () => (
                          <Popover
                            v-model:show={statusList.show3}
                            class={styles.popover}
                            actions={actions}
                            onSelect={(val: any) => {
                              forms['absence_sign_in_fee_type'] = val.value
                            }}
                          >
                            {{
                              reference: () => (
                                <div class={[styles.unit, statusList.show3 && styles.active]}>
                                  {configUnit[forms['absence_sign_in_fee_type']]}
                                </div>
                              )
                            }}
                          </Popover>
                        )
                      }}
                    </Field>
                  </div> */}
                </div>
              )
            }}
          </Cell>
        </CellGroup>
        {/* <CellGroup inset>
          <Cell>
            {{
              title: () => <div class={[styles.ruleTitle]}>未签到</div>
            }}
          </Cell>
          <Cell>
            {{
              title: () => (
                <div class={[styles.ruleContent, styles.ruleMore, styles.flexDev]}>
                  单次扣减金额：
                  <Field
                    class={[styles.field, styles['field-m'], styles['field-w136']]}
                    autocomplete="off"
                    formatter={onFormatterInt}
                    type="number"
                    v-model={forms['not_sign_in_fee']}
                  >
                    {{
                      extra: () => (
                        <Popover
                          v-model:show={statusList.show4}
                          class={styles.popover}
                          actions={actions}
                          onSelect={(val: any) => {
                            forms['not_sign_in_fee_type'] = val.value
                          }}
                        >
                          {{
                            reference: () => (
                              <div class={[styles.unit, statusList.show4 && styles.active]}>
                                {configUnit[forms['not_sign_in_fee_type']]}
                              </div>
                            )
                          }}
                        </Popover>
                      )
                    }}
                  </Field>
                </div>
              )
            }}
          </Cell>
        </CellGroup> */}

        <Teleport to={'#app'}>
          <OSticky position="bottom">
            <div class={'btnGroup'}>
              <Button type="primary" round block onClick={onSubmit}>
                保存设置
              </Button>
            </div>
          </OSticky>
        </Teleport>
      </div>
    )
  }
})
