<template>
  <div class="">
    <div
      v-for="(item, index) in meetings"
      :key="index"
      class="w-full relative pt-4">
      <schedule-card
        :schedule="item"
        :check-box="checkBox"
        :checked="checkedList.indexOf(item.id) > -1"
        @check="handleCheck"
        @click="handleClick"
      />
      <div class="absolute w-px left-2 bg-schedule-timeline" :class="getLineClass(index)" />
    </div>
  </div>
</template>
<script lang="ts">
import Vue, { PropType} from 'vue'

interface Schedule {
  id: number,
  title: string,
  content: string,
  location: string,
  member: number
}

const meetings: Array<Schedule> = [
  {
    id: 11,
    title: '部门例会',
    content: '讨论“上链查”的实际应用模块',
    location: '峨眉山会议室',
    member: 3
  },
  {
    id: 22,
    title: '部门例会',
    content: '讨论“上链查”的实际应用模块',
    location: '峨眉山会议室',
    member: 3
  },
  {
    id: 33,
    title: '部门例会',
    content: '讨论“上链查”的实际应用模块',
    location: '峨眉山会议室',
    member: 3
  }
]

export default Vue.extend({
  name: 'ScheduleLine',
  props: {
    scheduleList: {
      type: Array as PropType<Array<Schedule>>,
      default() {
        return []
      }
    },
    checkBox: {
      type: Boolean,
      default: false
    },
    checkedList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    'app-icon': () => import('@/components/common/Icon.vue'),
    'schedule-card': () => import('./schedule-card.vue')
  },
  data() {
    // const checkList: number[] = []
    return {
      meetings
      // checkList
    }
  },
  methods: {
    getLineClass(index: number) {
      if (this.meetings.length < 2) {
        return ''
      }
      if (index === 0) {
        return 'h-1/2 left-2 bottom-0'
      }
      if (index === this.meetings.length - 1) {
        return 'h-1/2 left-2 top-0'
      }
      return 'h-full left-2 top-0'
    },
    handleCheck(schedule: Schedule) {
      const list: Array<number> = JSON.parse(JSON.stringify(this.checkedList))
      const index = list.findIndex(id => id === schedule.id)
      if (index < 0) {
        list.push(schedule.id)
      } else {
        list.splice(index, 1)
      }
      this.$emit('update:checkedList', list)
    },
    handleClick(schedule: Schedule) {
      this.$emit('click-schedule', schedule)
    }
  }
})
</script>
