<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.SERVERPART_INDEX !== null ?
                item.SERVERPART_INDEX : ''}}</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.CHECK_CASHPAY !== null ?
                item.CHECK_CASHPAY : ''}}</text>
            <text style="font-size: 24upx;">元</text>
            <!-- 右侧 -->
            <!-- 对客现金 -->
            <text class="other-coast">{{item.CASH_PAYMENT !== null ?
                item.CASH_PAYMENT : ''}}</text>
        </view>
        <!-- 分割线 -->
        <view class="bb1"></view>
        <!-- 卡片第四行顶部数据 -->
        <view class="uni-flex jc-between align-center" v-if="item.DIFFERENT_PRICE || item.TOTALSELLAMOUNT">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 长短款额 -->
                <!-- 圆点 -->
                <text class="G-icon A-icon"></text>
            <span class="content-span">长短款额：{{item.DIFFERENT_PRICE !== null ?
                item.DIFFERENT_PRICE : ''}}</span>
            </view>
            <!-- 右侧 -->
            <!-- 对客营收 -->
            <text class="content-span lh15">{{item.TOTALSELLAMOUNT !== null ?
                item.TOTALSELLAMOUNT : ''}}</text>
        </view>
        <!-- 卡片第四行中间数据 -->
        <view class="uni-flex jc-between" v-if="item.DIFFERENT_PRICE_Less">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 短款合计 -->
                <!-- 圆点 -->
                <p class="B-icon A-icon"></p>
            <span class="content-span">短款合计：{{item.DIFFERENT_PRICE_Less !== null ?
                item.DIFFERENT_PRICE_Less : ''}}</span>
            </view>
        </view>
        <!-- 卡片第四行底部数据 -->
        <view class="uni-flex jc-between" v-if="item.DIFFERENT_PRICE_More">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 长款合计 -->
                <!-- 圆点 -->
                <p class="G-icon A-icon"></p>
            <span class="content-span">长款合计：{{item.DIFFERENT_PRICE_More !== null ?
                item.DIFFERENT_PRICE_More : ''}}</span>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {//这里存放接收到的父级数据
            item: {
                type: Object,
                required: true
            },
            i: {
                type: Number,
                required: true
            },
        },
        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>
