<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: [
        {
          name: 'activity_name',
          label: '主题',
          required: true,
          placeholder: '请输入活动主题',
          rules: [{ required: true, message: '请输入活动主题' }]
        },
        {
          fieldType: 'uploader',
          name: 'activity_image',
          label: '封面',
          required: true,
          placeholder: '请上传活动封面'
        },
        {
          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: '请输入活动具体地址' }]
        },
        {
          fieldType: 'select',
          name: 'org_id',
          label: '审核渠道',
          required: true,
          placeholder: '请选择审核本活动的上级组织',
          rules: [{ required: true, message: '请选择审核本活动的上级组织' }],
          labelKey: 'org_name',
          valueKey: 'id',
          remote: { method: api.getJoinedGroupes }
        },
        {
          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)
      }
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    }
  },
  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)
        }
      })
    },
    getDetail() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      api
        .getActivity(this.pid)
        .then(response => {
          this.formModel = response
          // 城市设置
          // if (['1', '3'].includes(response.org_type)) {
          //   this.formModel.area = `${response.org_province}-${response.org_city}`
          // }
          toast.clear()
        })
        .catch(toast.clear)
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

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