<template>
  <div class=" w-full 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=" text-base text-text-primary">{{detail.name}}</span>
        <br>
        <span class=" text-sm text-text-secondary">{{detail.request}}</span>
        <!-- 操作或状态 -->
        <div v-if="detail.current === 'pending'">
          <img src="@/assets/icons/confirm.png" 
               class=" w-9 inline-block absolute top-4 right-3"
               @click="toConfirm">
          <img src="@/assets/icons/deny.png" 
               class="w-9 inline-block absolute top-4 right-16"
               @click="toDeny">
        </div>
        <div v-else-if="detail.current === 'confirm'">
          <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.current === 'deny'">
          <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>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { Info } from '@/DTO/request'

export default Vue.extend({
  name:'request',
  props:{
    detail:{
      type: Object as PropType<Info>
    },
  },
  data(){
    return{
      state:''
    }
  },
  methods: {
    toConfirm(){
      this.$emit('change','confirm')
    },
    toDeny(){
      this.$emit('change','deny')
    }
  }
});
</script>

<style>

</style>