<template>
  <div class="flex flex-col attend-form px-4 mb-20" v-show="attendShow">
    <div class="px-4 py-5 border-2 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-gray-600 x-input" placeholder="请输入社区名称" v-model="communityName" />
      </div>
      <p class="text-sm mb-2.5">社区简介</p>
      <div>
        <Input type="textarea" class="w-full h-40 rounded-lg px-3 pt-2 text-gray-600 x-input x-area" placeholder="这里写社区描述简介（500字以内）" v-model="intro" />
      </div>
    </div>
    <button class="mt-5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="submit">提交</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Input } from 'ant-design-vue'
export default Vue.extend({
  name: 'AttendForm',
  components: {
    Input
  },
  props: {
    attendShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      communityName: '',
      intro: ''
    }
  },
  methods: {
    submit() {
      if (!this.communityName || !this.intro) {
        // 
        console.log(1)
      } else {
        //
        this.communityName = ''
        this.intro = ''
        this.$emit('submitForm', false)
      }
    }
  }
})
</script>

<style scoped>
  input, button, textarea {
    outline: none;
  }
  .x-input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 500;
    color: rgba(36, 36, 37, 0.4);
    box-shadow: 0px 3px 4px 0px #BCB3DC inset;
  }
  .x-area {
    padding-top: 12px;
    height: 160px;
  }
</style>