<template>
  <div>
    <Poptip
      transfer
      trigger="hover"
      v-if="isSameMonth(date, calendarMonth) && Object.keys(crtDayObj).length > 1"
      width="250"
    >
      <div :class="classes" @click="selectDate">
        <p>
          
          {{ ~~data.day.split('-')[2] }}
          
        </p>
        <p>{{ dayObj.event}}</p>
      </div>

      <div slot="title">
        <strong style="font-size: 18px;">{{poptipTitle}}</strong>
      </div>
      <div slot="content">
        <!-- <CellGroup>
          <Cell :extra="crtDayObj.initialEvent" title="原班次信息" />
          <Cell :extra="crtDayObj.initialEventTime" title="原班次时间" />
          <Cell
            :extra="crtDayObj.initialEventHour ? String(crtDayObj.initialEventHour) : ''"
            title="原班次工时"
          />
          <Cell :extra="crtDayObj.currentEvent" title="当前班次信息" />
          <Cell :extra="crtDayObj.currentEventTime" title="当前班次时间" />
          <Cell
            :extra="crtDayObj.currentEventHour ? String(crtDayObj.currentEventHour) : ''"
            title="当前班次工时"
          />
          <Cell :extra="crtDayObj.mealTime" title="用餐时间" v-if="crtDayObj.mealTime" />
          <Cell :extra="crtDayObj.breakTime" title="公休时间" v-if="crtDayObj.breakTime" />
          <Cell :extra="crtDayObj.trainingTime" title="培训时间" v-if="crtDayObj.trainingTime" />
          <Cell
            :extra="item.time"
            :key="index"
            :title="item.name"
            v-for="(item, index) in crtDayObj.states"
          />
          <Cell title="工位信息" >
              <div slot="extra" :title="crtDayObj.seatNo">
                {{crtDayObj.seatNo}}
              </div>
          </Cell>
        </CellGroup> -->
        <CellGroup>
          <Cell title="班次种类" >
              <div slot="extra">
                {{crtDayObj.currentEventType}}
              </div>
          </Cell>
          <Cell title="班次名称" >
              <div slot="extra">
                {{crtDayObj.currentEvent}}
              </div>
          </Cell>
          <Cell title="班次工时" >
              <div slot="extra">
                {{crtDayObj.currentEventHour}}
              </div>
          </Cell>
          <Cell title="开始时间" >
              <div slot="extra">
                {{crtDayObj.currentStartTime}}
              </div>
          </Cell>
          <Cell title="结束时间" >
              <div slot="extra">
                {{crtDayObj.currentEndTime}}
              </div>
          </Cell>
          <!-- <Cell :extra="crtDayObj.currentEventType" title="班次种类" />
          <Cell :extra="crtDayObj.currentEvent" title="班次名称" />
          <Cell :extra="crtDayObj.currentEventHour" title="班次工时" />
          <Cell :extra="crtDayObj.currentStartTime" title="开始时间" />
          <Cell :extra="crtDayObj.currentEndTime" title="结束时间" /> -->
          <Cell title="备注">
            <div slot="extra">
              <Poptip trigger="hover" title="备注" :content="String(crtDayObj.currentEventRemarks)">
                {{crtDayObj.currentEventRemarks}}
              </Poptip>
            </div>
          </Cell>
          
          
        </CellGroup>
      </div>

    </Poptip>

    <!-- <div :class="classes" @click="selectDate" v-if="isSameMonth(date, calendarMonth)">
        <p> -->
          <!-- :class="[data.isSelected ? 'is-selected' : '', ...classes]" -->
          <!-- {{ ~~data.day.split('-')[2] }} -->
          <!-- <span style="float: right;">{{ data.isSelected ? '✔️' : ''}}</span> -->
        <!-- </p>
        <p>{{ dayObj.event}}</p>
    </div> -->

    <div :class="classes" @click="selectDate" v-else>
      <p>
        {{ ~~data.day.split('-')[2] }}
        <!-- <span style="float: right;">{{ data.isSelected ? '✔️' : ''}}</span> -->
      </p>
    </div>
  </div>
</template>

<script>
import { parse, endOfMonth, isSameMonth } from 'date-fns'
const cellPrefix = 'calendar-cell'
export default {
  name: 'calendar-day',
  data () {
    return {
      isSameMonth: isSameMonth
    }
  },
  props: {
    // 日历信息
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 当前日期
    date: {
      type: Date
    },
    // 当前日排班信息
    dayObj: {
      type: Object,
      default: function () {
        return {}
      }
    },
    crtDate: {
      type: Date
    },
    // 当前日历选择月份
    calendarMonth: {
      type: Date
    }
  },
  computed: {
    crtDayObj () {     
      return this.dayObj.dayScheduleDetail || { state: [] }
    },
    classes () {
      const obj = this.dayObj
      if (Object.keys(obj).length !== 0) {
        return {
          [`${cellPrefix}`]: true,
          [`${cellPrefix}-rest`]: obj.stateType === 1 || obj.stateType === 2,
          [`${cellPrefix}-other`]:
            !parse(obj.date) ||
            parse(obj.date).getTime() < this.crtDate.getTime() ||
            parse(obj.date) > endOfMonth(this.calendarMonth).getTime()
        }
      }
      return { [`${cellPrefix}`]: true }
    },
    poptipTitle () {
      return `班表明细（${this.data.day
        .split('-')
        .slice(1)
        .join('-')}）`
    }
  },
  // mounted(){
  //   //console.log('123',Object.keys(this.crtDayObj).length);
  //   console.log('123',this.dayObj.dayScheduleDetail);
  // },
  methods: {
    selectDate () {
      this.$emit('on-select-date')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ivu-cell-footer {
  text-align: right;
  width: 50%;
}
/deep/.ivu-cell-footer .ivu-cell-extra {
  display: inline-block;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
