import { getMenus } from '@/api/system/menu'
import UploadFile from '@/components/upload-file'
import { clientTypeArray, messageGroupArray, openTypeArray } from '@/utils/searchArray'
import { SearchOutline } from '@vicons/ionicons5'
import {
  NForm,
  NFormItemGi,
  NInput,
  NSpace,
  NButton,
  useMessage,
  NRadioGroup,
  NRadio,
  NSelect,
  NGrid
} from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { sysMessageConfigSave, sysMessageConfigUpdate } from '../../api'
const messageTypeArray = [
  { label: 'CUSTOME_MESSAGE_PUSH', value: 'CUSTOME_MESSAGE_PUSH' },
  { label: 'SMS_VERIFY_CODE_LOGIN', value: 'SMS_VERIFY_CODE_LOGIN' },
  { label: 'SMS_VERIFY_CODE_LOGOFF', value: 'SMS_VERIFY_CODE_LOGOFF' },
  { label: 'SMS_VERIFY_CODE_REGISTER', value: 'SMS_VERIFY_CODE_REGISTER' },
  { label: 'SMS_VERIFY_CODE_UPDATE_PSW', value: 'SMS_VERIFY_CODE_UPDATE_PSW' },
  { label: 'SMS_VERIFY_CODE_UPDATE_PHONE', value: 'SMS_VERIFY_CODE_UPDATE_PHONE' },
  { label: 'SMS_VERIFY_CODE', value: 'SMS_VERIFY_CODE' },
  { label: 'CAPTCHA_SESSION_KEY', value: 'CAPTCHA_SESSION_KEY' },
  { label: 'SMS_VERIFY_CODE_BANK_CARD', value: 'SMS_VERIFY_CODE_BANK_CARD' },
  { label: 'STUDENT_JOIN_FANSGROUP', value: 'STUDENT_JOIN_FANSGROUP' },
  { label: 'FANSGROUP_APPLY_SUCCESS', value: 'FANSGROUP_APPLY_SUCCESS' }
]

const subTypeArray = [
  { label: 'TEACHER_AUTH', value: 'TEACHER_AUTH' },
  { label: 'PRACTICE', value: 'PRACTICE' },
  { label: 'MUSIC_SHEET', value: 'MUSIC_SHEET' },
  { label: 'COURSE', value: 'COURSE' },
  { label: 'INCOME', value: 'INCOME' },
  { label: 'HOMEWORK', value: 'HOMEWORK' },
  { label: 'EVALUATE', value: 'EVALUATE' },
  { label: 'GROUP_CHAT', value: 'GROUP_CHAT' },
  { label: 'VIP', value: 'VIP' }
]

const actionArray = [
  { label: 'h5', value: 'h5' },
  { label: 'app', value: 'app' }
]

export default defineComponent({
  name: 'role-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { slots, attrs, emit }) {
    const forms = reactive({
      sendFlag: null,
      clientId: null,
      actionUrl: null,
      icon: null,
      description: null,
      params: null,
      content: null,
      messageType: null,
      action: null,
      subType: null,
      group: null
    }) as any
    const btnLoading = ref(false)

    const formsRef = ref()
    const message = useMessage()

    const onSubmit = async () => {
      console.log('date', '1212')
      formsRef.value.validate(async (error: any) => {
        if (error) return false

        try {
          btnLoading.value = true
          if (props.type === 'add') {
            await sysMessageConfigSave({ ...forms })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await sysMessageConfigUpdate({ ...forms, id: props.data.id })
            message.success('修改成功')
          }

          emit('close')
          emit('getList')
        } catch (e: any) {
          console.log(e, 'e')
        }
        btnLoading.value = false
      })
    }

    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        forms.sendFlag = data.sendFlag
        forms.clientId = data.clientId
        forms.actionUrl = data.actionUrl
        forms.icon = data.icon
        forms.description = data.description
        forms.params = data.params
        forms.content = data.content
        forms.messageType = data.messageType
        forms.action = data.action
        forms.subType = data.subType
        forms.group = data.group
      }
    })

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="100">
          <NGrid cols={2}>
            <NFormItemGi label="图标地址" path="icon">
              <UploadFile size={5} listType="image-card" v-model:fileList={forms.icon} />
            </NFormItemGi>
            <NFormItemGi
              label="是否发送"
              path="sendFlag"
              rule={[
                {
                  required: true,
                  message: '请选择是否发送'
                }
              ]}
            >
              <NRadioGroup v-model:value={forms.sendFlag}>
                <NRadio value={1}>发送</NRadio>
                <NRadio value={0}>不发送</NRadio>
              </NRadioGroup>
            </NFormItemGi>
            <NFormItemGi
              label="客户端类型"
              path="clientId"
              rule={[
                {
                  required: true,
                  message: '请输入客户端类型'
                }
              ]}
            >
              <NSelect
                placeholder="请输入客户端类型"
                v-model:value={forms.clientId}
                options={clientTypeArray}
              />
            </NFormItemGi>
            <NFormItemGi
              label="消息类型"
              path="messageType"
              rule={[
                {
                  required: true,
                  message: '请输入消息类型'
                }
              ]}
            >
              <NSelect
                placeholder="请输入消息类型"
                v-model:value={forms.messageType}
                options={messageTypeArray}
              />
            </NFormItemGi>
            <NFormItemGi
              label="消息组"
              path="group"
              rule={[
                {
                  required: true,
                  message: '请输入消息组'
                }
              ]}
            >
              <NSelect
                placeholder="请输入消息组"
                v-model:value={forms.group}
                options={messageGroupArray}
              />
            </NFormItemGi>
            <NFormItemGi label="二级分类" path="subType">
              <NSelect
                placeholder="请输入二级分类"
                v-model:value={forms.subType}
                options={subTypeArray}
              />
            </NFormItemGi>
            <NFormItemGi label="跳转类型" path="action">
              <NSelect
                placeholder="请输入跳转类型"
                v-model:value={forms.action}
                options={actionArray}
              />
            </NFormItemGi>
            <NFormItemGi label="跳转连接" path="actionUrl">
              <NInput
                v-model:value={forms.actionUrl}
                placeholder="请输入跳转连接"
                clearable
                maxlength={100}
              ></NInput>
            </NFormItemGi>
            <NFormItemGi label="其它参数" path="params">
              <NInput
                v-model:value={forms.params}
                placeholder="请输入其它参数"
                clearable
                maxlength={100}
              ></NInput>
            </NFormItemGi>
            <NFormItemGi label="消息内容" path="content">
              <NInput
                v-model:value={forms.content}
                placeholder="请输入消息内容"
                clearable
                maxlength={100}
              ></NInput>
            </NFormItemGi>
            <NFormItemGi label="描述" path="description">
              <NInput
                v-model:value={forms.description}
                maxlength={180}
                type="textarea"
                rows={2}
                placeholder="请输入描述"
                clearable
              />
            </NFormItemGi>
          </NGrid>
        </NForm>

        <NSpace justify="end">
          <NButton type="default" onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton type="primary" onClick={onSubmit} loading={btnLoading.value}>
            保存
          </NButton>
        </NSpace>
      </div>
    )
  }
})
