<template>
  <div class="main">
    <card title="创建活动">
      <v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
        <input type="button" value="确认创建，提交审核" class="submit-button" @click="handleSubmit" />
      </v-form>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import VForm from '@/components/Form'
import * as api from '@/api'

export default {
  name: 'CreateActivity',
  components: { Card, VForm },
  data() {
    return {
      formModel: {},
      fields: [
        {
          fieldType: 'uploader',
          name: 'activity_image',
          label: '封面',
          required: true,
          placeholder: '请上传活动封面',
          rules: [{ required: true, message: '请上传活动封面' }]
        },
        {
          name: 'activity_name',
          label: '主题',
          required: true,
          placeholder: '请输入活动主题',
          rules: [{ required: true, message: '请输入活动主题' }]
        },
        {
          type: 'textarea',
          name: 'activity_contents',
          label: '描述',
          required: true,
          placeholder: '请简单描述一下该活动',
          autosize: { maxHeight: 120, minHeight: 120 },
          rules: [{ required: true, message: '请简单描述一下该活动' }]
        },
        {
          fieldType: 'datetime',
          name: 'activity_time',
          label: '时间',
          required: true,
          placeholder: '请选择活动时间',
          rules: [{ required: true, message: '请选择活动时间' }]
        },
        {
          name: 'activity_city',
          label: '城市',
          required: true,
          placeholder: '请输入活动城市',
          rules: [{ required: true, message: '请输入活动城市' }]
        },
        {
          name: 'activity_address',
          label: '具体地址',
          required: true,
          placeholder: '请输入活动具体地址',
          rules: [{ required: true, message: '请输入活动具体地址' }]
        },
        {
          name: 'participator_limit',
          label: '人数',
          required: true,
          placeholder: '请输入活动人数',
          rules: [{ required: true, message: '请输入活动人数' }]
        },
        {
          fieldType: 'select',
          name: 'org_id',
          label: '审核渠道',
          required: true,
          placeholder: '请选择审核本活动的上级组织',
          rules: [{ required: true, message: '请选择审核本活动的上级组织' }],
          labelKey: 'org_name',
          valueKey: 'id',
          remote: {
            method: api.getJoinedGroupes,
            callback(response) {
              return response.filter(item => item.is_mine)
            }
          }
        },
        {
          fieldType: 'select',
          name: 'visibility',
          label: '活动可见性',
          required: true,
          placeholder: '请选择本活动对哪些用户组可见',
          rules: [{ required: true, message: '请选择本活动对哪些用户组可见' }],
          values: [
            { text: '所有人可见', value: '1' },
            { text: '所在组织可见', value: '2' },
            { text: '审核组织可见', value: '3' }
          ]
        }
      ],
      groups: []
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(route) {
        this.formModel = Object.assign(this.formModel, route.query)
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.submit()
    },
    onSubmit(data) {
      const ruleForm = this.$refs.form.ruleForm
      if (data.activity_image) {
        const [first = { url: '' }] = data.activity_image
        data.activity_image = first.url
      }
      data.org_id = ruleForm.org_id
      data.visibility = ruleForm.visibility
      api.addActivity(data).then(response => {
        if (response.success) {
          this.$dialog
            .alert({
              confirmButtonText: '确定',
              message: '活动创建成功，已提交审核'
            })
            .then(() => {
              this.$router.replace({ name: 'my', query: { tab: '1' } })
            })
        } else {
          this.$toast(response.message)
        }
      })
    }
  }
}
</script>

<style lang="scss"></style>
