<template>
  <card title="创建新组织" style="margin:0 20px;">
    <v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
      <input
        type="button"
        value="确认创建，提交审核"
        class="submit-button"
        @click="handleSubmit"
      />
    </v-form>
  </card>
</template>

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

export default {
  name: 'CreateGroup',
  components: { Card, VForm },
  data() {
    return {
      formModel: {},
      fields: [
        {
          fieldType: 'select',
          name: 'org_type',
          label: '类型',
          required: true,
          placeholder: '请选择您要创建的组织类型',
          rules: [{ required: true, message: '请选择您要创建的组织类型' }],
          values: [
            { name: '1', text: '地方校友会' },
            { name: '2', text: '行业研究会' },
            { name: '3', text: '俱乐部' }
          ],
          valueKey: 'name'
        },
        {
          name: 'org_name',
          label: '名称',
          required: true,
          placeholder: '请输入组织名称',
          maxlength: '15',
          rules: [{ required: true, message: '请输入组织名称' }],
          isShow(data) {
            return ['2', '3'].includes(data.org_type)
          }
        },
        {
          fieldType: 'area',
          name: 'area',
          label: '城市',
          required: true,
          placeholder: '选择组织所在城市',
          rules: [{ required: true, message: '选择组织所在城市' }],
          isShow(data) {
            return ['1', '3'].includes(data.org_type)
          }
        },
        {
          name: 'industry',
          label: '行业',
          required: true,
          placeholder: '请输入组织所在行业',
          maxlength: '15',
          rules: [{ required: true, message: '请输入组织所在行业' }],
          isShow(data) {
            return data.org_type === '2'
          }
        },
        {
          name: 'purpose',
          label: '宗旨',
          required: true,
          placeholder: '请简述您的创建组织的宗旨',
          maxlength: '20',
          rules: [{ required: true, message: '请简述您的创建组织的宗旨' }]
        },
        {
          type: 'textarea',
          name: 'goal',
          label: '目的',
          required: true,
          placeholder: '请输入组织目的',
          maxlength: '50',
          showWordLimit: true,
          autosize: { maxHeight: 100, minHeight: 80 },
          rules: [{ required: true, message: '请输入组织目的' }]
        },
        {
          name: 'initiator',
          label: '发起人',
          required: true,
          placeholder: '请输入组织发起人',
          maxlength: '15',
          rules: [{ required: true, message: '请输入组织发起人' }]
        },
        {
          type: 'textarea',
          name: 'rules',
          label: '组织章程',
          required: true,
          placeholder: '请输入组织章程',
          maxlength: '3000',
          showWordLimit: true,
          autosize: { maxHeight: 300, minHeight: 120 },
          rules: [{ required: true, message: '请输入组织章程' }]
        },
        {
          type: 'textarea',
          name: 'plan',
          label: '活动计划',
          required: true,
          placeholder: '请简述您所创建组织的活动计划',
          maxlength: '1000',
          showWordLimit: true,
          autosize: { maxHeight: 300, minHeight: 120 },
          rules: [{ required: true, message: '请简述您所创建组织的活动计划' }]
        },
        {
          fieldType: 'uploader',
          name: 'logo',
          label: '头像',
          required: true,
          placeholder: '请上传组织头像'
        }
      ]
    }
  },
  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
      data.org_type = ruleForm.org_type
      // 头像
      if (data.logo) {
        const [first = { url: '' }] = data.logo
        data.logo = first.url
      }
      // 城市
      if (data.area) {
        const [province, city] = data.area.split('-')
        data.org_province = province
        data.org_city = city
      }
      if (data.org_type === '1') {
        data.org_name = `${data.org_city}校友会`
      }
      api.addGroup(data).then(response => {
        if (response.success) {
          this.$dialog
            .alert({
              confirmButtonText: '确定',
              message: '组织创建成功，已提交审核'
            })
            .then(() => {
              this.$router.replace({ name: 'my' })
            })
        } else {
          this.$toast(response.message)
        }
      })
    }
  }
}
</script>

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