<template>
  <view class="show_page">
    <view class="show_header_card">
      <view class="show_header_status">
        <view>
          {{ useModel?.showData?.value?.asset_house?.full_name || '' }}
        </view>
        <view :class="`items_status status_${useModel?.showData?.value?.status}`">
          {{
            RenovationAppliesStatusEnum[
              useModel?.showData?.value?.status as keyof typeof RenovationAppliesStatusEnum
            ]?.text
          }}
        </view>
      </view>
      <view class="show_header_cell_info">
        <hs-card-cell-item title="装修类型">
          {{
            RenovationAppliesTypeEnum[
              useModel?.showData?.value?.type as keyof typeof RenovationAppliesTypeEnum
            ]?.text
          }}
        </hs-card-cell-item>
        <hs-card-cell-item title="办理类型">
          {{
            useModel?.showData?.value
              ? RenovationAppliesProcessTypeEnum[
                  useModel?.showData?.value
                    ?.process_type as keyof typeof RenovationAppliesProcessTypeEnum
                ]?.text
              : '-'
          }}
        </hs-card-cell-item>
        <hs-card-cell-item title="装修时间">
          {{ useModel?.showData?.value?.construction_start_date || '-' }} 至
          {{ useModel?.showData?.value?.construction_end_date || '-' }}
        </hs-card-cell-item>
        <hs-card-cell-item title="施工状态" v-if="useModel?.showData?.value?.status === 'Approved'">
          <view v-if="useModel?.showData?.value?.construction_status === 'CompletedConstruction'">
            已竣工
          </view>
          <view v-else> 正常施工 </view>
        </hs-card-cell-item>
        <hs-card-cell-item title="装修内容">
          {{
            useModel?.showData?.value?.renovation_content
              ? RenovationAppliesRenovationContentEnum[
                  useModel?.showData?.value
                    ?.renovation_content as keyof typeof RenovationAppliesRenovationContentEnum
                ]?.text
              : '-'
          }}
        </hs-card-cell-item>
        <hs-card-cell-item title="业主信息">
          {{ useModel?.showData?.value?.owner_name || '-' }}
          {{ useModel?.showData?.value?.owner_phone || '' }}
        </hs-card-cell-item>
        <hs-card-cell-item title="施工负责人">
          {{ useModel?.showData?.value?.construction_principal_name || '-' }}
          {{ useModel?.showData?.value?.construction_principal_phone || '' }}
        </hs-card-cell-item>
        <hs-card-cell-item title="装修公司名称">
          {{ useModel?.showData?.value?.company_name || '-' }}
        </hs-card-cell-item>
        <hs-card-cell-item title="保证金金额" v-if="useModel?.showData?.value?.deposit_amount">
          ¥{{ useModel?.showData?.value?.deposit_amount || '-' }}元
        </hs-card-cell-item>
      </view>
    </view>
    <view class="worker_contents">
      <view class="worker_contents_title">
        <view class="title"> 工人管理 </view>
        <view class="add_worker_btn" @click="useModel.showPopupAddWorker.value = true">
          <uni-icons type="plusempty" color="#2a7efb" size="14"></uni-icons> 新增工人
        </view>
      </view>
      <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.loadMore">
        <view
          v-for="(i, index) in useModel?.listData?.value"
          :key="`item_${index}`"
          class="worker_items"
        >
          <view class="worker_header">
            <view class="avatar">
              <image
                mode="aspectFill"
                :src="
                  (i?.worker_photo && i?.worker_photo[0]?.url) ||
                  ' https://gc-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KA2RZ213C3SWAHTKT9SY7923.png'
                "
              />
            </view>
            <view class="worker_info">
              <view class="name"> {{ i.worker_name || '-' }} </view>
              <view class="phone"> {{ i.worker_phone || '-' }} </view>
            </view>
            <view :class="`status status_${i?.visitor_apply?.status}`">
              {{
                VisitorAppliesStatusEnum[
                  i?.visitor_apply?.status as keyof typeof VisitorAppliesStatusEnum
                ]?.text || '-'
              }}
            </view>
          </view>
          <view class="worker_date"> 有效期：{{ i?.valid_from }}至{{ i?.valid_to }} </view>
          <view class="worker_footer">
            <view
              class="btn btn_stop"
              v-if="i?.visitor_apply?.status === 'Approved'"
              @click="method.handleStopVisitor(i, 0)"
            >
              停用通行证
            </view>
            <view
              class="btn btn_enable"
              v-if="i?.visitor_apply?.status === 'Expired'"
              @click="method.handleStopVisitor(i, 1)"
            >
              启用通行证
            </view>
            <view class="btn" @click="method.handleOpenDelayedEntryExit(i)"> 出入证延期 </view>
          </view>
        </view>
      </cc-scroll-loading>
    </view>

    <hs-footer
      v-if="
        useModel?.showData?.value?.status === 'Draft' ||
        useModel?.showData?.value?.status === 'Rejected'
      "
      :btnParimaryName="useModel?.showData?.value?.status === 'Rejected' ? '重新编辑' : '继续编辑'"
      @handleParmaryClick="method.handleToPage({ url: '/ME/decoration/update/index' })"
    />
    <hs-footer
      v-if="
        useModel?.showData?.value?.status === 'Approved' &&
        !useModel?.showData?.value?.house_work_orders?.length && useModel?.showData?.value?.construction_status !== 'CompletedConstruction'
      "
      btnOtherShow
      btnParimaryName="申请验收"
      btnOtherName="装修延期"
      @handleOtherClick="method.handleExtension"
      @handleParmaryClick="method.handleAcceptance"
    />
    <hs-footer
      v-if="
        useModel?.showData?.value?.status === 'Approved' &&
        useModel?.showData?.value?.house_work_orders?.length &&
        useModel?.showData?.value?.construction_status !== 'CompletedConstruction'
      "
      btnParimaryName="装修延期"
      @handleParmaryClick="method.handleExtension"
    />
    <MyPopupSelectWorker
      :items="useModel.showData.value"
      :show="useModel?.showPopupAddWorker?.value"
      @handleClose="handleClose"
    />
    <MyPopupAcceptance
      :items="useModel.showData.value"
      :show="useModel?.showPopupAcceptance?.value"
      @handleClose="handleClose"
      @handleSubmit="method.handleAcceptanceSubmit"
    />
    <MyPopupExtension
      :items="useModel.showData.value"
      :show="useModel?.showPopupExtension?.value"
      @handleClose="handleClose"
      @handleSubmit="method.handleExtensionSubmit"
    />
    <MyPopupDelayedEntryExit
      :items="useModel.dataPopupDelayedEntryExit.value"
      :show="useModel?.showPopupDelayedEntryExit?.value"
      @handleClose="handleClose"
      @handleSubmit="method.handleDelayedEntryExitSubmit"
    />
  </view>
