<template>
  <!-- 选择地点 -->
  <main-page
    left-arrow
    main-bg="bg-white"
    header-bg="bg-white"
    @click-left="$router.go(-1)"
  >
    <app-icon
      slot="right"
      icon-name="search-blue"
      class-name="w-7 h-7 flex items-center "
      @click="$router.push('/okr/o-search')"
    />
    <!-- 内容 -->
    <div class="pt-14 pb-16">
      <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-50' : 'text-text-secondary'"
          @click="clickTab(tab)"
        >
          {{ tab.label }}
        </div>
      </div>
      <div v-show="showLeader">
        <leader-card />
        <leader-card />
      </div>
      <div v-show="showObject">
        <object-card :task-list="list" />

      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'OObjective',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'leader-card': () => import('@/views/okr/components/leader-card.vue'),
    'object-card': () => import('@/views/okr/components/object-card.vue')
  },
  data() {
    return {
      tabs: [
        {
          label: '负责人',
          key: 'leader'
        },
        {
          label: '目标',
          key: 'objective'
        }
      ],
      list: [
        { id: 1, type: 'urgent', typeName: '紧急', thing: '按优先级排列，同级按首字母排列' },
        { id: 2, type: 'important', typeName: '重要', thing: 'b增强公司内部管理制度2' },
        { id: 1, type: 'urgent', typeName: '紧急', thing: 'a增强公司内部管理制度1' },
        { id: 3, type: 'common', typeName: '一般', thing: 'd增强公司内部管理制度3' },
        { id: 2, type: 'important', typeName: '重要', thing: 'g增强公司内部管理制度2' },
        { id: 3, type: 'common', typeName: '一般', thing: 'c增强公司内部管理制度3' }
      ],
      currentKey: 'leader',
      showLeader: true,
      showObject: false
    }
  },
  computed: {

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

  }
})
</script>

<style lang="less" scoped>

</style>
