<template>
  <view>
    <view class="to_be_done_title"> 待办处理 </view>
    <cc-scroll-loading :meta="useModel.meta.value" @load="method.handleLoadMore">
      <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_${i?.approval_owner_status}`">
            <hs-enum-tag :value="i?.approval_owner_status" :Enums="HouseRegistersStatusEnum" />
          </view>
        </view>
        <template v-for="(k, idx) in i?.customer_info" :key="`f_item_${index}_${idx}`">
          <view class="audit_cell"> 姓名：{{ k?.name }} </view>
          <view class="audit_cell"> 手机号：{{ k?.phone }} </view>
          <view class="audit_cell">
            申请身份：<hs-enum-tag
              :value="k?.residential_relation"
              :Enums="HouseOccupantsResidentialRelationEnum"
            />
          </view>
          <view class="audit_cell"> 申请时间：{{ i?.created_at }} </view>
        </template>
        <view class="audit_footer" v-if="i?.approval_owner_status === 'Pending'">
          <view class="btn">
            <hs-button label="驳回" size="sm" type="display" @click="handleAuditShow(i)" />
          </view>
          <view class="btn">
            <hs-button label="审核通过" size="sm" type="primary" @click="method?.handleAudit(i)" />
          </view>
        </view>
      </view>
    </cc-scroll-loading>
    <hs-popup-custom :show="show" mode="center" title="审核驳回">
      <view class="popup_custom_content">
        <view class="popup_textarea">
          <textarea
            placeholder="请输入审核驳回的原因"
            disable-default-padding
            adjust-position
            placeholder-style="font-size: 28rpx;color:#999;"
            v-model="rejectReason.reason"
          ></textarea>
        </view>
        <view class="popup_footer">
          <view class="btn">
            <hs-button label="取消" @click="handleClosePopup" size="md" type="display" />
          </view>
          <view class="btn">
            <hs-button label="提交" size="md" type="primary" @click="handleSubmit" />
          </view>
        </view>
      </view>
    </hs-popup-custom>
  </view>
</template>

<script setup lang="ts">
import { HouseRegistersStatusEnum, HouseOccupantsResidentialRelationEnum } from '@/gen/Enums'
import useModel from '../model'
import method from '../method'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { ref } from 'vue'
import { showToast } from '@/common/libraries/naviHelper'
const show = ref(false)
const rejectReason = ref({ id: '', reason: '' })
const handleClosePopup = () => {
  show.value = false
}
const handleAuditShow = (e: { id: string }) => {
  show.value = true
  rejectReason.value.id = e?.id
  rejectReason.value.reason = ''
}
const handleSubmit = () => {
  if (!rejectReason.value?.reason) {
    return showToast('请输入理由!')
  }
  getApiLoading(Apis.Archive.HouseRegisters.Audit, {
    ...rejectReason.value,
    status: 'Rejected'
  }).then(res => {
    showToast('提交成功！')
    show.value = false
    method?.handleSrarch()
    console.log(res)
  })
}
</script>

<style lang="scss" scoped>
.to_be_done_title {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
  padding: 0 30rpx;
}
.audit_item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 0 30rpx 10rpx 30rpx;
  margin: 30rpx 30rpx 0 30rpx;
  .audit_header {
    padding: 30rpx 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;
    padding-bottom: 16rpx;
  }
  .audit_footer {
    border-top: 1rpx solid #eee;
    padding: 30rpx 0 20rpx 0;
    margin: 30rpx 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn {
      width: 46%;
    }
  }
}

.popup_custom_content {
  padding: 0 30rpx 30rpx 30rpx;
  .popup_textarea {
    background-color: #f3f3f4;
    padding: 30rpx;
    border-radius: 20rpx;
    textarea {
      height: 180rpx;
    }
  }
  .popup_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0 10rpx 0;
    .btn {
      width: 47%;
    }
  }
}
</style>
