<template>
  <view class="container" :style="{
    alignItems: chain_list.length === 0 ? 'center' : undefined
  }">
    <view class="empty" v-if="chain_list.length === 0">
      <image :src="emptySrc" class="empty-image"> </image>
      <text class="empty-text">没有数据哦</text>
    </view>
    <cu-timeline v-else :dataList='chain_list' gap='50px' :showLeft="false" :showInit="false">
      <template #dot="{ item }">
        <view class="dot" :class="item.status === 1 ? 'warning' : item.status === 2 ? 'success' : 'normal'"></view>
      </template>
      <template #right="{ item }">
        <view class="content">
          <view :class="cur_work_id === item.id ? 'selectContent' : ''">
            <view class="title">{{ item.name }}</view>
            <view class="desc" v-if="item.desc">
              <rich-text :nodes="parseHTML(item.desc)"></rich-text>
            </view>
            <view class="time" v-if="item.process_type === 1">
              <view>
                <text>{{ item.handler_name }}</text>
                <uni-tag :text="curStatus(item.status!)?.label" :inverted="true"
                  :custom-style='"margin-left: 10rpx;padding:2px 4px;font-size:10px;font-weight:bolder;border: 1px solid transparent;background:" + tagColor(curStatus(item.status!)!.color).bg + ";color:" + tagColor(curStatus(item.status!)!.color).color'>
                </uni-tag>
              </view>
              <view>{{ item.started_at }} ~ {{ item.completed_at }}</view>
            </view>
          </view>
        </view>
      </template>
    </cu-timeline>
  </view>
</template>

<script lang="ts" setup>
import { getWorkChain } from '@/api/project-center/work';
import { WorkChain } from '@/types/work';
import CuTimeline from '@/components/cu-timeline/index.vue'
import { parseHTML, tagColor } from '@/utils'

const chain_list = ref<WorkChain[]>([])
const cur_work_id = ref()
const emptySrc = ref('data:image/png;base64,[encoded data, 7048 characters]')
const getList = async (work_id: string) => {
  const { list } = await getWorkChain({ work_id })
  chain_list.value = list
}


const statusList: {
  label: string
  value: number
  color: string
  subLable?: string
}[] = [
    {
      label: '未完成',
      subLable: '未阅',
      value: 0,
      color: 'gray'
    },
    {
      label: '已过期',
      value: 1,
      color: 'gray'
    },
    {
      label: '已完成',
      subLable: '已阅',
      value: 2,
      color: 'green'
    }
  ]

const curStatus = (status: number) => {
  return statusList?.find(item => item.value === status)
}

onLoad((options) => {
  cur_work_id.value = options?.id;
  getList(options?.id)
})
</script>

<style scoped>
.container {
  min-height: calc(100vh - 88rpx);
  background: #fff;
  margin: 5px;
  padding: 35px 5px 5px 5px;
  display: flex;
  justify-content: center;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.empty-image {
  width: 240rpx;
  height: 240rpx;
}

.empty-text {
  font-size: 28rpx;
  margin-top: 10rpx;
  padding: 0rpx 20rpx;
  color: #aaaaaa;
}


.dot {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8px;
  height: 8px;
  /* background: var(--color); */
  border-radius: 50%;
}


.selectContent {
  padding: 20rpx 30rpx;
  background: #e8f3ff;
}

.selectContent::before {
  position: absolute;
  display: inline-block;
  border-top: 10px solid transparent;
  border-right: 10px solid #e8f3ff;
  border-bottom: 10px solid transparent;
  left: -10px;
  top: 10px;
  content: '';
}

.content {
  position: relative;
  margin-top: -26rpx;
  min-height: 50rpx;
  border-radius: 10rpx;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

.title {
  font-weight: 600;
  font-size: 28rpx;
}

.desc {
  margin-top: 20rpx;
  font-size: 24rpx;
}

.time {
  margin-top: 20rpx;
  color: #86909c;
  line-height: 1.667;
  font-size: 24rpx;
}

.normal {
  background: #cdcfd2e8;
}

.warning {
  background: #f0ad4e;
}

.success {
  background: #4cd964;
}
</style>