<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '资产平移',
  },
}
</route>
<template>
  <view class="invest-page">
    <NavBar title-color="#333" />
    <view class="mt-320 pl-15 text-24 text-white" style="text-shadow: 0 0 2px #ff5153">
      银行卡恢复列表
    </view>
    <view class="mt-15 px-15 pb-15">
      <view
        class="flex items-center mt-10 text-#333 p-15 rounded-10 bg-#FFF9F2 border-2 border-#FFDD99 border-solid"
        v-for="item in list"
        :key="item.id"
      >
        <view class="flex-1">
          <view class="text-15">{{ item.name }}</view>
          <view class="text-12 mt-8">邀请1人</view>
        </view>
        <view
          class="btn-gradient text-white text-12 border-1 border-#EFB85A border-solid py-4 px-30 rounded-4 px-10"
          v-if="item.ishuifu"
        >
          已恢复
        </view>
        <view
          class="text-12 text-#EFB85A border-1 border-#EFB85A border-solid py-4 px-30 rounded-4 px-10"
          @click="handleRecover(item)"
          v-else
        >
          恢复
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { getBankCardRecoverAPI, getBankCardRecoverListAPI } from '@/service'
import { getImageUrl, showModal } from '@/utils'

const { list, onReload } = useListPageRequest(getBankCardRecoverListAPI)

const handleRecover = async (item: any) => {
  const res = await getBankCardRecoverAPI({ id: item.id })
  showModal(res.msg ? res.msg : '恢复成功')
  onReload()
}
</script>

<style lang="scss" scoped>
.invest-page {
  background-image: url('@/static/images/invest/bg.png'),
    linear-gradient(to right, #e4c198, #e3bd93);
  background-repeat: no-repeat;
  background-position:
    top -160rpx center,
    top center;
  background-size: 100%;
}
</style>
