<template>
  <div class="attendance">
    <main-page
      left-arrow
      @click-left="handleClickLeft"
      class=" relative"
    > 
      <!-- 侧边栏 -->
      <div class="left-border w-0.5 bg-border-lighter h-full left-6 absolute"/>
      <!-- 顶部员工信息 -->
      <div class=" mx-4 bg-bg-deep rounded-md py-5 px-7 text-white relative mt-12">
          <p class="top align-baseline">
            <span class="name text-xl mr-4">{{name}}</span> <span class="number text-sm">员工编号{{memberid}}</span>
          </p>
          <p class="team-name text-base mt-3">{{teamname}}</p>
      </div>    
      <!-- 考勤状态 -->
      <p  :class="{normal:(current=='正常')}"
          class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
         今日考勤{{current}}
      </p>
      <!-- 打卡 -->
      <div :last="last">
        <!-- 上班打卡 -->
        <div v-if="list.length==0"> 
          <punch @attendance="record(arguments)" :last='true' @alert="toAlert">上班打卡</punch>
        </div>
        <!-- 打卡记录 -->
        <div v-else>
          <div v-for="(punch,index) in list" :key="index" >
            <punch :punch="punch" @editNote="editNote"/>
          </div>
          <!-- 下班打卡 -->
          <punch @attendance="record(arguments)" :last='true' @alert="toAlert(true,true)">下班打卡</punch>
        </div>
      </div>
      <p class=" text-sm text-gray-400 pt-8 text-center pb-36">查看更多打卡记录请前往work.33.cn</p>
      <!-- 打卡弹窗 -->
      <van-dialog title="提示" show-cancel-button confirm-button-text="确认打卡" cancel-button-text="不打卡" 
                  v-model="showPunch" @confirm="confirm(checkin)">
        <div>
          <p><span class=" mr-2 text-gray-400">打卡时间:</span><span>{{time}}</span></p>
          <div class="flex"><span class=" mr-2 text-gray-400">打卡地点:</span><span class=" w-48">{{location}}</span></div>
        </div>
      </van-dialog>
      <!-- 编辑备注弹窗 -->
      <van-dialog v-model="show"  title="编辑备注" confirm-button-text="提交" :before-close="onBeforeClose" >
        <p class=" text-right text-gray-400 text-sm">{{value.length}}/{{min}}-{{max}}</p>
        <div class=" relative">
          <textarea type="text" v-model="value" 
                    class=" w-72 h-56 bg-gray-100 mx-auto mt-1 pl-2 pt-2 block box-border text-base text-text-primary"
                    @click="showhint=false" @input="handleInput">
          </textarea>
          <!-- placeholder内容 -->
          <div class="hint absolute top-2 left-2 pointer-events-none text-gray-400 text-base" v-show="showhint">
            <p>请填写</p>
            <p>1.工作计划/完成情况</p>
            <p>2.对接人及周期</p>
            <p>3.遇到的问题</p>
          </div>
        </div>
    </van-dialog>
    </main-page>  
  </div>
</template>


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

export default Vue.extend({
  name:'attendance',
  components:{
    'main-page': () => import('@/layout/main-page.vue'),
    'punch': () => import('@/views/attendance/components/punch.vue'),
  },
  props:{
    punch:{
      type:Object as PropType<Punch>
    },
    last:{
      type:Boolean,
      default:false
    },
    min:{
      type:Number,
      default:20
    },
    max:{
      type:Number,
      default:500
    },
    showNote:{
      type:Boolean,
      default:false
    }
  },
  data(){
    let list:Array<Punch>=[]
    list = punchList
    let current:string = state
    return{
      list,
      name:'姓名',
      memberid:43,
      teamname:'杭州复杂美科技有限公司',
      showPunch:false,
      time:'',
      location:'',
      checkin:true,
      current,
      showhint:true,
      value:'',
      close:false,
      show:false
    }
  },
  methods:{
    handleClickLeft() {
      console.log('click left')    
    },
    record(msg:Array<string>){
      this.time = msg[1]
      this.location = msg[2]
    },
    toAlert(isShow:boolean,change?:boolean){ 
      this.showPunch = isShow 
      if(change){
        this.checkin = false
      }
    },
    editNote(isShow:boolean){
      this.show = isShow
    },
    confirm(checkin:boolean){
      let type:string=''
      if(checkin == true){
        type='上班'
      }else{
        type='下班'
      } 
      Toast({
        message:type+'打卡成功',
        position:'bottom'
      })
    },
    handleInput(e:InputEvent) {
      this.showhint = false
      let size = (e.target as HTMLInputElement).value.length
      if (this.max > 0 && size >= this.max) {
        this.value = this.value.slice(0,this.max)
      } else if( size >= this.min) {
        this.close = true
      } 
      else if( size == 0){
        this.showhint = true
      } 
    },
    onBeforeClose(action:string,done:Function){
      if(action==='confirm'){
        console.log('close',this.close);
        if(this.close){
          this.value = ''
          this.close = false
          return done()
        }else{
          return done(false)
        }
      }
    }
  }
});
</script>

<style>
.normal{
  background-color:#E8F3FF;
  color:#32B2F7;
}
</style>