<template>
  <view class="todo_done_card">
    <view class="todo_done_card_title">
      任务提醒
      <view :class="`btn_status status_${props?.item?.status}`">
        <hs-enum-tag :value="props?.item?.status" :Enums="HouseWorkOrdersStatusEnum" />
      </view>
    </view>
    <view class="moment_task_content">
      <view class="moment_task_cell">
        任务内容：<hs-enum-tag
          :value="props?.item?.data?.content_type"
          :Enums="CustomerMomentsContentTypeEnum"
        />
      </view>
      <view class="moment_task_cell">
        执行方式：<hs-enum-tag
          :value="props?.item?.data?.channel"
          :Enums="CustomerMomentsChannelEnum"
        />
      </view>
      <view class="moment_task_cell"> 任务截止：{{ props?.item?.data?.task_end_time }} </view>
    </view>

    <view class="expected_time">
      创建时间：{{ props?.item?.created_at }}
      <view class="btn_group">
        <hs-button type="primary" size="sm" label="去完成" @click="handleSend" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {
  CustomerMomentsContentTypeEnum,
  CustomerMomentsChannelEnum,
  HouseWorkOrdersStatusEnum
} from '@/gen/Enums'
const props = defineProps(['item'])
const handleSend = () => {
  uni.navigateTo({
    url: `/ME/push_show/index?id=${props?.item?.id}&data_id=${props?.item?.data?.id}&model_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;
  &_title {
    color: #333333;
    font-size: 28rpx;
    font-weight: 600;
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
  }
  .moment_task_content {
    font-size: 28rpx;
    color: #333;
    border-bottom: 1rpx solid #eee;
    padding-top: 10rpx;
  }
  .moment_task_cell {
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
  }
  .expected_time {
    padding: 20rpx 0 0 0;
    color: #333;
    font-size: 25rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn_group {
      width: 200rpx;
    }
  }
}
.popup_content {
  min-height: 500rpx;
  .popup_title {
    line-height: 100rpx;
    text-align: center;
  }
  .popup_body {
    padding: 30rpx 0;
    &_header {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
    }
    .avatar {
      width: 100rpx;
      height: 100rpx;
      background-color: #f8f8f8;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 12rpx;
      }
    }
    .employee_info {
      flex: 1;
      padding-left: 20rpx;
      color: #3d3d3d;
      font-size: 28rpx;
      .name {
      }
      .des {
        padding-top: 10rpx;
      }
    }
    .image_content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 10rpx 0 30rpx 0;
      image {
        width: 160rpx;
        height: 160rpx;
        margin-left: 30rpx;
        margin-top: 30rpx;
      }
    }
    .Link_content {
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      padding: 20rpx;
      margin: 40rpx 30rpx 30rpx 30rpx;
      .cover {
        width: 100rpx;
        height: 100rpx;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
      .content {
        flex: 1;
        padding: 0 30rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
    .video_content {
      padding: 50rpx 0 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .popup_footer {
    padding: 0 30rpx 40rpx 30rpx;
  }
}
</style>
