<template>
    <view class="card cardBorder" @tap='goDetail' v-if="item">
        <!-- 卡片第一行数据 -->
        <view class="uni-flex jc-between">
            <!-- 左侧 -->
            <!-- 业主单位名称 -->
            <p class="contentName">{{item.OWNERUNIT_NAME || ''}}</p>
        </view>
        <!-- 卡片第一行角标 -->
        <view class="content-index" style="background-color:#FB8B56">{{i+1}}</view>
        <!-- 卡片第三行数据 -->
        <view class="uni-flex content-box-cashpay">
            <!-- 中间 -->
            <!-- 门店数量 -->
            <text class="content-price">{{item.BUSINESS_STATE || ''}}</text>
            <!-- 右侧 -->
            <!-- 在营数量 -->
            <text class="other-coast">{{item.BUSINESS_STATE_1000 || ''}}</text>
        </view>
        <!-- 分割线 -->
        <view class="bb1"></view>
        <!-- 卡片第四行顶部数据 -->
        <view class="uni-flex jc-between align-center" v-if="item.BRAND_NAME">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 经营品牌 -->
                <!-- 圆点 -->
                <text class="G-icon A-icon"></text>
            <span class="content-span">经营品牌：{{item.BRAND_NAME || ''}}</span>
            </view>
        </view>
        <!-- 卡片第四行中间数据 -->
        <view class="uni-flex jc-between" v-if="item.BUSINESS_TRADENAME">
            <!-- 左侧 -->
            <view class="uni-flex align-top">
            <!-- 经营业态 -->
                <!-- 圆点 -->
                <p class="B-icon A-icon"></p>
            <span class="content-span">经营业态：{{item.BUSINESS_TRADENAME || ''}}</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>
