<template>
  <!-- 搜索 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 pb-4 px-4">
      <!-- 统计 -->
      <div class="flex items-center justify-center mt-10">
        <dashboard
          :percentage="percentage"
          :stroke-width="5"
          :width="88"
        >
          <div
            slot="content"
            class="flex flex-col items-center"
          >
            <div class="text-xxs text-text-secondary mb-1">完成率</div>
            <div class="text-lg">{{ percentage + '%' }}</div>
          </div>
        </dashboard>
        <div class="ml-2">
          <div class="flex items-center">
            <div class="text-xs text-text-secondary mr-6 w-20 text-right">Objectives</div>
            <div class="">3</div>
          </div>
          <div class="flex items-center">
            <div class="text-xs text-text-secondary w-20 mr-6 text-right">Key Results</div>
            <div class="">8</div>
          </div>
        </div>
      </div>
      <!-- 任务状态/数量 -->
      <div class="flex justify-between mt-6">
        <div
          v-for="(task, index) in taskList"
          :key="index"
          class="bg-white flex flex-col items-center justify-center px-3 pb-2.5 pt-1.5 rounded"
        >
          <div :class="taskType(task.type).color">{{ task.num }}</div>
          <div class="text-xs text-text-secondary">{{ taskType(task.type).name }}</div>
        </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 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 ref="progressWrapper" class="mt-4">
            <div class="flex">
              <div
                v-for="(t, i) in task.list"
                :key="i"
                class="text-xs text-text-secondary border-r px-4 first:pl-0 last:border-0"
              >{{ t.typeName }} {{ t.num }}</div>
            </div>
            <div class="progress flex items-center mt-3">
              <div class="flex-1 bg-text-extreme-light rounded-full h-1.5 overflow-hidden">
                <div ref="progress" class="border bg-color-primary">x</div>
              </div>
              <div class="ml-4 text-xs">75%</div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'OkrProgress',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    // 'group-cell': () => import('@/components/common/group-cell.vue'),
    // 'c-cell': () => import('@/components/common/c-cell.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'dashboard': () => import('@/views/okr/components/dashboard.vue'),
    'c-progress': () => import('@/views/okr/components/progress.vue')
  },
  data() {
    return {
      // percentage: 40,
      progressWrapperWidth: 0,
      taskList: [
        {
          type: 'notStart',
          num: 1
        },
        {
          type: 'inProgress',
          num: 2
        },
        {
          type: 'completed',
          num: 3
        },
        {
          type: 'shelved',
          num: 3
        }
      ],
      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: {
    percentage(): number {
      let total = 0
      let completed = 0
      this.taskList.forEach(task => {
        total = total + task.num
        if (task.type === 'completed') {
          completed = task.num
        }
      })
      return parseInt((completed / total * 100).toFixed(0))
    }
  },
  methods: {
    taskType(type: 'notStart' | 'inProgress' |'completed' | 'shelved') {
      const obj = {
        notStart: {
          name: '未开始',
          color: 'text-not-start'
        },
        inProgress: {
          name: '进行中',
          color: 'text-tag-orange'
        },
        completed: {
          name: '已完成',
          color: 'text-tag-green'
        },
        shelved: {
          name: '已搁置',
          color: ''
        }
      }
      return obj[type]
    }
  }
})
</script>

<style lang="less">

</style>
