<template>
  <div class=" relative mt-4">
    <!-- 左侧圆形 -->
    <div  :class="{outside:(!isLocal&&punch!=null),lastNode:last}" 
          class=" w-4 h-4 bg-color-primary rounded-full absolute top-11 left-4.5"></div>
    <!-- 右侧信息 -->
    <div  :class="{notLocal:(!isLocal&&punch!=null)}" 
          class=" ml-12 mr-4 bg-white rounded-md pl-3 pb-6">
      <!-- 打卡日期 -->
      <p  class="date text-gray-500 text-sm pt-4"><span>{{date}}</span><span class=" ml-1" v-if="last">再次打卡将覆盖上一条记录</span></p>
      <!-- 打卡 -->
      <div  v-if="punch == null"
            class="round w-40 mx-auto relative mt-2"
            @click="check">
        <img src="../../../assets/oval.png" alt="" srcset="">
        <div class=" absolute top-14 left-0 right-0 mx-auto text-center text-white">
          <p class=" text-xl tracking-wide"><slot></slot></p>
          <p class=" text-base tracking-wider">{{time}}</p>
        </div>
      </div>
      <p v-else class=" my-1.5 flex items-start">
        <span class="text-base text-text-primary mr-3">打卡时间{{punch.time}}</span>
        <span v-if="punch.isLocal ==false" class=" text-yellow-500 border border-yellow-500 rounded tracking-wider text-sm">异地</span>
      </p>
      <div class="text-sm">
        <!-- 定位信息 -->
        <div class="flex" :class="{center:last}" >
          <img src="../../../assets/icons/location.png" alt="" class="w-4 h-5 mr-1 inline-block">
          <p class="text-gray-500 mt-1">{{location}}</p>
        </div>
        <div class=" pt-1 ml-5">
          <!-- 异地备注 -->
          <div  v-if="punch != null && punch.isLocal ==false"
              class=" pt-1">
            <p class=" text-gray-400">备注：{{punch.note}}</p>
            <div class=" mt-3 text-color-primary">
              <span class="pr-5 py-2" @click="edit">编辑备注</span>
              <span class="px-5 py-2" @click="cancel">撤回申请</span>
            </div>  
          </div>
        </div>
      </div>

      <!-- 刷新定位 -->
      <p  v-if="punch == null" class=" text-color-primary text-sm bg-white px-5 py-2 text-center" @click="reload" >刷新定位</p>
    </div>
  </div>
</template>

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

export default Vue.extend({
  name:'punch',
  props:{
    punch:{
      type:Object as PropType<Punch>
    },
    last:{
      type:Boolean,
      default:false
    }
  },
  data(){
    let isLocal,location,date,time
    if(this.punch!=null){
      isLocal = this.punch.isLocal
      location = this.punch.location
      date = this.punch.date
      time = this.punch.time
    }else{
      location ='这里是当前定位可手动刷新'
    }
    return{
      date,
      time,
      timer:0,
      isLocal,
      location
    }
  },
  methods:{
    getTime(){
      var _this = this;
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth()+1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds()
      this.date = yy+ '-'+ mm+ '-'+ dd
      this.time = hh+ ':'+ mf+ ':'+ ss
    },
    currentTime(){
      // this.timer = setInterval(this.getTime,1000)
    },
    check(){
      let isShow = true
      this.$emit('attendance',this.date,this.time,this.location)
      this.$emit('alert',isShow)
      console.log('submit');
    },
    reload(){
      console.log('刷新定位');
    },
    edit(){
      let isShow = true
      this.$emit('editNote',isShow)
    },
    cancel(){
      console.log("撤回申请"); 
    }
  },
  mounted(){
    this.getTime()
    // this.currentTime()   
  },
  beforeDestroy(){
    if(this.timer){
      clearInterval(this.timer)
    }
  }
})

</script>

<style lang="less">
  .notLocal{
    background-color: #FFFBF8F3;
    box-shadow: #DFDEDD 0 0 12px;
  }
  .outside{
    background-color:#E99D1A;
    border: none;
  }
  .lastNode{
   background-color:rgb(250, 250, 250);
   border: 2px solid #32B2F7 ;
  }
  .center{
    justify-content: center;
  }
</style>