import { NAlert, NButton, NForm, NFormItemGi, NGrid, NInput, 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: 'finance-rule',
  setup() {
    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: 'FINANCE' })

        const rows = data.rows || []
        rows.forEach((row: any) => {
          if (row.paramName === 'refund_reason') {
            forms[row.paramName] = row.paramValue.trim()
          } else {
            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: 'FINANCE' })
            message.success('保存成功')
            beforeData.value = { ...forms }
          } catch {}
          btnLoading.value = false
        } else {
          message.success('保存成功')
        }
      })
    }

    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="training_end"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入训练结束天数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['training_end']}>
                {{ suffix: () => '天' }}
              </NInput>
              后，发放训练补助
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="训练补助结算扣除"
              path="subsidy_tax_rate"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入训练补助结算百分比',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['subsidy_tax_rate']}>
                {{ suffix: () => '‰' }}
              </NInput>
              手续费
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="申请提现后"
              path="subsidy_withdraw"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入申请提现的工作日',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput class={[styles.w140, styles.mr14]} v-model:value={forms['subsidy_withdraw']}>
                {{ suffix: () => '个工作日' }}
              </NInput>
              内打款
            </NFormItemGi>
          </NGrid>

          <NAlert title="交易退费" showIcon={false} bordered={false} style="margin-bottom: 12px;" />
          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="交易完成"
              path="transaction_complete"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入交易完成天数',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['transaction_complete']}
              >
                {{ suffix: () => '天' }}
              </NInput>
              内可申请退费
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="退费扣除"
              path="transaction_complete_tax_rate"
              rule={[
                {
                  required: true,
                  pattern: /^\d+$/,
                  message: '请输入退费扣除百分比',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                class={[styles.w140, styles.mr14]}
                v-model:value={forms['transaction_complete_tax_rate']}
              >
                {{ suffix: () => '‰' }}
              </NInput>
              手续费
            </NFormItemGi>
          </NGrid>

          <NGrid class={styles.pl13} cols={1}>
            <NFormItemGi
              label="退费原因"
              path="refund_reason"
              rule={[
                {
                  required: true,
                  message: '请输入退费原因',
                  trigger: ['blur', 'input']
                }
              ]}
            >
              <NInput
                type="textarea"
                class={[styles.mr14]}
                style={'width: 400px !important;'}
                v-model:value={forms['refund_reason']}
              ></NInput>
            </NFormItemGi>
          </NGrid>
        </NForm>

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