<template>
  <div class="community-card">
    <p class="text-2xl mb-2">{{ community.name }}</p>
    <div class="mb-5 flex items-center justify-between" @click="goBrowser">
      <p class="text-xs text-white opacity-80 mb-0 break-all">ID:{{ community.id || community.ID }}</p>
      <span class="inline-block w-5 h-5 bg-app-blue-3 rounded-2xl flex items-center justify-center flex-shrink-0">
        <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">{{ type === 'community' ? '社区' : '项目' }}简介</p>
    <p v-if="showIntro" class="text-xs leading-5 relative mb-0 break-all" @click="goDetails">
      {{ community.description && community.description.length > 50 ? community.description.slice(0, 50) + '...' : community.description }}
      
      <span v-show="community.description && community.description.length > 0" class="inline-block absolute right-1 bottom-0.5">
        <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
      </span>
    </p>
    <span v-if="community.url && community.url.length" class="block text-white text-xs opacity-60 flex items-center justify-between mt-2">
      <div class="hide">项目链接: {{ community.url }}</div>
      <div
        v-clipboard:copy="community.url"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
        class="inline-block flex-shrink-0 ml-2">
        <app-icon customize size="16px" color="#FFBB00" type='icon-fuzhi'></app-icon>
      </div>
    </span>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
export default Vue.extend({
  components: {
    AppIcon
  },
  props: {
    community: {
      type: Object
    },
    showIntro: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'community'
    },
    optionId: {
      type: String
    },
    voteId: {
      type: String
    }
  },
  methods: {
    goDetails() {
      // 跳转判断，有详情跳转，没有不做动作
      if (this.community.description.length > 50) {
        this.$router.push({ path: '/Home/Details', query: { optionId: this.optionId, voteID: this.voteId }})
      }
    },
    goBrowser() {
      // if (true) return
      this.$router.push({ path: '/Browser/Index', query: { ...this.$route.query }}) 
      // this.$emit('goBrowser')
    },
    onCopy() {
      this.$toast('复制成功')
    },
    onError() {
      this.$toast('复制失败')
    },
  }
})
</script>

<style scoped>
  .hide {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
</style>