import { deepClone } from '@/layout/components/Header/imkit/utils/utils'
import { NAlert, NButton, NForm, NFormItemGi, NGrid, NInput, NSelect, useMessage } from 'naive-ui'
import { defineComponent, onMounted, reactive, ref, shallowRef } from 'vue'
import { sysParamConfigPage, sysParamConfigUpdate } from '../../api'
import styles from './index.module.less'

export default defineComponent({
  name: 'other-rule',
  setup() {
    const forms = reactive({}) as any
    const beforeData: any = ref({}) // 储存原始数据
    const formsRef = ref()
    const btnLoading = ref(false)
    const message = useMessage()

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

        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: 'OTHER' })
            message.success('保存成功')
            beforeData.value = { ...forms }
          } catch (e) {
            console.log(e)
          }
          btnLoading.value = false
        } else {
          message.success('保存成功')
        }
      })
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <>
        <NForm ref={formsRef} labelPlacement="left" model={forms} requireMarkPlacement="left">
          <NAlert title="设备限制" showIcon={false} bordered={false} style="margin-bottom: 12px;" />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="教务端每个账号可登录"
              path="school_device_num"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入设备数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['school_device_num']}>
                {{ suffix: () => '台' }}
              </NInput>
              设备
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="学生端每个账号可登录"
              path="student_device_num"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入设备数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['student_device_num']}
              >
                {{ suffix: () => '台' }}
              </NInput>
              设备
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="老师端每个账号可登录"
              path="teacher_device_num"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入设备数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['teacher_device_num']}
              >
                {{ suffix: () => '台' }}
              </NInput>
              设备
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="后端账号登录异常"
              path="backend_login_locked"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入次数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['backend_login_locked']}
              >
                {{ suffix: () => '次' }}
              </NInput>
              锁定
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="教务端账号登录异常"
              path="school_login_locked"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入次数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['school_login_locked']}
              >
                {{ suffix: () => '次' }}
              </NInput>
              锁定
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="学生端账号登录异常"
              path="student_login_locked"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入次数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['student_login_locked']}
              >
                {{ suffix: () => '次' }}
              </NInput>
              锁定
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="老师端账号登录异常"
              path="teacher_login_locked"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入次数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['teacher_login_locked']}
              >
                {{ suffix: () => '次' }}
              </NInput>
              锁定
            </NFormItemGi>
          </NGrid>

          {/* <NAlert
            title="学期开始时间"
            showIcon={false}
            bordered={false}
            style="margin-bottom: 12px;"
          />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="上学期开始时间"
              path="last_term_time"
              rule={[
                {
                  required: true,
                  message: '请输入上学期开始时间',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['last_term_time']}></NInput>
            </NFormItemGi>
          </NGrid>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="下学期开始时间"
              path="next_term_time"
              rule={[
                {
                  required: true,
                  message: '请输入下学期开始时间',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['next_term_time']}></NInput>
            </NFormItemGi>
          </NGrid> */}

          <NAlert
            title="课程最早开始和最晚结束时间"
            showIcon={false}
            bordered={false}
            style="margin-bottom: 12px;"
          />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="最早开始时间"
              path="course_start_time"
              rule={[
                {
                  required: true,
                  message: '请输入最早开始时间',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['course_start_time']}
              ></NInput>
            </NFormItemGi>
          </NGrid>
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="最晚结束时间"
              path="course_end_time"
              rule={[
                {
                  required: true,
                  message: '请输入最晚结束时间',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['course_end_time']}
              ></NInput>
            </NFormItemGi>
          </NGrid>

          <NAlert
            title="二维码有效期"
            showIcon={false}
            bordered={false}
            style="margin-bottom: 12px;"
          />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="二维码过期时间"
              path="qr_code_expire_hours"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入二维码过期时间',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['qr_code_expire_hours']}
              >
                {{ suffix: () => '小时' }}
              </NInput>
            </NFormItemGi>
          </NGrid>

          <NAlert
            title="酷乐秀按钮设置"
            showIcon={false}
            bordered={false}
            style="margin-bottom: 12px;"
          />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="是否开启酷乐秀"
              path="clx_enable"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入天数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NSelect
                class={styles.w140}
                options={[
                  {
                    label: '启用',
                    value: '1'
                  },
                  {
                    label: '停用',
                    value: '0'
                  }
                ]}
                v-model:value={forms['clx_enable']}
              />
            </NFormItemGi>
            <NFormItemGi
              label="开启酷乐秀按钮后，学生上课"
              path="clx_hidden_day"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入天数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['clx_hidden_day']}>
                {{ suffix: () => '天' }}
              </NInput>
              后展示按钮
            </NFormItemGi>
          </NGrid>
        </NForm>

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