<template>
  <div class=" w-full" @click="clickItem">
    <div class="time text-right text-xs text-text-secondary mb-1">{{ formatDate(detail.createTime*1000, 'YYYY-MM-DD') }}</div>
    <div class="flex">
      <!-- 头像 -->
      <div class=" mr-2 mt-5">
        <img src="@/assets/icons/avator.png" alt="" srcset="" class="w-9 ">
      </div>
      <!-- 申请详情 -->
      <div class=" bg-white rounded-xl w-full">
        <!-- 详情上层 -->
        <div class=" relative pt-3 px-3 pb-3">
          <span class="w-4/5 inline-block text-base text-text-primary">{{detail.details.fromName}}</span>
          <br>
          <span class=" text-sm text-text-secondary">
            {{ detail.types === 1 ? 通过扫一扫加入 : ''}}
          </span>
          <!-- 操作或状态 -->
          <div v-if="detail.status === ApplyStatus.PENDING">
            <div class="w-9 inline-block absolute top-4 right-3" @click.stop="toConfirm">
              <img src="@/assets/icons/confirm.png">
            </div>
            <div class="w-9 inline-block absolute top-4 right-16" @click.stop="toDeny">
              <img src="@/assets/icons/deny.png">
            </div>
            
          </div>
          <div v-else-if="detail.status === ApplyStatus.AGREE">
            <p class="absolute top-1/2 transform -translate-y-1/2 right-3 text-color-primary text-sm">已通过</p>
          </div>
          <div v-else-if="detail.status === ApplyStatus.REJECT">
            <p class="absolute top-1/2 transform -translate-y-1/2 right-3 text-color-primary text-sm">已拒绝</p>
          </div>
        </div>
        <!-- 申请理由 -->
        <div v-if="detail.reason !=undefined" class=" py-3 px-3 text-text-secondary text-sm">
          {{detail.reason}}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { Info } from '@/DTO/request'
import { ApplyStatus, ApplyType } from '@/Interface'
import { formatDate } from '@/util/FormatDate'

export default Vue.extend({
  name:'request',
  props:{
    detail:{
      type: Object as PropType<Info>
    },
  },
  data(){
    return{
      state:'',
      ApplyStatus,
      ApplyType
    }
  },
  methods: {
    formatDate,
    clickItem() {
      this.$emit('showDetail', this.detail)
    },
    toConfirm() {
      this.$emit('pass', this.detail)
    },
    toDeny(){
      this.$emit('reject', this.detail)
    }
  }
});
</script>

<style>

</style>