<template>
  <view>
    <view class="header">
      <hs-tabs :list="tablist" :current="useModel?.currentTabs?.value" @onChange="method?.handleChangeTabs" />
    </view>
    <view class="work_contents">
      <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.handleLoad">
        <view v-for="(i, index) in useModel?.listData?.value" :key="`items_${index}`" class="work_item">
          <!-- :class="`work_item ${i?.status !== 'Completed' && i?.status !== 'Closed' ? `card_status_${getTimeStatus(i?.expect_end_time)?.status}` : ''}`" -->

          <view @click="method?.handleToDetail(i)">
            <view class="work_item_header">
              <view class="group_btn">
                <view class="btn_type">
                  <hs-enum-tag :value="i?.type" :Enums="HouseWorkOrdersTypeEnum" />
                </view>
                <view v-if="i?.location" class="btn_type">
                  <hs-enum-tag :value="i?.location" :Enums="HouseWorkOrdersLocationEnum" />
                </view>
                <template v-if="i?.type === 'Repair' || i?.type === 'Incident' || i?.type === 'Complaint'">
                  <hs-level v-if="i?.status === 'Processing'" :level="i?.level" />
                </template>
              </view>

              <view :class="`btn_status status_${i?.status}`">
                <hs-enum-tag :value="i?.status" :Enums="HouseWorkOrdersStatusEnum" />
              </view>
            </view>
            <view class="full_name">
              {{ i?.asset_house?.full_name || i?.asset_project?.name }}
            </view>
            <view class="work_item_cell">
              {{ i?.content }}
            </view>
            <template v-if="i?.status === 'Processing'">
              <view class="work_item_time_footer" v-if="
                i?.status !== 'Completed' && i?.status !== 'Closed' && i?.location === 'MyHome'
              ">
                <view :class="`todo_done_card_footer status_${getTimeStatus(i?.expect_end_time)?.status}`">
                  <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>
            </template>
            <view class="work_item_cell" v-if="i?.status === 'Completed' && i?.accept_time">
              工单完成时间：{{ i?.accept_time }}
            </view>
            <view class="work_item_cell" v-if="i?.evaluation_score">
              客户评价：<hs-up-rate :valueModel="i?.evaluation_score" />
            </view>
          </view>
          <view class="work_item_btn_group_footer" v-if="i?.type === 'SecurityInspection'"
            @click="method?.handleUpdateSetp(i)">
            <view class="btn"> 前往完成 </view>
          </view>
          <template v-else>
            <view class="work_item_btn_group_footer" v-if="i?.status !== 'Completed' && i?.status !== 'Closed'">
              <view @click="method?.handleCopyPhone(i)"
                v-if="i?.type !== 'RenovationInspection' && i?.type !== 'RenovationAcceptance'" class="btn">
                联系提报人
              </view>
              <view @click="method?.handleUpdateSetp(i)" v-if="i?.status === 'Processing'" class="btn">
                更新进度
              </view>
              <view @click="method?.handlePendingPaymentQrCode(i)" v-if="i?.status === 'PendingPayment'" class="btn">
                出示付款二维码
              </view>
            </view>
          </template>
        </view>
      </cc-scroll-loading>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getTimeStatus } from '@/common/libraries/day'
import {
  HouseWorkOrdersLocationEnum,
  HouseWorkOrdersStatusEnum,
  HouseWorkOrdersTypeEnum
} from '@/gen/Enums'
import { onShow } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
const tablist = [
  { label: '处理中', value: 'Processing' },
  { label: '待支付', value: 'PendingPayment' },
  { label: '待验收', value: 'PendingAcceptance' },
  { label: '已完成', value: 'Completed' },
  { label: '已关闭', value: 'Closed' }
]
onShow(() => {
  useModel.formData.value.page = 1
  useModel.listData.value = []
  method?.getList()
})
</script>
<style lang="scss">
@import './style.scss';
</style>
