<template>
    <view class="card cardBorder" @tap='goDetail' v-if="item">
        <!-- 卡片第一行数据 -->
        <view class="uni-flex jc-between">
            <!-- 左侧 -->
            <!-- 服务区名称 -->
            <p class="contentName">{{item.SERVERPART_NAME || ''}}</p>
            <!-- 右侧 -->
            <!-- 站点类型 -->
            <text class="typeText">{{item.STATISTICS_TYPE !== null ?
                serverpartsiteType[item.STATISTICS_TYPE] : ''}}</text>
        </view>
        <!-- 卡片第一行角标 -->
        <view class="content-index" style="background-color:#FB8B56">{{i+1}}</view>
        <!-- 卡片第二行数据 -->
        <view class="uni-flex jc-between">
            <!-- 左侧 -->
            <!-- 片区名称 -->
            <text class="content-type-text">{{item.SPREGIONTYPE_NAME || ''}}</text>
        </view>
        <!-- 卡片第三行数据 -->
        <view class="uni-flex content-box-cashpay">
            <!-- 中间 -->
            <!-- 实收金额 -->
            <text class="content-price">{{item.CASHPAY !== null ?
                item.CASHPAY : ''}}</text>
            <text style="font-size: 24upx;">元</text>
            <!-- 右侧 -->
            <!-- 现金 -->
            <text class="other-coast">{{item.CASH !== null ?
                item.CASH : ''}}</text>
        </view>
        <!-- 分割线 -->
        <view class="bb1"></view>
        <!-- 卡片第四行顶部数据 -->
        <view class="uni-flex jc-between align-center" v-if="item.TICKETCOUNT">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 客单数量 -->
                <!-- 圆点 -->
                <text class="G-icon A-icon"></text>
            <span class="content-span">客单数量：{{item.TICKETCOUNT !== null ?
                item.TICKETCOUNT : ''}}</span>
            </view>
        </view>
        <!-- 卡片第四行中间数据 -->
        <view class="uni-flex jc-between" v-if="item.TOTALCOUNT">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 销售总数 -->
                <!-- 圆点 -->
                <p class="B-icon A-icon"></p>
            <span class="content-span">销售总数：{{item.TOTALCOUNT !== null ?
                item.TOTALCOUNT : ''}}</span>
            </view>
        </view>
        <!-- 卡片第四行底部数据 -->
        <view class="uni-flex jc-between" v-if="item.DIFFERENT_PRICE">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 长短款 -->
                <!-- 圆点 -->
                <p class="G-icon A-icon"></p>
            <span class="content-span">长短款：{{item.DIFFERENT_PRICE !== null ?
                item.DIFFERENT_PRICE : ''}}</span>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {//这里存放接收到的父级数据
            item: {
                type: Object,
                required: true
            },
            i: {
                type: Number,
                required: true
            },
            serverpartsiteType: {
                type: Object,
                required: false
            },
        },
        data() {//这里存放组件私有数据
            return {
            }
        },
        computed: {},
        methods: {//方法集合
            goDetail() {
                this.$emit('goDetail', this.item)
            },
            dateEmpty(v) {
                return this.$util.cutDate(v, 'YYYY/MM/DD')
            },
        },
    }
</script>
<!-- 注意：style样式增加scoped私有属性标记后，组件样式不能在引用的地方进行修改 -->
<style scoped>
    @import url('/common/css/listUnit.css');
    .cardBorder {//卡片边框颜色
        box-shadow: 0 0px 6rpx #E2E2E2;
    }
    .content-box-cashpay {
        position: relative;
    }
    .other-coast {//标签渐变背景色
        color: #D1A271;
        background: linear-gradient(to top, #EBDDCF, #FCFBF8);
        border-radius: 6rpx;
        font-size: 20rpx;
        padding: 0 10rpx;
        margin-left: 16rpx;
        margin-top: 3rpx;
        position: absolute;
        right: 0rpx;
        bottom: 30rpx;
    }
</style>
