<template>
  <div class="attend-form px-4 pb-20" v-show="attendShow">
    <div class="px-4 py-5 border border-app-blue-3 border-solid rounded-lg">
      <p class="text-sm mb-2.5">社区名称</p>
      <div>
        <input class="w-full h-10 rounded-lg mb-5 px-3 text-sm text-gray-600 x-input" placeholder="请输入社区名称" maxlength="10" v-model="communityName" />
      </div>
      <p class="text-sm mb-2.5">社区简介</p>
      <div>
        <textarea class="w-full rounded-lg px-3 pt-2 text-sm text-gray-600 x-input x-area" placeholder="这里写社区描述简介（500字以内）" maxlength="500" v-model="intro"></textarea>
      </div>
    </div>
    <div class="mt-5 flex justify-between">
      <button class="w-2/5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="cancel">取消</button>
      <button class="w-2/5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="submit">确认报名</button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Toast } from 'vant'
import { service } from '@/service/index'
export default Vue.extend({
  name: 'AttendForm',
  props: {
    attendShow: {
      type: Boolean,
      default: false
    },
    voteId: {
      type: String
    }
  },
  data() {
    return {
      communityName: '',
      intro: ''
    }
  },
  methods: {
    submit() {
      if (!this.communityName || !this.intro) {
        Toast('请先填写表单信息')
      } else {
        this.$store.commit('app/SET_TEXT', '报名的社区')
        service.attendVote({
          voteId: this.voteId as string,
          name: this.communityName,
          desc: this.intro
        }, () => {
          this.communityName = ''
          this.intro = ''
          this.$emit('submitForm', true)
          this.$store.commit('app/SET_TEXT1', '社区')
          // this.$router.push('/Home')
        })
        // .then(res => {
        //   console.log(res)
          
        //   this.communityName = ''
        //   this.intro = ''
        //   this.$emit('submitForm', true)
        // })
      }
    },
    cancel() {
      this.$emit('submitForm', false)
    }
  }
})
</script>

<style scoped>

</style>

