import OUpload from '@/components/o-upload'
import request from '@/helpers/request'
import { verifyUrl } from '@/helpers/toolsValidate'
import { Button, Field, showNotify, showToast } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './add-information.module.less'

export default defineComponent({
  name: 'add-information',
  props: {
    selectType: {
      type: String,
      default: 'add'
    },
    selectItem: {
      type: Object,
      default: {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { slots, attrs, emit }) {
    const forms = reactive({
      type: 'HOT_CONSULTATION',
      clientType: 'SCHOOL',
      coverImage: null,
      title: null,
      linkUrl: '',
      memo: null
    })
    const onSubmit = async () => {
      if (!forms.coverImage) {
        showToast('请上传封面图片')
        return
      } else if (!forms.title) {
        showToast('请输入资讯标题')
        return
      } else if (!forms.memo) {
        showToast('请输入内容简介')
        return
      } else if (!forms.linkUrl) {
        showToast('请输入链接')
        return
      } else if (!verifyUrl(forms.linkUrl)) {
        showToast('链接输入有误')
        return
      }
      try {
        if (props.selectType === 'add') {
          await request.post('/api-school/sysNewsInformation/save', {
            data: {
              ...forms
            }
          })
          showNotify({ type: 'primary', message: '添加成功' })
        } else if (props.selectType === 'update') {
          await request.post('/api-school/sysNewsInformation/update', {
            data: {
              ...forms,
              id: props.selectItem.id
            }
          })
          showNotify({ type: 'primary', message: '修改成功' })
        }

        emit('close')
        emit('getList')
      } catch {
        //
      }
    }

    onMounted(() => {
      if (props.selectType === 'update') {
        const selectItem = props.selectItem
        forms.coverImage = selectItem.coverImage
        forms.title = selectItem.title
        forms.linkUrl = selectItem.linkUrl
        forms.memo = selectItem.memo
      }
    })

    return () => (
      <div class={styles.addInformation}>
        <div class={styles.title}>
          <i class={[styles.icon, styles.icon1]}></i>请上传封面图片
        </div>
        <OUpload class={styles.upload} v-model:modelValue={forms.coverImage} />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon2]}></i>资讯标题
        </div>
        <Field placeholder="请输入资讯标题" class={styles.field} v-model={forms.title} />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon3]}></i>内容简介
        </div>
        <Field
          placeholder="请输入资讯内容简要概述"
          type="textarea"
          rows={2}
          class={styles.field}
          v-model={forms.memo}
        />

        <div class={styles.title}>
          <i class={[styles.icon, styles.icon4]}></i>添加链接
        </div>
        <Field placeholder="请输入链接" class={styles.field} v-model={forms.linkUrl} />

        <div class={'btnGroup'} style={{ marginTop: '24px' }}>
          <Button type="primary" block round onClick={onSubmit}>
            {props.selectType === 'add' ? '发布资讯' : '确认修改'}
          </Button>
        </div>
      </div>
    )
  }
})