</template>
<script setup lang="ts">
import MyPopupAcceptance from '../components/PopupAcceptance.vue'
import MyPopupExtension from '../components/PopupExtension.vue'
import MyPopupDelayedEntryExit from '../components/PopupDelayedEntryExit.vue'
import { onHide, onLoad, onShareAppMessage, onShow, onUnload } from '@dcloudio/uni-app'
const showPopup = ref(false)
import method from './method'
import useModel from './model'
import {
  RenovationAppliesStatusEnum,
  RenovationAppliesProcessTypeEnum,
  RenovationAppliesTypeEnum,
  RenovationAppliesRenovationContentEnum,
  VisitorAppliesStatusEnum,
  VisitorCodeStatusEnum
} from '@/gen/Enums'
import { ref } from 'vue'
import MyPopupSelectWorker from '../components/PopupSelectWorker.vue'

onLoad((e: any) => {
  method?.getShow(e)
})

onShow(() => {
  if (useModel.showData.value?.id) {
    method?.getShow({ id: useModel.showData.value?.id })
  }
})

onHide(() => {
  handleClose()
})

onUnload(() => {
  useModel.showData.value = {}
  useModel.listData.value = []
  useModel.formListData.value = { page: 1, renovation_applies_id: '' }
})

const handleClose = () => {
  useModel.showPopupAddWorker.value = false
  useModel.showPopupExtension.value = false
  useModel.showPopupAcceptance.value = false
  useModel.showPopupDelayedEntryExit.value = false
}

onShareAppMessage(() => {
  return {
    title: `邀请您填写工人信息登记`,
    path: `/ME/decoration/add_worker/index?id=${useModel?.showData?.value?.id}&type=share`,
    imageUrl:
      'https://gc-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KAAG9TW1WMQ8JETENG7QWXD4.jpg'
  }
})
</script>

<style lang="scss">
@import './style.scss';
</style>
