<template>
  <view class="work_page">
    <view
      :class="`show_card ${useModel?.dataShow?.value?.status === 'Pending' ? `card_status_${getTimeStatus(useModel?.dataShow?.value?.expect_end_time)?.status}` : ''}`">
      <view class="card_header_type_status">
        <view class="group_type_btn">
          <view class="btn_type">
            <hs-enum-tag :value="useModel?.dataShow?.value?.type" :Enums="HouseWorkOrdersTypeEnum" />
          </view>
          <view v-if="useModel?.dataShow?.value?.location" class="btn_type">
            <hs-enum-tag :value="useModel?.dataShow?.value?.location" :Enums="HouseWorkOrdersLocationEnum" />
          </view>
          <template v-if="
            useModel?.dataShow?.value?.type === 'Repair' ||
            useModel?.dataShow?.value?.type === 'Incident' ||
            useModel?.dataShow?.value?.type === 'Complaint'
          ">
            <hs-level v-if="useModel?.dataShow?.value?.status == 'Processing'"
              :level="useModel?.dataShow?.value?.level" />
          </template>
        </view>

        <view :class="`btn_status status_${useModel?.dataShow?.value?.status}`">
          <hs-enum-tag :value="useModel?.dataShow?.value?.status" :Enums="HouseWorkOrdersStatusEnum" />
        </view>
      </view>
      <view :class="`time_status status_${getTimeStatus(useModel?.dataShow?.value?.expect_end_time)?.status}`" v-if="
        useModel?.dataShow?.value?.status === 'Pending' &&
        useModel?.dataShow?.value?.location === 'MyHome'
      "><up-icon name="clock" :color="getTimeStatus(useModel?.dataShow?.value?.expect_end_time)?.color || '#000'"
          size="14"></up-icon>
        <text>
          {{ getTimeStatus(useModel?.dataShow?.value?.expect_end_time)?.label }}
        </text>
      </view>

      <view class="card_header_huse_info" v-if="
        useModel?.dataShow?.value?.type === 'Repair' ||
        useModel?.dataShow?.value?.type === 'Incident'
      ">
        <text>
          {{
            useModel?.dataShow?.value?.asset_house?.full_name ||
            useModel?.dataShow?.value?.asset_project?.name
          }}
        </text>
        <text> {{ useModel?.dataShow?.value?.title }} </text>
      </view>
      <view class="card_header_content_info">
        {{ useModel?.dataShow?.value?.content }}
      </view>
      <view class="card_header_imgs">
        <view v-for="(k, idx) in useModel?.dataShow?.value?.attachments" :key="`img_${idx}`" class="item"
          @click="method?.handlePreviewImage(idx)">
          <image :src="k?.url" mode="aspectFill" />
        </view>
      </view>

      <view class="show_card_footer">
        <view class="work_item_cell">
          工单编号 <text>{{ useModel?.dataShow?.value?.code }}</text>
        </view>
        <view class="work_item_cell" v-if="
          useModel?.dataShow?.value?.type !== 'RenovationInspection' &&
          useModel?.dataShow?.value?.type !== 'RenovationAcceptance'
        ">
          提报人
          <text>{{
            useModel?.dataShow?.value?.customer?.name ||
            useModel?.dataShow?.value?.company_employee?.name
          }}</text>
        </view>
        <view class="work_item_cell" v-if="useModel?.dataShow?.value?.reporter_name">
          客户信息
          <text>
            {{ useModel?.dataShow?.value?.reporter_name }}
            {{ useModel?.dataShow?.value?.reporter_phone }}
          </text>
        </view>
        <view class="work_item_cell">
          工单创建时间 <text>{{ useModel?.dataShow?.value?.created_at }}</text>
        </view>
        <view class="work_item_cell work_amount_cell" v-if="
          useModel?.dataShow?.value?.status === 'PendingPayment' &&
          useModel?.dataShow?.value?.amount
        ">
          支付金额 <text>{{ useModel?.dataShow?.value?.amount }}元</text>
        </view>
        <view class="work_item_cell" v-if="useModel?.dataShow?.value?.evaluation_score">
          客户评价：<hs-up-rate :valueModel="useModel?.dataShow?.value?.evaluation_score" />
        </view>
      </view>
    </view>

    <MyProcessLogs />
    <hs-footer v-if="
      useModel?.dataShow?.value?.type === 'SecurityInspection' &&
      useModel?.dataShow?.value?.status === 'Processing'
    " btnParimaryName="前往完成" @handleParmaryClick="method?.toPageAddLogs" />
    <template v-else>
      <hs-footer :btnOtherShow="useModel?.dataShow?.value?.type !== 'RenovationInspection' &&
        useModel?.dataShow?.value?.type !== 'RenovationAcceptance'
        " v-if="
          useModel?.dataShow?.value?.status === 'Processing' ||
          useModel?.dataShow?.value?.status === 'PendingPayment'
        " :btnParimaryName="useModel?.dataShow?.value?.status === 'Processing'
          ? '更新进度'
          : useModel?.dataShow?.value?.status === 'PendingPayment'
            ? '出示付款二维码'
            : ''
          " btnOtherName="联系提报人" @handleParmaryClick="method?.toPageAddLogs"
        @handleOtherClick="method?.handleCopyPhone" />
    </template>
  </view>
</template>
<script setup lang="ts">
import { getTimeStatus } from '@/common/libraries/day'
import {
  HouseWorkOrdersLocationEnum,
  HouseWorkOrdersStatusEnum,
  HouseWorkOrdersTypeEnum
} from '@/gen/Enums'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import MyProcessLogs from './components/ProcessLogs.vue'
import method from './method'
import useModel from './model'
onLoad(e => {
  useModel.dataShow.value = {}
  method?.getShow(e?.id)
  method?.getHouseWorkLogs(e?.id)
})
onShow(() => {
  if (useModel?.dataShow?.value?.id) {
    method?.getShow(useModel?.dataShow?.value?.id)
    method?.getHouseWorkLogs(useModel?.dataShow?.value?.id)
  }
})
onUnload(() => {
  useModel.logsData.value = []
})
</script>
<style lang="scss">
@import './style.scss';
</style>
