import {
  addFormMinute,
  addFormMinuteAddS,
  reduceFormMinute,
  reduceFormMinuteAddS,
  reduceFormMinuteMS
} from '@/utils/dateUtil'
import {
  NAlert,
  NButton,
  NForm,
  NFormItem,
  NFormItemGi,
  NGrid,
  NGridItem,
  NInput,
  NInputGroup,
  NSelect,
  useMessage
} from 'naive-ui'
import { defineComponent, reactive, ref, shallowRef } from 'vue'
import { sysParamConfigPage, sysParamConfigUpdate } from '../../api'
import styles from './index.module.less'

export default defineComponent({
  name: 'attendance-rule',
  setup() {
    const selectUnit = [
      {
        label: '元',
        value: 'MONEY'
      },
      {
        label: '%',
        value: 'PERCENTAGE'
      }
    ]
    const forms = reactive({}) as any
    const beforeData: any = shallowRef({}) // 储存原始数据
    const formsRef = ref()
    const btnLoading = ref(false)
    const message = useMessage()

    const getList = async () => {
      try {
        const { data } = await sysParamConfigPage({ page: 1, rows: 999, group: 'ATTENDANCE' })

        const rows = data.rows || []
        rows.forEach((row: any) => {
          forms[row.paramName] = row.paramValue
        })
        beforeData.value = { ...forms }
      } catch {}
    }

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

    const onSubmit = async () => {
      formsRef.value.validate(async (errors: any) => {
        if (errors) return

        const submitData = dataCompare(beforeData.value, forms)
        if (submitData && submitData.length > 0) {
          btnLoading.value = true
          try {
            await sysParamConfigUpdate({ configs: [...submitData], group: 'ATTENDANCE' })
            message.success('保存成功')
            beforeData.value = { ...forms }
          } catch {}
          btnLoading.value = false
        } else {
          message.success('保存成功')
        }
      })
    }

    getList()

    return () => (
      <>
        <NForm labelPlacement="left" model={forms} requireMarkPlacement="left" ref={formsRef}>
          <NAlert
            title="考勤定位范围"
            showIcon={false}
            bordered={false}
            style="margin-bottom: 12px;"
          />
          <h3>考勤定位范围</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="签到、签退GPS定位须在学校定位点"
              path="scope_of_attendance"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入定位距离',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['scope_of_attendance']}
              >
                {{ suffix: () => '米' }}
              </NInput>
              以内
            </NFormItemGi>
          </NGrid>
          <h3>签到签退定位异常</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              v-slots={{
                label: () => (
                  <>
                    <span class={styles.red}>签到</span>地点未在教学点范围内，扣减课酬
                  </>
                )
              }}
              path="sign_in_attendance"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入定位距离',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInputGroup class={[styles.mr14, styles.w140]}>
                <NInput class={styles.w80} v-model:value={forms['sign_in_attendance']}></NInput>
                <NSelect
                  class={styles.w60}
                  options={selectUnit}
                  v-model:value={forms['sign_in_attendance_type']}
                  defaultValue={'MONEY'}
                />
              </NInputGroup>
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              v-slots={{
                label: () => (
                  <>
                    <span class={styles.red}>签退</span>地点未在教学点范围内，扣减课酬
                  </>
                )
              }}
              path="sign_out_attendance"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入金额',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInputGroup class={[styles.mr14, styles.w140]}>
                <NInput class={styles.w80} v-model:value={forms['sign_out_attendance']}></NInput>
                <NSelect
                  class={styles.w60}
                  options={selectUnit}
                  v-model:value={forms['sign_out_attendance_type']}
                  defaultValue={'MONEY'}
                />
              </NInputGroup>
            </NFormItemGi>
          </NGrid>

          <NAlert title="签到规则" showIcon={false} bordered={false} style="margin-bottom: 12px;" />
          <h3>正常签到</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NGridItem class={styles.inlineFlex}>
              <NFormItem
                label="课程开始前"
                path="normal_sign_in_start"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入分钟数',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput
                  class={[styles.w140, styles.mr14]}
                  v-model:value={forms['normal_sign_in_start']}
                >
                  {{ suffix: () => '分钟' }}
                </NInput>
              </NFormItem>
              <NFormItem
                label="至课程开始前"
                showRequireMark={false}
                path="normal_sign_in_end"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入分钟数',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput
                  class={[styles.w140, styles.mr14]}
                  v-model:value={forms['normal_sign_in_end']}
                  onUpdateValue={(val: any) => {
                    forms['abnormal_sign_in'] = val
                  }}
                >
                  {{ suffix: () => '分钟' }}
                </NInput>
              </NFormItem>
            </NGridItem>
            <NGridItem>
              <div class={styles.tips}>
                例: <span class={styles.red}>12:00:00</span> 开始的课程，正常签到时间范围：
                <span class={styles.red}>
                  {reduceFormMinute('12:00:00', forms['normal_sign_in_start'])} ~
                  {reduceFormMinute('12:00:00', forms['normal_sign_in_end'])}
                </span>{' '}
                且最早
                <span class={styles.red}>
                  {reduceFormMinute('12:00:00', forms['normal_sign_in_start'])}
                </span>
                可以进行签到。
              </div>
            </NGridItem>
          </NGrid>

          {forms['normal_sign_in_end'] && (
            <>
              <h3>异常签到</h3>
              <NGrid class={styles.pl13} cols={1}>
                <NGridItem class={styles.inlineFlex}>
                  <NFormItem
                    label="未在课程开始前"
                    path="abnormal_sign_in"
                    rule={[
                      {
                        required: true,
                        pattern: /^\d+$/,
                        message: '请输入分钟数',
                        trigger: ['blur', 'input']
                      }
                    ]}
                  >
                    <NInput
                      class={[styles.w140, styles.mr14]}
                      disabled
                      v-model:value={forms['abnormal_sign_in']}
                    >
                      {{ suffix: () => '分钟' }}
                    </NInput>
                  </NFormItem>
                  <NFormItem
                    label="前签到，扣减当日训练补助"
                    showRequireMark={false}
                    path="abnormal_sign_in_fee"
                    rule={[
                      {
                        required: true,
                        pattern: /^\d+$/,
                        message: '请输入金额',
                        trigger: ['blur', 'input']
                      }
                    ]}
                  >
                    <NInputGroup class={[styles.mr14, styles.w140]}>
                      <NInput
                        class={styles.w80}
                        v-model:value={forms['abnormal_sign_in_fee']}
                      ></NInput>
                      <NSelect
                        class={styles.w60}
                        options={selectUnit}
                        v-model:value={forms['abnormal_sign_in_fee_type']}
                        defaultValue={'MONEY'}
                      />
                    </NInputGroup>
                  </NFormItem>
                </NGridItem>
                <NGridItem>
                  <div class={styles.tips}>
                    例: <span class={styles.red}>12:00:00</span> 开始的课程，在
                    <span class={styles.red}>
                      {reduceFormMinuteAddS('12:00:00', forms['abnormal_sign_in'])} ~ 12:00:00
                    </span>{' '}
                    时间段内签到为
                    <span class={styles.red}>异常签到</span>。
                  </div>
                </NGridItem>
              </NGrid>
            </>
          )}

          <h3>迟到</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NGridItem class={styles.inlineFlex}>
              <NFormItem
                label="课程开始后"
                path="late_sign_in"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入分钟数',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput
                  class={[styles.w140, styles.mr14]}
                  v-model:value={forms['late_sign_in']}
                  onUpdateValue={(val: any) => {
                    forms['absence_sign_in'] = val
                  }}
                >
                  {{ suffix: () => '分钟' }}
                </NInput>
              </NFormItem>
              <NFormItem
                label="以内签到，扣减当日训练补助"
                showRequireMark={false}
                path="late_sign_in_fee"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入金额',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInputGroup class={[styles.mr14, styles.w140]}>
                  <NInput class={styles.w80} v-model:value={forms['late_sign_in_fee']}></NInput>
                  <NSelect
                    class={styles.w60}
                    options={selectUnit}
                    v-model:value={forms['late_sign_in_fee_type']}
                    defaultValue={'MONEY'}
                  />
                </NInputGroup>
              </NFormItem>
            </NGridItem>
            <NGridItem>
              <div class={styles.tips}>
                例: <span class={styles.red}>12:00:00</span> 开始的课程，在
                <span class={styles.red}>
                  {addFormMinuteAddS('12:00:00', 0)} ~{' '}
                  {addFormMinute('12:00:00', forms['late_sign_in'])}
                </span>
                时间段内签到为
                <span class={styles.red}>迟到</span>。
              </div>
            </NGridItem>
          </NGrid>

          {forms['late_sign_in'] && (
            <>
              <h3>旷课</h3>
              <NGrid class={styles.pl13} cols={1}>
                <NGridItem class={styles.inlineFlex}>
                  <NFormItem
                    label="课程开始"
                    path="absence_sign_in"
                    rule={[
                      {
                        required: true,
                        pattern: /^\d+$/,
                        message: '请输入分钟数',
                        trigger: ['blur', 'input']
                      }
                    ]}
                  >
                    <NInput
                      class={[styles.w140, styles.mr14]}
                      v-model:value={forms['absence_sign_in']}
                      disabled
                    >
                      {{ suffix: () => '分钟' }}
                    </NInput>
                  </NFormItem>
                  <NFormItem
                    label="后签到，扣减当日训练补助"
                    showRequireMark={false}
                    path="absence_sign_in_fee"
                    rule={[
                      {
                        required: true,
                        pattern: /^\d+$/,
                        message: '请输入金额',
                        trigger: ['blur', 'input']
                      }
                    ]}
                  >
                    <NInputGroup class={[styles.mr14, styles.w140]}>
                      <NInput
                        class={styles.w80}
                        v-model:value={forms['absence_sign_in_fee']}
                      ></NInput>
                      <NSelect
                        class={styles.w60}
                        options={selectUnit}
                        v-model:value={forms['absence_sign_in_fee_type']}
                        defaultValue={'MONEY'}
                      />
                    </NInputGroup>
                  </NFormItem>
                </NGridItem>
                <NGridItem>
                  <div class={styles.tips}>
                    例: <span class={styles.red}>12:00:00</span> 开始的课程，在
                    <span class={styles.red}>
                      {addFormMinute('12:00:00', forms['absence_sign_in'])}
                    </span>{' '}
                    后签到(含
                    <span class={styles.red}>
                      {addFormMinute('12:00:00', forms['absence_sign_in'])}
                    </span>
                    )为
                    <span class={styles.red}>旷课</span>。
                  </div>
                </NGridItem>
              </NGrid>
            </>
          )}

          <h3>未签到</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="扣减当日训练补助"
              path="not_sign_in_fee"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入金额',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInputGroup class={[styles.mr14, styles.w140]}>
                <NInput class={styles.w80} v-model:value={forms['not_sign_in_fee']}></NInput>
                <NSelect
                  class={styles.w60}
                  options={selectUnit}
                  v-model:value={forms['not_sign_in_fee_type']}
                  defaultValue={'MONEY'}
                />
              </NInputGroup>
            </NFormItemGi>
          </NGrid>

          <NAlert title="签退规则" showIcon={false} bordered={false} style="margin-bottom: 12px;" />
          <h3>正常签退</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NGridItem class={styles.inlineFlex}>
              <NFormItem
                label="当日课程结束"
                path="normal_sign_out"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入分钟数',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['normal_sign_out']}>
                  {{ suffix: () => '分钟' }}
                </NInput>
                内签退
              </NFormItem>
            </NGridItem>
            <NGridItem>
              <div class={styles.tips}>
                例: <span class={styles.red}>13:00:00</span> 当日课程结束，可在
                <span class={styles.red}>
                  13:00:00 ~ {addFormMinute('13:00:00', forms['normal_sign_out'])}{' '}
                </span>
                时间段内完成签退。
              </div>
            </NGridItem>
          </NGrid>

          <h3>异常签退</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NGridItem class={styles.inlineFlex}>
              <NFormItem
                label="课程结束前"
                path="abnormal_sign_out"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入分钟数',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput
                  class={[styles.w140, styles.mr14]}
                  v-model:value={forms['abnormal_sign_out']}
                  onUpdateValue={(val: any) => {
                    forms['premise_sign_out'] = val
                  }}
                >
                  {{ suffix: () => '分钟' }}
                </NInput>
              </NFormItem>
              <NFormItem
                label="至结束时间段内签退，扣减当日训练补助"
                showRequireMark={false}
                path="abnormal_sign_out_fee"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入金额',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInputGroup class={[styles.mr14, styles.w140]}>
                  <NInput
                    class={styles.w80}
                    v-model:value={forms['abnormal_sign_out_fee']}
                  ></NInput>
                  <NSelect
                    class={styles.w60}
                    options={selectUnit}
                    v-model:value={forms['abnormal_sign_out_fee_type']}
                    defaultValue={'MONEY'}
                  />
                </NInputGroup>
              </NFormItem>
            </NGridItem>
            <NGridItem>
              <div class={styles.tips}>
                例: <span class={styles.red}>17:00:00</span> 当日课程结束，在
                <span class={styles.red}>
                  {reduceFormMinute('17:00:00', forms['abnormal_sign_out'])} ~{' '}
                  {reduceFormMinuteMS('17:00:00', 0)}
                </span>
                时间段内签退为
                <span class={styles.red}>异常签到</span>。
              </div>
            </NGridItem>
          </NGrid>

          {forms['abnormal_sign_out'] && (
            <>
              <h3>早退</h3>
              <NGrid class={styles.pl13} cols={1}>
                <NGridItem class={styles.inlineFlex}>
                  <NFormItem
                    label="课程结束前"
                    path="premise_sign_out"
                    rule={[
                      {
                        required: true,
                        pattern: /^\d+$/,
                        message: '请输入分钟数',
                        trigger: ['blur', 'input']
                      }
                    ]}
                  >
                    <NInput
                      class={[styles.w140, styles.mr14]}
                      v-model:value={forms['premise_sign_out']}
                      disabled
                    >
                      {{ suffix: () => '分钟' }}
                    </NInput>
                  </NFormItem>
                  <NFormItem
                    label="以上签退，扣减当日训练补助"
                    showRequireMark={false}
                    path="premise_sign_out_fee"
                    rule={[
                      {
                        required: true,
                        pattern: /^\d+$/,
                        message: '请输入金额',
                        trigger: ['blur', 'input']
                      }
                    ]}
                  >
                    <NInputGroup class={[styles.mr14, styles.w140]}>
                      <NInput
                        class={styles.w80}
                        v-model:value={forms['premise_sign_out_fee']}
                      ></NInput>
                      <NSelect
                        class={styles.w60}
                        options={selectUnit}
                        v-model:value={forms['premise_sign_out_fee_type']}
                        defaultValue={'MONEY'}
                      />
                    </NInputGroup>
                  </NFormItem>
                </NGridItem>
                <NGridItem>
                  <div class={styles.tips}>
                    例: <span class={styles.red}>17:00:00</span> 当日课程结束，在
                    <span class={styles.red}>
                      {reduceFormMinute('17:00:00', forms['premise_sign_out'])}
                    </span>
                    前签退(含
                    <span class={styles.red}>
                      {reduceFormMinute('17:00:00', forms['premise_sign_out'])}
                    </span>
                    )为
                    <span class={styles.red}>早退</span>。
                  </div>
                </NGridItem>
              </NGrid>
            </>
          )}

          {/* <h3>旷课</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NGridItem class={styles.inlineFlex}>
              <NFormItem
                label="课程开始"
                path="absence_sign_out"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入分钟数',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['absence_sign_out']}>
                  {{ suffix: () => '分钟' }}
                </NInput>
              </NFormItem>
              <NFormItem
                label="后签到，扣减当日训练补助"
                showRequireMark={false}
                path="absence_sign_out_fee"
                rule={[
                  {
                    required: true,
                    pattern: /^\d+$/,
                    message: '请输入金额',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInputGroup class={[styles.mr14, styles.w140]}>
                  <NInput class={styles.w80} v-model:value={forms['absence_sign_out_fee']}></NInput>
                  <NSelect
                    class={styles.w60}
                    options={selectUnit}
                    v-model:value={forms['absence_sign_out_fee_type']}
                    defaultValue={'MONEY'}
                  />
                </NInputGroup>
              </NFormItem>
            </NGridItem>
            <NGridItem>
              <div class={styles.tips}>
                例: <span class={styles.red}>12:00:00</span> 开始的课程，在
                <span class={styles.red}>12:30:01 ~ 12:00:00</span> 以后签到为
                <span class={styles.red}>旷课</span>
              </div>
            </NGridItem>
          </NGrid> */}

          <h3>未签退</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="课程未签退，扣减当日训练补助"
              path="not_sign_out_fee"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入金额',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInputGroup class={[styles.mr14, styles.w140]}>
                <NInput class={styles.w80} v-model:value={forms['not_sign_out_fee']}></NInput>
                <NSelect
                  class={styles.w60}
                  options={selectUnit}
                  v-model:value={forms['not_sign_out_fee_type']}
                  defaultValue={'MONEY'}
                />
              </NInputGroup>
            </NFormItemGi>
          </NGrid>

          <h3>签退提醒</h3>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="当日训练结束后"
              path="sign_out_remind"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入分钟数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['sign_out_remind']}>
                {{ suffix: () => '分钟' }}
              </NInput>
              对当日存在未签退课程的老师发送短信、推送、公众号提醒
            </NFormItemGi>
          </NGrid>
        </NForm>

        <NButton
          type="primary"
          onClick={onSubmit}
          loading={btnLoading.value}
          //v-auth="sysParamConfig/update1597903049401421825"
        >
          保存设置
        </NButton>
      </>
    )
  }
})
