<template>
  <!-- 协同日程 -->
  <main-page
    left-arrow
    :title="title"
    @click-left="$router.go(-1)"
  >
    <div
      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="py-16 px-4">
      <group-cell title="基本信息">
        <c-cell
          title="开始时间"
          content="4月3号 14:30"
          title-class="text-text-secondary text-sm"
        />
        <c-cell
          title="结束"
          content="4月3号 15:30"
          title-class="text-text-secondary text-sm"
        />
        <c-cell
          title="地点"
          content="第一会议室"
          title-class="text-text-secondary text-sm"
        />
        <c-cell>
          <div
            slot="content"
            class="w-full flex justify-between items-center"
          >
            <div class="text-text-secondary text-sm">负责人</div>
            <app-icon
              icon-name="avator"
              class-name="h-6 w-6"
            />
          </div>
        </c-cell>
        <c-cell @click="$router.push('/schedule/team')">
          <div
            slot="content"
            class="w-full flex justify-between items-center"
          >
            <div class="text-text-secondary text-sm">参与人员</div>
            <div class="flex items-center">
              <div class="avators flex">
                <div
                  v-for="index of 3"
                  :key="index"
                  class="-ml-2 first:-ml-0"
                >
                  <app-icon
                    icon-name="avator-small"
                    class-name="h-6 w-6"
                  />
                </div>
              </div>
              <div class="text-xxs bg-text-extreme-light rounded-sm text-text-secondary ml-2 px-1">+12</div>
              <app-icon
                icon-name="right-arrow"
                class-name="w-1.5 h-2 ml-2"
              />
            </div>
          </div>
        </c-cell>
        <c-cell label="描述">
          <div slot="content" class="text-sm text-text-secondary">非强制参加的公司公开日程</div>
        </c-cell>
      </group-cell>
      <group-cell class="mt-4" title="更多信息">
        <c-cell
          title="属性"
          title-class="text-text-secondary text-sm"
          content="私有"
        />
        <c-cell>
          <div slot="content" class="w-full flex justify-between items-center">
            <div class="title text-sm text-text-secondary">标签</div>
            <c-tag round tag-class="bg-gradient-to-r from-meeting-l to-meeting-r text-white text-sm" label="会议" />
          </div>
        </c-cell>
        <c-cell @click="$router.push('/schedule/file')">
          <div
            slot="content"
            class="w-full flex justify-between items-center"
          >
            <div class="text-text-secondary text-sm">附件</div>
            <div class="flex items-center">
              <div class="text-sm text-text-secondary">2</div>
              <app-icon
                icon-name="right-arrow"
                class-name="w-1.5 h-2 ml-2"
              />
            </div>
          </div>
        </c-cell>
      </group-cell>
      <!-- 评论 -->
      <div
        class="fixed bottom-0 left-0 w-full bg-white px-4 py-2.5 flex items-center justify-between"
        @click="$router.push('/schedule/comment')"
      >
        <div class="flex-1 bg-input-bg rounded-full px-4 py-2 text-xs text-text-secondary">添加评论</div>
        <div class="text-sm ml-4">评论</div>
      </div>
    </div>
  </main-page>
</template>

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

Vue.use(ActionSheet)

export default Vue.extend({
  name: 'ScheduleDetail',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'c-tag': () => import('@/components/common/c-tag.vue')
  },
  data() {
    return {
      show: false,
      actions: [
        {
          name: '分享我的日程',
          action: 'share'
        },
        {
          name: '管理我的日程',
          action: 'manage'
        },
        {
          name: '查看其他成员日程',
          action: 'check'
        }
      ],
      title: ''
    }
  },
  methods: {
    onSelect(action: {name: string, action: string}) {
      this.show = false
    }
  }
})
</script>

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