import { ref, reactive } from 'vue'
import { ADVERTISING_TYPE, ADVERTISING_PLATFORM, ADVERTISING_STATUS } from '@/utils/dictionary.js'

export const form = reactive({
  advertisingForm: {
    cover: null,
    title: null,
    description: null,
    type: 1,
    platform: 1,
    url: null,
    status: 1,
    width: null,
    height: null,
    startTime: null,
    endTime: null,
    sort: null,
    content: null
  },
  advertisingRules: {
    title: [{ required: true, message: '请输入广告标题', trigger: 'blur' }],
    sort: [{ required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }]
  },
  formItem: [
    { type: 'oss', refIndex: 0, key: 'imageStatus', file: 'cover', label: '广告图片' },

    { type: 'input', key: 'title', label: '广告标题', props: { maxlength: '20', placeholder: '请输入广告标题', clearable: true }},
    { type: 'input', key: 'description', label: '广告描述', props: { maxlength: '20', placeholder: '请输入广告描述', clearable: true }},

    { type: 'select', key: 'type', label: '广告类型', props: { options: ADVERTISING_TYPE, placeholder: '请选择广告类型' }},
    { type: 'select', key: 'platform', label: '投放平台', props: { options: ADVERTISING_PLATFORM, placeholder: '请选择投放平台' }},

    { type: 'input', key: 'url', label: '广告URL', props: { maxlength: '20', placeholder: '请输入广告URL', clearable: true }},
    { type: 'radio', key: 'status', label: '广告状态', options: ADVERTISING_STATUS },

    { type: 'number', key: 'width', label: '广告宽度', props: { min: 0, placeholder: '请输入广告宽度', showButton: false, clearable: true }},
    { type: 'number', key: 'height', label: '广告高度', props: { min: 0, placeholder: '请输入广告高度', showButton: false, clearable: true }},

    { type: 'date', key: 'startTime', label: '开始时间', props: {
      type: 'datetime',
      valueFormat: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd HH:mm:ss',
      actions: ['clear', 'confirm'],
      timePickerProps: { actions: ['confirm'] }
    }},
    { type: 'date', key: 'endTime', label: '结束时间', props: {
      type: 'datetime',
      valueFormat: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd HH:mm:ss',
      actions: ['clear', 'confirm'],
      timePickerProps: { actions: ['confirm'] }
    }},

    { type: 'number', key: 'sort', label: '排序号', props: { min: 0, placeholder: '请输入排序号', showButton: false, clearable: true }},

    { type: 'editor', key: 'content', label: '广告内容', props: { height: 300 }}
  ]
})

