import OSticky from '@/components/o-sticky'
import { configUnit } from '@/constant'
import request from '@/helpers/request'
import {
  addFormMinute,
  addFormMinuteAddS,
  reduceFormMinute,
  reduceFormMinuteAddS,
  reduceFormMinuteMS
} from '@/helpers/date'
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-out-rule',
  setup() {
    const statusList = reactive({
      show1: false,
      show2: false,
      show3: 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_out,abnormal_sign_out,abnormal_sign_out_fee,abnormal_sign_out_fee_type,premise_sign_out,premise_sign_out_fee,premise_sign_out_fee_type,not_sign_out_fee,not_sign_out_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_out']) {
        showToast('请输入正常签退时间')
        return
      }

      if (!forms['abnormal_sign_out']) {
        showToast('请输入异常签退时间')
        return
      }
      if (!forms['abnormal_sign_out_fee']) {
        showToast('请输入异常签退扣减金额')
        return
      }
      if (
        forms['abnormal_sign_out_fee'] > 100 &&
        forms['abnormal_sign_out_fee_type'] === 'PERCENTAGE'
      ) {
        showToast('异常签退扣减金额输入有误')
        return
      }

      if (!forms['premise_sign_out_fee']) {
        showToast('请输入早退扣减金额')
        return
      }
      if (
        forms['premise_sign_out_fee'] > 100 &&
        forms['premise_sign_out_fee_type'] === 'PERCENTAGE'
      ) {
        showToast('早退扣减金额输入有误')
        return
      }

      if (!forms['not_sign_out_fee']) {
        showToast('请输入未签退扣减金额')
        return
      }
      if (forms['not_sign_out_fee'] > 100 && forms['not_sign_out_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_out']}
                    >
                      {{ extra: () => <span class={styles.ruleExtra}>分钟</span> }}
                    </Field>
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>结束的课程为例, 在
                    <span style="display: inline-block;">
                      12:00:00～{addFormMinute('12:00:00', forms['normal_sign_out'])}
                    </span>
                    时间范围内签退属于<span>正常签退</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-w126']]}
                      autocomplete="off"
                      formatter={onFormatterInt}
                      type="number"
                      v-model={forms['abnormal_sign_out']}
                      onUpdate:modelValue={(value: any) => {
                        forms['premise_sign_out'] = 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['abnormal_sign_out'])}~
                      {reduceFormMinuteMS('12:00:00', 0)}
                    </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_out_fee']}
                    >
                      {{
                        extra: () => (
                          <Popover
                            v-model:show={statusList.show1}
                            class={styles.popover}
                            actions={actions}
                            onSelect={(val: any) => {
                              forms['abnormal_sign_out_fee_type'] = val.value
                            }}
                          >
                            {{
                              reference: () => (
                                <div class={[styles.unit, statusList.show1 && styles.active]}>
                                  {configUnit[forms['abnormal_sign_out_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['abnormal_sign_out'] || 0}分钟</span>以上{' '}
                    <br />
                    扣减当日训练补助
                  </div>
                  <div class={styles.ruleTips}>
                    以<span>12:00:00</span>结束的课程为例,在
                    <span>{reduceFormMinute('12:00:00', forms['abnormal_sign_out'])}</span>
                    前签退 (含{reduceFormMinute('12:00:00', forms['abnormal_sign_out'])}) 属于
                    <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['premise_sign_out_fee']}
                    >
                      {{
                        extra: () => (
                          <Popover
                            v-model:show={statusList.show2}
                            class={styles.popover}
                            actions={actions}
                            onSelect={(val: any) => {
                              forms['premise_sign_out_fee_type'] = val.value
                            }}
                          >
                            {{
                              reference: () => (
                                <div class={[styles.unit, statusList.show2 && styles.active]}>
                                  {configUnit[forms['premise_sign_out_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_out_fee']}
                  >
                    {{
                      extra: () => (
                        <Popover
                          v-model:show={statusList.show3}
                          class={styles.popover}
                          actions={actions}
                          onSelect={(val: any) => {
                            forms['not_sign_out_fee_type'] = val.value
                          }}
                        >
                          {{
                            reference: () => (
                              <div class={[styles.unit, statusList.show3 && styles.active]}>
                                {configUnit[forms['not_sign_out_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>
    )
  }
})
