<template>
  <view v-for="(i, index) in useModel?.dataList?.value" :key="`item_${index}`" class="audit_item">
    <view class="audit_header">
      {{ i?.asset_house?.full_name }}
      <view :class="`status_tab status_${getStatus(i)}`">
        <hs-enum-tag
          :value="i?.approval_owner_status || i?.status"
          :Enums="HouseRegistersStatusEnum"
        />
      </view>
    </view>
    <template v-for="(k, idx) in i?.customer_info" :key="`f_item_${index}_${idx}`">
      <view class="audit_cell">
        您申请的身份：<hs-enum-tag
          v-if="k?.house_relation === 'NonOwner'"
          :value="k?.residential_relation"
          :Enums="HouseOccupantsResidentialRelationEnum"
        />
        <hs-enum-tag v-else :value="k?.house_relation" :Enums="HouseOccupantsHouseRelationEnum" />
      </view>
    </template>
    <view class="audit_footer" :style="getStyleColorInfo()" @click="handleShowPopup(i)">
      查看审核进度
    </view>
  </view>
  <hs-popup-custom :show="show" mode="center" title="房屋审核进度">
    <view class="popup_custom_content">
      <template v-if="stepList?.length > 1">
        <up-steps direction="column" dot :current="stepCurrent">
          <up-steps-item v-for="(i, index) in stepList" :key="`step_${index}`">
            <template #desc>
              <view class="desc_title">
                {{ i?.label }}
                <text
                  v-if="stepCurrent === index && i?.status === 'Pending'"
                  :class="`text_${i?.status}`"
                >
                  (进行中)
                </text>
                <text
                  v-if="stepCurrent === index && i?.status === 'Approved'"
                  :class="`text_${i?.status}`"
                >
                  (已通过)
                </text>
                <text
                  v-if="stepCurrent === index && i?.status === 'Rejected'"
                  :class="`text_${i?.status}`"
                >
                  (驳回)
                </text>
              </view>
              <view class="desc_content">
                {{ i?.content
                }}<text @click="handleCopyPhone(i?.phone)">{{ formatPhoneNumber(i?.phone) }}</text>
              </view>
            </template>
          </up-steps-item>
        </up-steps>
      </template>
      <template v-if="stepList?.length === 1">
        <view v-for="(i, index) in stepList" :key="`step_${index}`" class="step_item_owner">
          {{ i?.content }}<br /><template v-if="i?.phone"
            >{{ i?.phone_text }}<text>{{ formatPhoneNumber(i?.phone) }}</text></template
          >
        </view>
      </template>
      <view class="popup_footer">
        <hs-button label="我知道了" @click="handleClosePopup" size="md" type="primary" />
      </view>
    </view>
  </hs-popup-custom>
</template>

<script setup lang="ts">
import {
  HouseRegistersStatusEnum,
  HouseOccupantsHouseRelationEnum,
  HouseOccupantsResidentialRelationEnum
} from '@/gen/Enums'
import { getStyleColorInfo } from '@/common/libraries/getPageConfig'
import useModel from '../model'
import method from '../method'
import { formatPhoneNumber } from '@/common/libraries/public'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { ref } from 'vue'
const show = ref(false)
const stepCurrent = ref(0)
const stepList = ref<any>([])

const handleCopyPhone = (phone: string) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone //仅为示例，并非真实的电话号码
    })
  }
}

const handleShowPopup = (e: any) => {
  show.value = true
  getApiLoading(Apis.Grid.Grids.GetHousekeeper, { asset_houses_id: e?.asset_house?.id }).then(
    res => {
      if (e?.type === 'AddOccupant') {
        if (e?.status === 'Approved' && e?.approval_owner_status === 'Pending') {
          stepCurrent.value = 1
        }
        if (e?.status === 'Approved' && e?.approval_owner_status === 'Approved') {
          stepCurrent.value = 2
        }
        stepList.value = [
          {
            label: '第一步：后台初步审核',
            content: `如需加快进度，可联系社区管家催审 管家电话：`,
            phone: res?.data?.phone,
            status: e?.status
          },
          {
            label: '第二步：业主确认审核',
            content: `如需加快进度，可联系社区管家催审 管家电话：`,
            phone: e?.apply_customer_phone,
            status: e?.approval_owner_status
          }
        ]
      }
      if (e?.type === 'AddOwner') {
        stepList.value = [
          {
            content: '如需加快进度，可联系社区管家催审',
            phone_text: `管家电话：`,
            phone: res?.data?.phone
          }
        ]
      }
      console.log(res)
    }
  )
  console.log(e, 'e')
}

const handleClosePopup = () => {
  show.value = false
}

const getStatus = (e: any) => {
  if (e?.type === 'AddOwner') {
    return e?.status
  } else {
    if (e?.status === 'Approved' && e?.approval_owner_status === 'Approved') {
      return 'Approved'
    }
    if (e?.status === 'Pending' || e?.approval_owner_status === 'Pending') {
      return 'Pending'
    }
    if (e?.status === 'Rejected' || e?.approval_owner_status === 'Rejected') {
      return 'Rejected'
    }
  }
}
</script>

<style lang="scss" scoped>
.audit_item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 0 30rpx 10rpx 30rpx;
  margin-top: 30rpx;
  .audit_header {
    padding: 30rpx 0 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-weight: 550;
    .status_tab {
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 100rpx;
    }
    .status_Pending {
      background-color: #fff7ed;
      color: #f97316;
    }
    .status_Approved {
      background-color: #e4ffd6;
      color: #52c41a;
    }
    .status_Rejected {
      background-color: #eaeaea;
      color: rgba(0, 0, 0, 0.45);
    }
  }
  .audit_cell {
    color: #333;
    font-size: 28rpx;
  }
  .audit_footer {
    border-top: 1rpx solid #eee;
    padding: 30rpx 0 20rpx 0;
    margin: 30rpx 0 0 0;
    text-align: center;
    color: #2a7efb;
    font-size: 28rpx;
  }
}
.popup_custom_content {
  padding: 0 50rpx 30rpx 50rpx;
  .desc_title {
    color: #333;
    font-size: 28rpx;
    font-weight: 550;
    display: flex;
    text {
      font-weight: 450;
    }
    .text_Rejected {
      color: rgba(0, 0, 0, 0.45);
    }
    .text_Pending,
    .text_Approved {
      color: #2a7efb;
    }
  }
  .desc_content {
    padding: 20rpx 0 30rpx 0;
    color: #666;
    font-size: 28rpx;
    text {
      color: #2a7efb;
    }
  }
  .popup_footer {
    padding-top: 30rpx;
  }
}
.step_item_owner {
  color: #666;
  font-size: 28rpx;
  line-height: 50rpx;
  text-align: center;
  padding: 0 0 30rpx 0;
  text {
    color: #2a7efb;
  }
}
</style>
