<template>
  <div class="content px-6 mt-4 mb-16 overflow-x-hidden">
    <template v-if="lists.length">
      <div
        v-for="(item, index) in lists"
        :key="index"
        class="w-full inline-block text-white mb-2"
        >
        <template v-if="tab < 3">
          <template>
            <div @click.stop="goPage(item, 1)">
              <card :cardContent="item" :showEdit="needEdit" :blockTime="blockTime" :blockHeight="blockHeight" @closeCommunity="closeCommunity"></card>
            </div>
          </template>
        </template>
        <template v-else-if="tab === 3">
          <div class="w-full inline-block text-white" @click="goPage({ type: 2, ID: item.voteId }, 2, item)">
            <card-two
              :cardContent="item"
              :showRank="false"
              :showClose="true"
              :status="item.voteStatus"
              :isClose="item.isClose"
              @closeOption="closeOption(item.id, item.voteId)"></card-two>
          </div>
        </template>
        <template v-else>
          <div class="w-full inline-block text-white" @click="goPage({ type: 2, ID: item.voteId }, 2, item)">
            <card-two :cardContent="item" :showRank="false" :status="item.voteStatus" :isClose="item.isClose"></card-two>
          </div>
        </template>
      </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">抱歉！你暂无{{ (tab === 1 || tab === 3) ? '发起' : '参与' }}的投票{{ (tab === 1 || tab === 2) ? '项目' : '社区' }}！</p>
        <p v-if="tab === 2" class="text-sm text-yellow-400">赶紧去参与吧！</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'
import { service } from '@/service/index'
import { Dialog } from 'vant'
export default Vue.extend({
  components: {
    Card,
    CardTwo
  },
  data() {
    return {
      needEdit: false,
      lists: [] as any[],
      blockHeight: '',
      blockTime: 0,
      voteId: ''
    }
  },
  props: {
    tab: {
      type: Number
    }
  },
  methods: {
    getBlockHeight() {
      service.getHeight().then(res => {
        this.blockHeight = res.data.result.mainHeight
        this.blockTime = +res.data.result.mainBlockTime
      })
    },
    goPage(item: any, n: number, i?: any) {
      if (n === 1) {
        this.goProject(item)
      } else {
        this.goCommunity(item, i)
      }
    },
    goCommunity(item: any, i: any) {
      if (this.tab === 3) {
        this.$router.push({path: '/Mine/MyCommunity', query: {voteID: item.ID, optionId: i.id}})
      } else {
        this.$router.push({path: '/Mine/AttendCommunity', query: {voteID: item.ID, optionId: i.id}})
      }
    },
    goProject(item: any) {
      if (this.tab === 1) {
        this.$router.push({path: '/Mine/MyProject', query: {voteID: item.ID, optionId: '' }})
      } else {
        this.$router.push({path: '/Mine/AttendProject', query: {voteID: item.ID, optionId: '' }})
      }
    },
    closeOption(v: string, o: string) {
      Dialog.confirm({
        title: '提示',
        message: '确认删除当前活动报名？',
      }).then(() => {
        // on confirm
        service.delOption({
          id: o,
          optId: v
        }).then(() => {
          this.updateTab()
        })
      }).catch(() => {
        // on cancel
      });
    },
    closeCommunity(id: string) {
      Dialog.confirm({
        title: '提示',
        message: '确认关闭当前活动？',
      }).then(() => {
        service.memberCloseVote({
          voteId: id
        }).then(res => {
          console.log(res)
        })
      })
    },
    // 统一 description 
    setDesc() {
      for (const item of this.lists) {
        if (item.type === 2) {
          item.voteOptions.forEach((item: any) => {
            item.description = item.desc
          })
        }
      }
    },
    filterSetList() {
      this.lists.forEach(item => {
        if (item.type === 2) {
          this.voteId = item.ID
          item.voteOptions = item.voteOptions.filter((items: { creator: string }) => items.creator === this.$store.state.app.address)
        }
      })
    },
    // 发起
    getSetList(fn?: any) {
      service.voteList({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetRankVoteList',
        payload: {
          addr: this.$store.state.app.address,
          count: -1,
          direction: 0,
          height: 0,
          index: 0
        }
      }).then(res => {
        this.lists = res.data.result && res.data.result.list || []
        this.setDesc()
        this.filterSetList()
        if (fn) fn()
      })
    },
    // 参与
    getAttendList() {
      service.getMyList({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetUserVotedList',
        payload: {
          addr: this.$store.state.app.address,
          index: 0,
          count: -1,
          height: 0,
          direction: 0
        }
      }).then(res => {
        this.lists = res.data.result && res.data.result.list || []
        this.lists = this.lists.filter(item => item.type === 1)
        this.setDesc()
      })
    },
    getAttendOption() {
      service.getMyOption({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetUserVotedActivityList',
        payload: {
          // addr: test.addr,
          addr: this.$store.state.app.address,
          index: 0,
          count: -1,
          height: 0,
          direction: 0
        }
      }).then(res => {
        this.lists = res.data.result && res.data.result.optList || []
        this.lists.forEach((item: any) => {
          item.description = item.desc
        })
      })
    },
    getSetOption() {
      service.getMyOption({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetUserSignUpList',
        payload: {
          addr: this.$store.state.app.address,
          index: 0,
          count: -1,
          height: 0,
          direction: 0
        }
      }).then(res => {
        this.lists = res.data.result && res.data.result.optList || []
        this.lists.forEach((item: any) => {
          item.description = item.desc
        })
      })
    },
    updateTab() {
      console.log(this.tab)
      if (this.tab === 1) {
        this.needEdit = true
        this.lists = []
        this.getSetList()
      } else if (this.tab === 2) {
        this.needEdit = false
        this.lists = []
        this.getAttendList()
      } else if (this.tab === 3) {
        this.lists = []
        this.getSetOption()
      } else {
        this.lists = []
        this.getAttendOption()
      }
    },
  },
  activated() {
    this.updateTab()
  },
  watch: {
  },
  created() {
    this.getBlockHeight()
    this.updateTab()
  }
})
</script>

<style scoped>
  .no-content, .content {
    height: calc(100vh - 210px);
  }
  .content {
    overflow-x: hidden;
  }
</style>