<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-11-03 11:36:00
 * @FilePath: \housekeeping-uniapp\src\bundle\pages\evaluate_list\components\wait.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="card flex flex-col justify-between" @click="goPage">
        <view class="mb-3">
            <text class="font-medium">完成时间：</text>
            <text>{{ formatDate(finishTime) }}</text>
        </view>
        <view class="flex justify-between items-center">
            <view class="flex flex-1 mr-1">
                <u-image :src="image" width="140" height="140" border-radius="16"></u-image>
                <view class="ml-[20rpx]">
                    <view class="normal font-medium text-xl overflow-ellipsis-line">
                        {{ name }}
                    </view>
                    <view class="mt-[24rpx]">
                        <price :price="price" :desc="unit_name"></price>
                    </view>
                </view>
            </view>
            <view>
                <button
                    class="evaluate bg-white text-sm text-muted leading-[60rpx] h-[60rpx] rounded-full"
                    @click="goPage"
                >
                    去评价
                </button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import Price from '@/components/price/index.vue'
import { formatDate } from '@/utils/util'

const props = withDefaults(
    defineProps<{
        name: string | null
        image: string | null
        unit_name: any
        price: any
        goodsId: string | number
        finishTime: string | number
    }>(),
    {
        name: '',
        image: '',
        unit_name: '',
        price: '',
        goodsId: '',
        finishTime: ''
    }
)

const goPage = () => {
    uni.redirectTo({
        url: `/bundle/pages/evaluate_submit/index?id=${props.goodsId}`
    })
}
</script>

<style lang="scss" scoped>
.card {
    border-radius: 14rpx;
    background-color: white;
    margin: 0 20rpx 0 20rpx;
    padding: 30rpx;
}
.evaluate {
    border: 1px solid $blue5;
    color: $blue5;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
}
</style>
