<template>
    <view class="card cardBorder" @tap='goDetail' v-if="item">
        <!-- 卡片第一行数据 -->
        <view class="uni-flex jc-between">
            <!-- 左侧 -->
            <!-- 门店简称 -->
            <p class="contentName">{{item.SHOPSHORTNAME || ''}}</p>
            <!-- 右侧 -->
            <!-- 行业名称 -->
            <text class="typeText">{{item.SHOPTRADE !== null ?
                businesstype[item.SHOPTRADE] : ''}}</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>
            <!-- 右侧 -->
            <!-- 服务区编码 -->
            <text class="content-type-text">{{item.SERVERPART_CODE || ''}}</text>
        </view>
        <!-- 卡片第三行数据 -->
        <view class="uni-flex content-box-cashpay">
            <!-- 中间 -->
            <!-- 移动支付金额 -->
            <text class="content-price">{{item.FACT_AMOUNT !== null ?
                item.FACT_AMOUNT : ''}}</text>
            <text style="font-size: 24upx;">元</text>
            <!-- 右侧 -->
            <!-- 移动支付金额 -->
            <text class="other-coast">{{item.FACT_AMOUNT !== null ?
                item.FACT_AMOUNT : ''}}</text>
        </view>
        <!-- 分割线 -->
        <view class="bb1"></view>
        <!-- 卡片第四行顶部数据 -->
        <view class="uni-flex jc-between align-center" v-if="item.TICKETBILL || item.SERVERPART_ID">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 微信支付 -->
                <!-- 圆点 -->
                <text class="G-icon A-icon"></text>
            <span class="content-span">微信支付：{{item.TICKETBILL !== null ?
                item.TICKETBILL : ''}}</span>
            </view>
            <!-- 右侧 -->
            <!-- 服务区内码 -->
            <text class="content-span lh15">{{item.SERVERPART_ID !== null ?
                item.SERVERPART_ID : ''}}</text>
        </view>
        <!-- 卡片第四行中间数据 -->
        <view class="uni-flex jc-between" v-if="item.OTHERPAY || item.SERVERPART_CODE">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 其他支付(支付宝) -->
                <!-- 圆点 -->
                <p class="B-icon A-icon"></p>
            <span class="content-span">其他支付(支付宝)：{{item.OTHERPAY !== null ?
                item.OTHERPAY : ''}}</span>
            </view>
            <!-- 右侧 -->
            <!-- 服务区编码 -->
            <text class="content-span lh15">{{item.SERVERPART_CODE || ''}}</text>
        </view>
        <!-- 卡片第四行底部数据 -->
        <view class="uni-flex jc-between" v-if="item.SHOPTRADE || item.SHOPTRADE">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 行业名称 -->
                <!-- 圆点 -->
                <p class="G-icon A-icon"></p>
            <span class="content-span">行业名称：{{item.SHOPTRADE !== null ?
                businesstype[item.SHOPTRADE] : ''}}</span>
            </view>
            <!-- 右侧 -->
            <!-- 行业名称 -->
            <text class="content-span lh15">{{item.SHOPTRADE !== null ?
                businesstype[item.SHOPTRADE] : ''}}</text>
        </view>
    </view>
</template>
<script>
    export default {
        props: {//这里存放接收到的父级数据
            item: {
                type: Object,
                required: true
            },
            i: {
                type: Number,
                required: true
            },
            businesstype: {
                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>
