<template>
  <!-- 选择地点 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <app-icon
      slot="right"
      icon-name="edit"
      class-name="w-4 h-4 flex items-center "
      @click="$router.push('/okr/o-objective')"
    />
    <!-- 内容 -->
    <div class="pt-14 pb-16 px-4">
      <div class="flex justify-center w-full mb-6">
        <div
          v-for="tab in tabs"
          :key="tab.key"
          class="w-32 h-9 flex items-center justify-center"
          :class="currentKey === tab.key ? 'text-color-primary rounded-full bg-blue-100' : 'text-text-secondary'"
          @click="clickTab(tab)"
        >
          {{ tab.label }}
        </div>
      </div>
      <div v-show="showLeader">
        <!-- 列表 -->
        <div class="mt-9">
          <div class="bg-white px-2.5 py-4 rounded relative">
            <app-icon
              icon-name="avator"
              class-name="w-9 h-9 absolute top-2 right-2"
            />
            <!-- 标题 -->
            <div class="flex items-center">
              <div class="text-sm color-tag text-emergency border border-emergency rounded-full py-px px-2.5 mr-2.5">紧急</div>
              <div class="flex-1 pr-9 truncate">{{ task.name }}</div>
            </div>
            <!-- 时间信息 -->
            <div class="flex mt-1.5">
              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5">开始时间：{{ task.startTime }}</div>
              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5 ml-4">截至时间：{{ task.endTime }}</div>
            </div>
            <!-- 统计 -->
            <c-progress :task-list="task.list" />
          </div>
        </div>
        <!-- 列表 -->
        <div class="mt-9">
          <div class="bg-white px-2.5 py-4 rounded relative">
            <app-icon
              icon-name="avator"
              class-name="w-9 h-9 absolute top-2 right-2"
            />
            <!-- 标题 -->
            <div class="flex items-center">
              <div class="text-sm text-tag-yellow border border-tag-yellow rounded-full py-px px-2.5 mr-2.5">重要</div>
              <div class="flex-1 pr-9 truncate">{{ task.name }}</div>
            </div>
            <!-- 时间信息 -->
            <div class="flex mt-1.5">
              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5">开始时间：{{ task.startTime }}</div>
              <div class="text-xs bg-text-extreme-light text-text-secondary rounded-sm py-0.5 px-1.5 ml-4">截至时间：{{ task.endTime }}</div>
            </div>
            <!-- 统计 -->
            <c-progress :task-list="task.list" />
          </div>
        </div>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'ORelation',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-progress': () => import('@/views/okr/components/progress.vue')
  },
  data() {
    return {
      tabs: [
        {
          label: '同级',
          key: 'same'
        },
        {
          label: '上级',
          key: 'superior'
        },
        {
          label: '下级',
          key: 'subordinate'
        }
      ],
      currentKey: 'same',
      showLeader: true,
      task: {
        name: '增强公司内部管理制度',
        tag: 'emergency',
        startTime: '04月01日',
        endTime: '04月14日',
        list: [
          {
            type: 'completed',
            typeName: '已完成',
            num: 2
          },
          {
            typeName: '进行中',
            type: 'inProgress',
            num: 2
          },
          {
            type: 'notStart',
            typeName: '未开始',
            num: 1
          },
          {
            type: 'shelved',
            typeName: '搁置中',
            num: 1
          }
        ]
      }
    }
  },
  computed: {

  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    clickTab(tab: {label: string, key: string}) {
      this.currentKey = tab.key
      // if(tab.key==='superior'){
      //   this.showLeader=true
      //    this.showObject=false
      // }else if(tab.key==='subordinate'){
      //   this.showLeader=false
      //   this.showObject=true
      // }
    }

  }
})
</script>

<style lang="less" scoped>

</style>
