<template>
  <div class="community-card">
    <p class="text-2xl mb-2">社区名称</p>
    <div class="mb-5 flex items-center justify-between" @click="goBrowser">
      <p class="text-xs text-white opacity-80 mb-0">ID:1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0</p>
      <span class="inline-block w-5 h-5 bg-app-blue-3 rounded-2xl flex items-center justify-center">
        <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
      </span>
    </div>
    <p v-if="showIntro" class="text-sm text-white opacity-60 mb-2">社区简介</p>
    <p v-if="showIntro" class="text-xs leading-5 relative mb-0" @click="goDetails">
      这里是简短介绍，50字以内，详细点连接查看，这里是项目文字介绍，这里是项目文字介绍
      <span class="inline-block absolute right-1 bottom-0.5">
        <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
      </span>
    </p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({
  components: {
    AppIcon
  },
  props: {
    community: {
      type: Object
    },
    showIntro: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    goDetails() {
      // 跳转判断，有详情跳转，没有不做动作
      this.$router.push({ path: '/Home/Details', query: { id: this.community.id }})
    },
    goBrowser() {
      // if (true) return
      this.$router.push({ path: '/Browser/Index', query: {}})
    }
  }
})
</script>