<template>
  <div class="demo-milestone">
    <tiny-milestone
      :data="milestoneData"
      :milestones-status="statusMap"
      time-field="date"
      name-field="name"
      status-field="progress"
      flag-status-field="progress"
      flag-name-field="title"
      completed-field="completed"
      flag-content-field="describe"
      flag-field="flags"
    ></tiny-milestone>
  </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { TinyMilestone } from '@opentiny/vue'

const statusMap = ref({
  completed: '#1890ff',
  doing: '#86edff',
  back: '#93fda6',
  end: '#faad18',
  cancel: '#f230305A'
})
const milestoneData = ref([
  {
    name: 'POR1', // name-field 设置的键名
    date: '2018-9-7', // time-field 设置的键名
    progress: 'completed', // status-field 设置的键名，completed-field 设置的键值
    // flag-field 设置的键名
    flags: [
      {
        progress: 'completed', // flag-status-field 设置的键名
        title: '第一阶段', // flag-name-field 设置的键名
        describe: 'flag-content-field' // flag-content-field 设置的键名
      }
    ]
  },
  {
    name: 'POR2',
    date: '2018-9-8',
    progress: 'completed',
    flags: [
      {
        progress: 'back',
        title: '第二阶段',
        describe: 'flag-content-field'
      }
    ]
  },
  {
    name: 'POR3',
    date: '2018-9-10',
    progress: 'doing',
    content: null
  },
  {
    name: 'POR4',
    date: '2018-9-9',
    progress: 'cancel',
    flags: [
      {
        progress: 'back',
        describe: 'flag-content-field',
        title: '第四阶段 1'
      },
      {
        progress: 'doing',
        describe: 'flag-content-field',
        title: '第四阶段 2'
      }
    ]
  },
  {
    name: 'POR5',
    date: '2018-9-11',
    progress: 'back',
    flags: [
      {
        progress: 'completed',
        describe: 'flag-content-field',
        title: '第五阶段'
      }
    ]
  }
])
</script>

<style scoped>
.demo-milestone ::v-deep .tiny-milestone__description-status {
  margin-top: 4px;
}
</style>
