<template>
  <div class="mt-4">
    <div class="flex">
      <div
        v-for="(t, i) in taskList"
        :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 ref="progressWrapper" class="flex-1 flex bg-text-extreme-light rounded-full h-1.5 overflow-hidden">
        <div
          v-for="(t, i) in taskList"
          :key="i"
          class="h-1.5 border-r last:border-none"
          :style="getClass(t)"
        ></div>
      </div>
      <div class="ml-4 text-xs">{{ percentage }}%</div>
    </div>
  </div>
</template>
<script lang="ts">
  import Vue, { PropType } from 'vue'

  interface Task {
    type: 'notStart' | 'inProgress' |'completed' | 'shelved',
    typeName: string,
    num: number
  }

  export default Vue.extend({
    name: 'Progress',
    props: {
      taskList: Array as PropType<Array<Task>>
    },
    data() {
      return {
        progressWrapperWidth: 0
      }
    },
    computed: {
      percentage(): string {
        const task = this.taskList.find(task => task.type === 'completed')
        if (typeof task !== 'undefined') {
          return (task.num / this.totalTaskNum * 100).toFixed(0)
        }
        return '0'
      },
      totalTaskNum() {
        let total = 0
        this.taskList.forEach(task => {
          total = total + task.num
        })
        return total
      }
    },
    mounted() {
      const progressWrapper = this.$refs.progressWrapper as HTMLDivElement
      if (progressWrapper) {
        this.progressWrapperWidth = progressWrapper.getBoundingClientRect().width
      }
    },
    methods: {
      getClass(t: Task) {
        const width = (t.num / this.totalTaskNum * this.progressWrapperWidth).toFixed(2)
        const colorObj = {
          notStart: '#E02020',
          inProgress: '#F7B500',
          completed: '#6DD400',
          shelved: ''
        }
        const obj = {
          width: `${width}px`,
          background: colorObj[t.type]
        }
        console.log(obj, 'obj')
        return {
          width: `${width}px`,
          background: colorObj[t.type]
        }
      }
    }
  })
</script>