<template>
  <view @click="toPageShow()"
    :class="`todo_done_card ${props?.item?.type === 'WorkOrder' && props?.item?.model?.status === 'Pending' ? `card_status_${getTimeStatus(props?.item?.model?.expect_end_time)?.status}` : ''}`">
    <view class="todo_done_card_header">
      <view class="group_type_btn">
        <view class="type_btn">
          <hs-enum-tag :value="props?.item?.type" :Enums="CompanyEmployeeBacklogsTypeEnum" />
        </view>
        <view class="type_btn" v-if="props?.item?.model?.type">
          <hs-enum-tag :value="props?.item?.model?.type" :Enums="HouseWorkOrdersTypeEnum" />
        </view>
        <hs-level v-if="props?.item?.model?.level" :level="props?.item?.model?.level" />
      </view>
      <view :class="`btn_status status_${props?.item?.status}`">
        <hs-enum-tag :value="props?.item?.status" :Enums="HouseWorkOrdersStatusEnum" />
      </view>
    </view>

    <view class="todo_done_card_houses_title" v-if="props?.item?.model?.location === 'MyHome'">
      {{ props?.item?.model?.asset_house?.full_name }}
      <!-- <view class="item"> {{ i?.model?.title }} </view> -->
    </view>
    <view class="todo_done_card_content">
      {{ props?.item?.model?.content }}
    </view>
    <view :class="`todo_done_card_footer status_${getTimeStatus(props?.item?.model?.expect_end_time)?.status}`" v-if="
      props?.item?.type === 'WorkOrder' &&
      props?.item?.model?.status === 'Pending' &&
      props?.item?.model?.location === 'MyHome'
    ">
      <up-icon name="clock" :color="getTimeStatus(props?.item?.model?.expect_end_time)?.color || '#000'"
        size="14"></up-icon>
      <text>
        {{ getTimeStatus(props?.item?.model?.expect_end_time)?.label }}
      </text>
    </view>
    <view class="expected_time">提报时间：{{ props?.item?.created_at }}</view>
  </view>
</template>

<script setup lang="ts">
import { getTimeStatus } from '@/common/libraries/day'
import {
  CompanyEmployeeBacklogsTypeEnum,
  HouseWorkOrdersStatusEnum,
  HouseWorkOrdersTypeEnum
} from '@/gen/Enums'
const props = defineProps(['item'])
const toPageShow = () => {
  uni.navigateTo({
    url: `/WORKORDER/show/index?id=${props?.item?.model_id}`
  })
}
</script>

<style lang="scss" scoped>
.todo_done_card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 0 30rpx 30rpx 30rpx;
  margin-top: 30rpx;

  .todo_done_card_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0 25rpx 0;

    .group_type_btn {
      display: flex;
      align-items: center;
    }

    .type_btn {
      border-radius: 100rpx;
      border: 1px solid #eee;
      color: #3d3d3d;
      font-size: 24rpx;
      padding: 8rpx 20rpx;
      margin-right: 16rpx;
    }
  }

  .todo_done_card_houses_title {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 500;
    padding: 10rpx 0;

    .item {
      height: 30rpx;
      line-height: 30rpx;

      &:last-child {
        padding-left: 20rpx;
        margin-left: 20rpx;
        border-left: 1rpx solid #eee;
      }
    }
  }

  .todo_done_card_content {
    color: #444;
    font-size: 28rpx;
    padding: 5rpx 0 25rpx 0;
    border-bottom: 1rpx solid #eee;
  }

  .todo_done_card_footer {
    color: #666666;
    font-size: 28rpx;
    padding: 12rpx 20rpx;
    border-radius: 10rpx;
    color: #24bc21;
    background: linear-gradient(90deg, #edffed 0%, rgba(232, 255, 231, 0) 103%);
    display: flex;
    align-items: center;
    margin: 25rpx 0 0 0;
  }

  .status_1 {
    color: #24bc21;
    background: linear-gradient(90deg, #edffed 0%, rgba(232, 255, 231, 0) 103%);
  }

  .status_2 {
    color: #0082fa;
    background: linear-gradient(90deg, #eff7ff 0%, rgba(231, 241, 255, 0) 103%);
  }

  .status_3 {
    color: #f97316;
    background: linear-gradient(90deg, #fff4ef 0%, rgba(255, 237, 231, 0) 103%);
  }

  .status_4 {
    color: #ea0000;
    background: linear-gradient(90deg, #ffe5e5 0%, rgba(255, 255, 255, 0) 103%);
  }

  .expected_time {
    padding: 20rpx 0 0 0;
    color: #333;
    font-size: 25rpx;
  }
}

.card_status_4 {
  border-top: 6px solid #ef4444;
}
</style>
