<template>
  <view class="todo_done_container">
    <view class="todo_done_container_head_tab">
      <view
        v-for="(i, index) in tabList"
        :key="`tab_${index}`"
        :class="`items ${useModel?.formData?.value?.status === i?.value ? 'active' : ''}`"
        @click="handleTabChange(i)"
      >
        {{ i?.label }}
      </view>
    </view>
    <view class="todo_done_content">
      <view
        v-for="(i, index) in useModel?.listData?.value"
        :key="`items_${index}`"
        @click="toPageShow(i)"
        :class="`todo_done_card ${i?.status === 'Pending' ? `card_status_${getTimeStatus(i?.expect_end_time)?.status}` : ''}`"
      >
        <view class="todo_done_card_header">
          <view class="group_type_btn">
            <view class="type_btn">
              <hs-enum-tag :value="i?.type" :Enums="HouseWorkOrdersTypeEnum" />
            </view>
            <hs-level :level="i?.level" />
          </view>
          <view :class="`btn_status status_${i?.status}`">
            <hs-enum-tag :value="i?.status" :Enums="HouseWorkOrdersStatusEnum" />
          </view>
        </view>

        <view class="todo_done_card_houses_title">
          {{ i?.asset_house?.full_name }}
        </view>
        <view class="todo_done_card_content">
          {{ i?.content }}
        </view>

        <view class="todo_done_card_attachments">
          <view v-for="(k, idx) in i?.attachments" :key="`img_${idx}`" class="item">
            <image :src="k?.url" mode="aspectFill" />
          </view>
        </view>

        <view
          :class="`todo_done_card_footer status_${getTimeStatus(i?.expect_end_time)?.status}`"
          v-if="i?.status === 'Pending'"
        >
          <up-icon
            name="clock"
            :color="getTimeStatus(i?.expect_end_time)?.color || '#000'"
            size="14"
          ></up-icon>
          <text>
            {{ getTimeStatus(i?.expect_end_time)?.label }}
          </text>
        </view>
        <view class="expected_time">提报时间：{{ i?.created_at }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  CompanyEmployeeBacklogsTypeEnum,
  HouseWorkOrdersTypeEnum,
  HouseWorkOrdersLevelEnum,
  HouseWorkOrdersStatusEnum
} from '@/gen/Enums'
import useModel from '../model'
import { getTimeStatus } from '@/common/libraries/day'
import method from '../method'
let tabList = [
  { label: '全部', value: undefined },
  { label: '待处理', value: 'Pending' },
  { label: '处理中', value: 'Processing' },
  { label: '已完成', value: 'Completed' }
]
const toPageShow = (e: { id: string }) => {
  uni.navigateTo({
    url: `/WORKORDER/show/index?id=${e?.id}`
  })
}

const handleTabChange = (e: { value: string | undefined }) => {
  useModel.formData.value.status = e?.value
  useModel.listData.value = []
  method?.loadMore(1)
}
</script>

<style lang="scss" scoped>
.todo_done_container {
  padding: 30rpx 30rpx 0 30rpx;
  .todo_done_container_head_tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .items {
      color: #c3c3c3;
      border: 1px solid #c3c3c3;
      border-radius: 100rpx;
      font-size: 24rpx;
      color: #666;
      height: 54rpx;
      line-height: 54rpx;
      width: 140rpx;
      text-align: center;
    }
    .active {
      color: #0082fa;
      border: 1px solid #0082fa;
    }
  }
  .todo_done_card {
    background-color: #f9fafb;
    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;
      }
      .btn_status {
        border-radius: 100rpx;
        font-size: 28rpx;
        padding: 7rpx 19rpx;
      }
      .status_Pending {
        color: #f97316;
        background-color: #fff7ed;
      }
      .status_Processing {
        color: #0082fa;
        background-color: #edf4ff;
      }
      .status_Completed {
        color: #22c55e;
        background-color: #f0fdf4;
      }
      .status_Closed {
        color: #909399;
        background-color: #f3f3f4;
      }
    }
    .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 0 0;
    }
    &_attachments {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #eee;
      .item {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        background-color: #f8f8f8;
        margin-top: 25rpx;
        margin-right: 25rpx;
        &:nth-child(4n) {
          margin-right: 0;
        }
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .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: 28rpx;
    }
  }

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