<template>
  <div class="card flex items-center">
    <div class="action flex-shrink-0 mr-2.5 flex items-start">
      <div class="relative">
        <div class="relative z-50 mr-1.5">
          <!-- checkbox -->
          <div
            v-if="checkBox"
            @click="handleCheck"
          >
            <div
              v-show="!checked"
              class="w-4 h-4 border border-schedule-timeline rounded-full"
            />
            <div v-show="checked" class="">
              <app-icon
                icon-name="radio-checked"
                class-name="w-4 h-4"
              />
            </div>
          </div>
          <!-- 状态切换 -->
          <div v-else>
            <app-icon
              icon-name="radio-checked"
              class-name="w-4 h-4"
            />
          </div>
        </div>
        <div class="absolute h-4 w-4 top-0 left-0 rounded-full bg-common-bg z-10" />
      </div>
      <div class="text-text-secondary font-light">
        <div class="text-xs">{{ time }}</div>
        <div class="text-xxs">{{ space }}</div>
      </div>
    </div>
    <div class="bg-white rounded-lg px-3 py-2 flex-1 overflow-hidden" @click="handleClick">
      <!-- 会议标题 -->
      <div class="content flex justify-between over">
        <div class="overflow-hidden">
          <div class="">{{ schedule.title }}</div>
          <div class="text-xs font-light truncate">{{ schedule.content }}</div>
        </div>
        <app-icon
          icon-name="avator"
          class-name="w-9 h-9 flex-shrink-0 ml-2"
        />
      </div>
      <!-- 其他信息 -->
      <div class="text-xxs text-text-secondary font-light mt-2 flex items-center justify-between pr-3.5">
        <div class="flex items-center">
          <app-icon
            icon-name="location-small"
            class-name="w-2 mr-1.5"
          />
          <div>{{ schedule.location }}</div>
        </div>
        <div class="flex items-center">
          <app-icon
            icon-name="user"
            class-name="h-2.5 w-2.5 mr-4"
          />
          <div class="member flex items-center">
            <div class="icons flex">
              <div
                v-for="num of schedule.member > 3 ? 3 : schedule.member"
                :key="num"
                class="-ml-1.5 first:ml-none"
              >
                <app-icon
                  icon-name="avator-small"
                  class-name="w-4.5 h-4.5"
                />
              </div>
            </div>
            <div class="bg-text-extreme-light rounded px-1 ml-1">+{{ schedule.member }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'ScheduleCard',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    schedule: {
      type: Object,
      default() {
        return {}
      }
    },
    checkBox: {
      type: Boolean,
      default: true
    },
    checked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      time: '8:00am',
      space: '45min'
    }
  },
  methods: {
    handleCheck() {
      this.$emit('check', this.schedule)
    },
    handleClick() {
      this.$emit('click', this.schedule)
    }
  }
})
</script>
