<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: '尺寸：16:9或750*422',
          rules: [{ required: true, message: '请上传活动封面' }]
        },
        {
          name: 'activity_name',
          label: '活动名称',
          required: true,
          placeholder: '请输入活动名称',
          maxlength: 15,
          rules: [{ required: true, message: '请输入活动名称' }]
        },
        {
          fieldType: 'select',
          name: 'activity_demand_type',
          label: '活动类型',
          required: true,
          placeholder: '请选择活动类型',
          rules: [{ required: true, message: '请选择活动类型' }],
          values: [
            { text: '公益行', value: '1' },
            { text: '去游学', value: '2' },
            { text: '直播课', value: '3' },
            // { text: '找工作', value: '4' },
            { text: '运动家', value: '5' },
            { text: '其他', value: '9' }
          ]
        },
        {
          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)
            }
          }
        },
        {
          name: 'activity_city',
          label: '城市',
          required: true,
          placeholder: '请输入活动城市',
          maxlength: 15,
          rules: [{ required: true, message: '请输入活动城市' }]
        },
        {
          name: 'activity_address',
          label: '地点',
          required: true,
          placeholder: '请输入活动地点',
          maxlength: 15,
          rules: [{ required: true, message: '请输入活动地点' }]
        },
        {
          fieldType: 'datetime',
          name: 'activity_time',
          label: '时间',
          required: true,
          placeholder: '请选择活动时间',
          rules: [{ required: true, message: '请选择活动时间' }]
        },
        {
          type: 'digit',
          name: 'participator_limit',
          label: '人数上限',
          required: true,
          placeholder: '请输入活动人数',
          rules: [{ required: true, message: '请输入活动人数' }]
        },
        {
          fieldType: 'select',
          name: 'visibility',
          label: '对谁可见',
          required: true,
          placeholder: '请选择本活动对谁可见',
          rules: [{ required: true, message: '请选择本活动对谁可见' }],
          values: [
            { text: '所有人可见', value: '1' },
            { text: '所在组织可见', value: '2' }
            // { text: '审核组织可见', value: '3' }
          ]
        },
        {
          type: 'textarea',
          name: 'activity_contents',
          label: '简介',
          required: true,
          placeholder: '请简单描述一下该活动',
          autosize: { maxHeight: 120, minHeight: 120 },
          maxlength: 500,
          showWordLimit: true,
          rules: [{ required: true, message: '请简单描述一下该活动' }]
        }
      ],
      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.activity_demand_type = ruleForm.activity_demand_type
      data.org_id = ruleForm.org_id
      data.visibility = ruleForm.visibility
      api.addActivity(data).then(response => {
        const { success, message } = response
        if (success) {
          this.$dialog
            .alert({
              confirmButtonText: '确定',
              message: '活动创建成功，已提交审核'
            })
            .then(() => {
              this.$router.replace({ name: 'my', query: { tab: '1' } })
            })
        } else {
          this.$toast(typeof message === 'object' ? JSON.stringify(message) : message)
        }
      })
    }
  }
}
</script>

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