<template>
  <div class="content px-6 mt-4 mb-16">
    <template v-if="lists.length">
      <router-link
        v-for="item in communityList"
        :key="item.id"
        class="inline-block mb-3 text-white"
        :to="{ path: tab === 1 ? '/Mine/MyCommunity' : '/Mine/AttendCommunity', query: {}}">
        <card-two></card-two>
      </router-link>
      <div
        v-for="item in projectList"
        :key="item.id"
        class="inline-block mb-3 text-white"
        @click.stop="goProject">
        <card :showEdit="needEdit"></card>
      </div>
    </template>
    <template v-else>
      <div class="no-content flex flex-col items-center justify-center border border-app-blue-2 border-solid rounded-lg">
        <img class="w-32 mb-2" src="@/assets/none.png" alt="">
        <p class="text-sm text-white mb-2">抱歉！你暂无参与的投票项目！</p>
        <p class="text-sm yellow-1">赶紧去参与吧！</p>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Card from '@/components/Card.vue'
import CardTwo from '@/components/Card_two.vue'
export default Vue.extend({
  components: {
    Card,
    CardTwo
  },
  data() {
    return {
      needEdit: false,
      lists: [] as any[],
      communityList: [{id: 1}, {id: 2}, {id: 3}],
      projectList: [{id: 11}, {id: 12}],
    }
  },
  props: {
    tab: {
      type: Number
    }
  },
  methods: {
    goProject() {
      if (this.tab === 1) {
        this.$router.push({path: '/Mine/MyProject'})
      } else {
        this.$router.push({path: '/Mine/AttendProject'})
      }
    }
  },
  watch: {
    tab(n) {
      if (n === 1) {
        this.needEdit = true
        this.lists = [...this.communityList, ...this.projectList]
      } else {
        this.needEdit = false
        this.lists = [...this.communityList, ...this.projectList]
      }
    },
    $route() {
      // ...code
    }
  },
  created() {
    this.lists = [...this.communityList, ...this.projectList]
    this.needEdit = true
  }
})
</script>

<style scoped>
  .no-content, .content {
    height: calc(100vh - 190px);
  }
  .content {
    overflow-x: hidden;
  }
  .yellow-1 {
    color: #FFBB00;
  }
</style>