<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-09-27 14:54:44
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-11-21 14:58:25
 * @FilePath: \housekeeping-uniapp\src\bundle\pages\withdraw_distributor_record\components\card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="card">
        <view class="card__top">
            <text>提现到账</text>
            <text :class="getStatusColor(item.status)">{{ WithdrawStatusMap[item?.status] }}</text>
        </view>
        <view class="card__content">
            <view class="money w-full">
                <view class="text-2xl">提现金额</view>
                <view class="text-5xl font-bold my-1 ml-[-50rpx]">
                    <text class="mr-2">￥</text>
                    <text>{{ item.withdrawMoney }}</text>
                </view>
            </view>
            <view v-for="(i, index) in fieldArr" :key="index" class="flex text-lg mb-2">
                <text class="w-[180rpx]">{{ i.name }}</text>
                <text>{{ item[i.prop] }}</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType, computed, watch } from 'vue'
import { WithdrawStatusMap } from '@/enums/appEnums'

interface CardProps {
    id: number
    withdrawMoney: number
    createTime: string
    status: number
    updateTime: string
    withdrawTo: string
    remark: string
}
const props = defineProps({
    item: Object as PropType<CardProps>
})
const getStatusColor = computed(() => {
    return function (val: number) {
        return val === 0 ? 'text-warning' : val === 1 ? 'text-success' : 'text-error'
    }
})
watch(
    () => props.item,
    () => {
        ;(props.item as CardProps).withdrawTo = '微信零钱'
        if ((props.item as CardProps).status == 1) {
            ;(props.item as CardProps).remark = '您的佣金已提现到微信钱包'
        } else if ((props.item as CardProps).status == 2) {
            ;(props.item as CardProps).remark = '提现失败，请联系客服'
        } else {
            ;(props.item as CardProps).remark = ''
        }
    },
    {
        immediate: true
    }
)
const fieldArr = [
    {
        name: '提现去向',
        prop: 'withdrawTo'
    },
    {
        name: '提现时间',
        prop: 'createTime'
    },
    {
        name: '到账时间',
        prop: 'updateTime'
    },
    {
        name: '备注',
        prop: 'remark'
    }
]
</script>
<style lang="scss" scoped>
.card {
    background-color: $white;
    border-radius: 12rpx;
    margin: 30rpx;

    &__top {
        display: flex;
        justify-content: space-between;
        line-height: 72rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
    }

    &__content {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #eee;
        padding: 0 20rpx 20rpx;

        .money {
            padding: 30rpx;
            text-align: center;
        }
    }
}
</style>
