<template>
  <view class="decoration_list_page">
    <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.loadMore">
      <view v-for="(i, index) in useModel?.listData?.value" :key="`item_${index}`" class="items">
        <view class="header_items">
          <view class="status_group">
            <view :class="`items_status status_${i?.status}`">
              {{
                RenovationAppliesStatusEnum[i?.status as keyof typeof RenovationAppliesStatusEnum]
                  ?.text
              }}
            </view>
            <view
              v-if="i?.status === 'Approved' && i?.construction_status !== 'CompletedConstruction'"
              class="items_status status_default"
            >
              正常施工
            </view>
            <view
              v-if="i?.status === 'Approved' && i?.construction_status === 'CompletedConstruction'"
              class="items_status status_default"
            >
              已竣工
            </view>
          </view>

          <view
            v-if="i?.status !== 'Approved' && i?.status !== 'Pending'"
            class="delete_btn"
            @click="method?.handleDelete(i)"
          >
            <uni-icons type="trash" size="16"></uni-icons> 删除
          </view>
        </view>

        <view class="content_items" @click="method.headleToGoShow(i)">
          <view class="name">{{ i?.asset_house?.full_name }}</view>
          <view class="decoration_info">
            <view class="decoration_info_cell">
              装修类型
              <view class="value">
                {{
                  RenovationAppliesTypeEnum[i?.type as keyof typeof RenovationAppliesTypeEnum]?.text
                }}
              </view>
            </view>
            <view class="decoration_info_cell">
              创建时间
              <view class="value">
                {{ i?.created_at }}
              </view>
            </view>
            <view class="decoration_info_cell" v-if="i?.construction_start_date">
              施工时间
              <view class="value">
                {{ i?.construction_start_date || '-' }}至{{ i?.construction_end_date || '-' }}
              </view>
            </view>
          </view>
        </view>

        <view v-if="i?.status !== 'Pending' && i?.construction_status !== 'CompletedConstruction'" class="footer_items">
          <template v-if="i?.status === 'Draft' || i?.status === 'Rejected'">
            <hs-button
              :label="i?.status === 'Rejected' ? '重新编辑' : '继续编辑'"
              type="ghost"
              @click="method.handleToPage(`/ME/decoration/update/index?id=${i?.id}`)"
            />
          </template>
          <template v-if="i?.status === 'Approved'">
            <template  v-if="i?.status === 'Approved' && i?.construction_status !== 'CompletedConstruction'">
              <hs-button
                label="添加工人"
                type="ghost"
                @click="method?.handleToPage(`/ME/decoration/add_worker/index?id=${i?.id}`)"
              />
              <view class="nth_btn" v-if="!i?.house_work_orders?.length">
                <hs-button label="申请验收" type="ghost" @click="method.handleAcceptance(i)" />
              </view>
              <view class="nth_btn">
                <hs-button label="装修延期" type="ghost" @click="method.handleExtension(i)" />
              </view>
            </template>
          </template>
        </view>
      </view>
    </cc-scroll-loading>
    <hs-footer>
      <view class="footer_page">
        <view class="filing_btn" @click="useModel.showFiling.value = true">
          <view class="icon">
            <u-icon name="order" size="24"></u-icon>
          </view>
          <view class="label"> 备案清单 </view>
        </view>

        <view class="footer_group_btn">
          <hs-button label="开始登记" @click="method.toPageAdd" type="primary" size="md" />
        </view>
      </view>
    </hs-footer>
    <MyPopupAcceptance
      :items="useModel?.popupFormData?.value"
      :show="useModel?.showPopupAcceptance?.value"
      @handleClose="handleClose"
      @handleSubmit="method.handleAcceptanceSubmit"
    />
    <MyPopupExtension
      :items="useModel?.popupFormData?.value"
      :show="useModel?.showPopupExtension?.value"
      @handleClose="handleClose"
      @handleSubmit="method.handleExtensionSubmit"
    />
    <MyPopupFilingList :show="useModel?.showFiling?.value" @handleClose="handleClose" />
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import MyPopupAcceptance from '../components/PopupAcceptance.vue'
import MyPopupFilingList from '../components/PopupFilingList.vue'
import method from './method'
import useModel from './model'
import MyPopupExtension from '../components/PopupExtension.vue'
import { RenovationAppliesStatusEnum, RenovationAppliesTypeEnum } from '@/gen/Enums'

onLoad(() => {
  useModel.listData.value = []
  method?.getList()
})
onShow(() => {
  if (useModel?.loadMore?.value) {
    useModel.formData.value.page = 1
    useModel.listData.value = []
    method?.getList()
  }
})

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

onUnload(() => {
  useModel.loadMore.value = false
  useModel.formData.value.page = 1
  useModel.listData.value = []
})
</script>

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