import SaveForm from '@/components/save-form'
import Pagination from '@/components/pagination'
import {
  NButton,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  NDataTable,
  DataTableColumn,
  NDatePicker
} from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { sysMessagePage } from './api'
import { getTimes } from '@/utils/dateUtil'
import { sysParamConfigSingle } from '../system-manage/api'

export const smsType = {
  SMS_VERIFY_CODE_LOGIN: '验证码登录',
  SMS_VERIFY_CODE_LOGOFF: '用户注销',
  SMS_VERIFY_CODE_REGISTER: '验证码注册',
  SMS_VERIFY_CODE_UPDATE_PSW: '密码修改',
  SMS_VERIFY_CODE_UPDATE_PHONE: '修改手机号',
  SMS_VERIFY_CODE: '验证码',
  SMS_VERIFY_CODE_BANK_CARD: '银行卡验证'
} as any

export default defineComponent({
  name: 'subsidy-manage',
  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      verify_code_expire_time: 0,
      searchForm: {
        messageType: '',
        receiver: null,
        times: null //  结算时间
      },
      dataList: [] as any
    })
    const columns = (): DataTableColumn[] => [
      {
        title: '手机号',
        key: 'receiver',
        ellipsis: {
          tooltip: true
        }
      },
      {
        title: '验证码',
        key: 'verityCode',
        ellipsis: {
          tooltip: true
        }
      },

      {
        title: '验证码类型',
        key: 'messageType',
        render(row: any) {
          return smsType[row.messageType]
        }
      },
      {
        title: '发送时间',
        key: 'createTime'
      }
    ]

    const saveForm = ref()
    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    const getList = async () => {
      const { times, messageType, ...result } = state.searchForm
      console.log(state, 'state.searchForm')
      let type = messageType
      // 判断是否选择的全部
      if (!messageType) {
        type =
          'SMS_VERIFY_CODE_LOGIN,SMS_VERIFY_CODE_LOGOFF,SMS_VERIFY_CODE_REGISTER,SMS_VERIFY_CODE_UPDATE_PSW,SMS_VERIFY_CODE_UPDATE_PHONE,SMS_VERIFY_CODE,SMS_VERIFY_CODE_BANK_CARD'
      }
      let obj = {
        type: 'SMS',
        messageType: type,
        ...result,
        ...getTimes(times, ['startTime', 'endTime'], 'YYYY-MM-DD'),
        ...state.pagination
      }
      try {
        state.loading = true
        const { data } = await sysMessagePage({ ...obj })
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

    const getSystemList = async () => {
      try {
        const { data } = await sysParamConfigSingle({ paramName: 'verify_code_expire_time' })
        state.verify_code_expire_time = data.paramValue || 0
      } catch {
        //
      }
    }

    onMounted(() => {
      getSystemList()
      getList()
    })
    return () => (
      <div class="system-menu-container">
        <h2>短信验证码</h2>
        <SaveForm
          ref={saveForm}
          model={state.searchForm}
          saveKey="sms-code-message"
          onSubmit={onSubmit}
          onSetModel={(val: any) => {
            console.log(val, 'val')
            state.searchForm = val
          }}
        >
          <NFormItem label="手机号" path="receiver">
            <NInput
              v-model:value={state.searchForm.receiver}
              placeholder="请输入手机号"
              clearable
            />
          </NFormItem>

          <NFormItem label="验证码类型" path="messageType">
            <NSelect
              v-model:value={state.searchForm.messageType}
              options={[
                { value: 'SMS_VERIFY_CODE_LOGIN', label: '验证码登录' },
                { value: 'SMS_VERIFY_CODE_LOGOFF', label: '用户注销' },
                { value: 'SMS_VERIFY_CODE_REGISTER', label: '验证码注册' },
                { value: 'SMS_VERIFY_CODE_UPDATE_PSW', label: '密码修改' },
                { value: 'SMS_VERIFY_CODE_UPDATE_PHONE', label: '修改手机号' },
                { value: 'SMS_VERIFY_CODE', label: '验证码' },
                { value: 'SMS_VERIFY_CODE_BANK_CARD', label: '银行卡验证' }
              ]}
              placeholder="请选择验证码类型"
              clearable
            />
          </NFormItem>
          <NFormItem label="发送时间" path="times">
            <NDatePicker
              v-model:value={state.searchForm.times}
              type="daterange"
              clearable
              value-format="yyyy.MM.dd"
              startPlaceholder="开始时间"
              endPlaceholder="结束时间"
            />
          </NFormItem>
          <NFormItem>
            <NSpace>
              <NButton type="primary" onClick={onSearch}>
                搜索
              </NButton>
              <NButton type="default" onClick={onBtnReset}>
                重置
              </NButton>
            </NSpace>
          </NFormItem>
        </SaveForm>

        <div class={['section-container']}>
          <p style={{ paddingBottom: '10px' }}>
            验证码有效期为<span style={{ color: 'red' }}>{state.verify_code_expire_time}</span>
            分钟
          </p>
          <NDataTable
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
            rowKey={(row: any) => row.id}
          ></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            saveKey="sms-code-message"
            sync
          ></Pagination>
        </div>
      </div>
    )
  }
})
