<template>
	<view class="">
		<view class="cost" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
			<view class="cost_status" v-if="item.check_status == 0"><span>待审核</span></view>
			<view class="cost_status" v-if="item.check_status == 1"><span>审核中</span></view>
			<view class="cost_status" v-if="item.check_status == 2"><span>审核通过</span></view>
			<view class="cost_status" v-if="item.check_status == 3"><span>审核未通过</span></view>
			<view class="cost_status" v-if="item.check_status == 4"><span>撤销</span></view>
			<view class="cost_type">{{item.consume_type}}</view>
			<view class="cost_info">
				<view class="cost_left">
					<view class="cost_text">关联客户：{{item.customer.name}}</view>
					<view class="cost_text">费用金额：{{item.money}}</view>
					<view class="cost_text">消费日期：{{item.consume_time}}</view>
				</view>
				<view class="cost_right">
					<image :src="item.staff.img" class="staffimg" mode=""></image>
					<view class="staffname">{{item.staff.name}}</view>
				</view>
			</view>
		</view>
		<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
	</view>
</template>

<script>
	
	export default{
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return{
				
			}
		},
		methods:{
			toDetail(item) {
				uni.navigateTo({
					url:'/pages/index/groupCompany/cost/costDetail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cost{
		width:690rpx;
		margin:0 auto 24rpx;
		background:#fff;
		border-radius: 20rpx;
		padding:30rpx;
		position: relative;
		.cost_type{
			font-size:28rpx;
			color:#333;
			padding-bottom:15rpx;
			border-bottom:1rpx solid #f5f5f5;
		}
		.cost_status{
			position: absolute;
			right:24rpx;
			top:24rpx;
			background:$uni-text-color-opcity;
			border-radius: 5rpx;
			font-size: 26rpx;
			color: $uni-text-color;
			padding: 5rpx 12rpx;
		}
		.cost_info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:10rpx;
			.cost_left{
				.cost_text{
					font-size:24rpx;
					color:#999;
					margin-bottom:10rpx;
				}
			}
			.cost_right{
				display: flex;
				flex-direction: column;
				align-items: center;
				.staffimg{
					width:80rpx;
					height:80rpx;
					border-radius: 50%;
					margin-bottom:8rpx;
				}
				.staffname{
					font-size:24rpx;
					color:#999;
				}
			}
		}
	}
</style>