<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: '请上传组织头像'
        }
      ]
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    }
  },
  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.updateGroup(this.pid, data).then(response => {
        if (response.success) {
          this.$dialog
            .alert({
              confirmButtonText: '确定',
              message: '提交成功'
            })
            .then(() => {
              this.$router.replace({ name: 'my' })
            })
        } else {
          this.$toast(response.message)
        }
      })
    },
    getDetail() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      api
        .getGroup(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>
