<template>
  <!-- 协同日程 -->
  <main-page
    left-arrow
    :title="title"
    @click-left="$router.go(-1)"
  >
    <div
      v-if="!isMember"
      slot="right"
      class="h-6 w-6 flex items-center justify-end"
      @click="show = true"
    >
      <app-icon
        icon-name="dot-h"
        class-name="h-1 w-5"
      />
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <div class="pt-14 pb-4">
      <calendar
        :selected-days="selectedDays"
        :range-days="rangeDays"
        :select.sync="select"
      />
      <div class="px-4 mt-6 pb-16">
        <div v-if="!isMember" class="tab flex relative">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            class="transition-all duration-200 flex-1 py-1.5 text-center"
            :class="currentKey === tab.key ? 'text-white rounded-full bg-color-primary' : ''"
            @click="clickTab(tab)"
          >
            {{ tab.label }}
          </div>
        </div>
        <schedule-line
          class="mt-4"
          :check-box="showCheckBox"
          :checked-list.sync="checkedSchdules"
          @click-schedule="clickSchedule"
        />
        <!-- 查看成员日程时不显示操作栏 -->
        <div v-if="!isMember" class="fixed bottom-0 left-0 w-full flex items-center justify-center">
          <!-- 默认展示，添加日程操作 -->
          <div v-show="!showCheckBox">
              <app-icon
                icon-name="add-btn"
                class-name="h-18 w-18"
              />
            </div>
          <!-- 管理日程显示 -->
          <div v-show="showCheckBox" class="w-full bg-common-bg">
            <!-- 我的日程 -->
            <div
              v-show="currentKey === 'mine'"
              class="flex w-full text-center"
            >
              <div class="flex-1 py-1.5">归档</div>
              <div class="flex-1 py-1.5">删除</div>
              <div class="flex-1 py-1.5" @click="complete">完成</div>
            </div>
            <!-- 企业日程 -->
            <div
              v-show="currentKey === 'company'"
              class="flex w-full text-center"
            >
              <div class="flex-1 py-1.5">申请</div>
              <div class="flex-1 py-1.5" @click="complete">完成</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from "vue"
import { ActionSheet } from 'vant'

Vue.use(ActionSheet)

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

export default Vue.extend({
  name: "Schedule",
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'schedule-card': () => import('./components/schedule-card.vue'),
    'schedule-line': () => import('./components/schedule-line.vue'),
    'calendar': () => import('./components/calendar.vue')
  },
  data() {
    const checkedSchdules: number[] = []
    return {
      checkedSchdules,
      selectedDays: [new Date('2021-08-17'), new Date('2021-08-14'), new Date('2021-08-25')],
      rangeDays: [[new Date('2021-08-20'), new Date('2021-08-24')], [new Date('2021-08-31'), new Date('2021-09-01')]],
      select: null,
      tabs: [
        {
          label: '我的日程',
          key: 'mine'
        },
        {
          label: '企业日程',
          key: 'company'
        }
      ],
      currentKey: 'mine',
      show: false,
      actions: [
        {
          name: '分享我的日程',
          action: 'share'
        },
        {
          name: '管理我的日程',
          action: 'manage'
        },
        {
          name: '查看其他成员日程',
          action: 'check'
        }
      ],
      title: '',
      isMember: false,
      showCheckBox: false,
    }
  },
  created() {
    const query = this.$route.query.member
    if (typeof query !== 'undefined') {
      this.isMember = true
      const member = JSON.parse(query as string)
      this.title = member.name
    }
  },
  methods: {
    clickTab(tab: {label: string, key: string}) {
      this.currentKey = tab.key
      this.checkedSchdules = []
    },
    onSelect(action: {name: string, action: string}) {
      this.show = false
      switch(action.action) {
        case 'check':
          this.$router.push('/schedule/team')
          break
        case 'manage':
          this.showCheckBox = true
      }
    },
    complete() {
      this.checkedSchdules = []
      this.showCheckBox = false
    },
    clickSchedule(schedule: Schedule) {
      this.$router.push(`/schedule/schedule-detail/${schedule.id}`)
    }
  }
})
</script>

<style lang="scss" scoped>
</style>