<template>
    <view class="card cardBorder" @tap='goDetail' v-if="item">
        <!-- 卡片第一行数据 -->
        <view class="uni-flex jc-between">
            <!-- 左侧 -->
            <!-- 门店名称 -->
            <p class="contentName">{{item.SHOPNAME || ''}}</p>
            <!-- 右侧 -->
            <!-- 收银机号 -->
            <text class="typeText">{{item.MACHINECODE || ''}}</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.SERVERPART_NAME || ''}}</text>
        </view>
        <!-- 卡片第三行数据 -->
        <view class="uni-flex content-box-cashpay">
            <!-- 中间 -->
            <!-- 长短款额 -->
            <text class="content-price">{{item.DIFFERENT_PRICE !== null ?
                item.DIFFERENT_PRICE : ''}}</text>
            <text style="font-size: 24upx;">元</text>
            <!-- 右侧 -->
            <!-- 稽查类型 -->
            <text class="other-coast">{{item.CHECK_TYPE || ''}}</text>
        </view>
        <!-- 分割线 -->
        <view class="bb1"></view>
        <!-- 卡片第四行顶部数据 -->
        <view class="uni-flex jc-between align-center" v-if="item.WORKER_NAME || item.CHECK_ENDDATE">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 稽查人名称 -->
                <!-- 圆点 -->
                <text class="G-icon A-icon"></text>
            <span class="content-span">稽查人名称：{{item.WORKER_NAME || ''}}</span>
            </view>
            <!-- 右侧 -->
            <!-- 稽查时间 -->
            <text class="content-span lh15">{{item.CHECK_ENDDATE ?
                this.$util.changeStringToDate(item.CHECK_ENDDATE.toString()) : ''}}</text>
        </view>
        <!-- 卡片第四行中间数据 -->
        <view class="uni-flex jc-between" v-if="item.CASHIER_NAME">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 收银员名称 -->
                <!-- 圆点 -->
                <p class="B-icon A-icon"></p>
            <span class="content-span">收银员名称：{{item.CASHIER_NAME || ''}}</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>
