import { NForm, NFormItem, NInput, NSelect, NSpace, NButton, useMessage, NCascader } from 'naive-ui'
import type { TreeSelectOption } from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import { helpCenterContentSave, helpCenterContentUpdate } from '../../api'
import Editor from '@/components/editor'

export default defineComponent({
  name: 'city-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {}
    },
    catalogList: {
      type: Array as PropType<Array<TreeSelectOption>>,
      default: () => []
    },
    clientTypeList: {
      type: Array as PropType<Array<string>>,
      default: () => []
    }
  },
  emits: ['close', 'getList'],
  setup(props, { slots, attrs, emit }) {
    const forms = reactive({
      title: null,
      catalogId: null,
      content: null,
      catalogType: null
    })

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

    // 提交记录
    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return
        try {
          btnLoading.value = true
          if (props.type === 'add') {
            await helpCenterContentSave({ ...forms })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await helpCenterContentUpdate({ ...forms, id: props.data.id })
            message.success('修改成功')
          }
          emit('getList')
          emit('close')
        } catch {
          //
        }
        setTimeout(() => {
          btnLoading.value = false
        }, 100)
      })
    }

    // 初始化数据
    if (props.type === 'edit') {
      const data = props.data
      forms.title = data.title
      forms.catalogId = data.catalogId
      forms.content = data.content
      forms.catalogType = data.catalogType
    }

    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="auto">
          <NFormItem
            label="标题"
            path="title"
            rule={[
              {
                required: true,
                message: '请输入标题',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <NInput
              v-model:value={forms.title}
              placeholder="请输入标题"
              clearable
              showCount
              maxlength={30}
            />
          </NFormItem>
          <NFormItem
            label="分类"
            path="catalogId"
            rule={[
              {
                required: true,
                message: '请选择分类',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <NSelect
              v-model:value={forms.catalogId}
              options={props.catalogList}
              placeholder="请选择分类"
              valueField="id"
              labelField="name"
              clearable
            ></NSelect>
          </NFormItem>
          <NFormItem
            label="客户端"
            path="catalogType"
            rule={[
              {
                required: true,
                message: '请选择客户端',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <NSelect
              v-model:value={forms.catalogType}
              options={props.clientTypeList as any}
              placeholder="请选择客户端"
              clearable
            ></NSelect>
          </NFormItem>
          <NFormItem
            label="内容"
            path="content"
            rule={[
              {
                required: true,
                message: '请输入内容'
              }
            ]}
          >
            <Editor v-model:value={forms.content} bucketName="news-info" />
          </NFormItem>
        </NForm>

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