<template>
    <div class="recycle-order-number">
        <div class="common-text" v-if="!isReturn">
            <el-text>用户名：</el-text>
            <el-text>{{ row.userNick }}</el-text>
            <el-image
                v-if="row.orderFrom"
                :src="row.orderFrom == 2 ? alipayIcon : wxIcon"
                style="width: 16px; height: 16px"
            />
        </div>
        <div class="common-text" v-if="isReturn">
            <el-text>昵称：</el-text>
            <el-text
                >{{ row.userNick }}
                <el-tag type="success" size="small" v-if="platformType">
                    {{ platformType }}
                </el-tag>
            </el-text>
        </div>
        <div class="common-text">
            <el-text>发件人：</el-text>
            <el-text v-if="!row.sendName">暂无信息</el-text>
            <el-text v-else
                >{{ formatName(row.sendName) }}（<span v-if="!isShowPhone">{{
                    formatPhone(row.sendMobile)
                }}</span
                ><span v-else>{{ row.sendMobile }}</span
                >）</el-text
            >
        </div>
        <div class="common-text">
            <el-text>省市区：</el-text>
            <el-text>{{ row.sendSsq || '-' }}</el-text>
        </div>
        <div class="common-text">
            <el-text>地址：</el-text>
            <el-text :class="row.pirateSchoolName ? 'bg-red-300' : ''">{{
                row.sendAddress || '-'
            }}</el-text>
        </div>
        <div class="common-text" v-if="!isReturn">
            <el-text>标签：</el-text>
            <el-text v-if="row.userTags">{{ row.userTags.join(',') }}</el-text>
            <el-text v-else>暂无标签</el-text>
        </div>
    </div>
</template>

<script setup>
    import { formatName, formatPhone } from '@/utils/common';
    import { computed } from 'vue';
    import { usePermission } from '@/utils/use-permission';
    import wxIcon from '@/assets/wx.png';
    import alipayIcon from '@/assets/alipay.png';

    const { hasPermission } = usePermission();
    const isShowPhone = computed(() => {
        return hasPermission('recycleOrder:search:viewPhone');
    });

    const props = defineProps({
        row: {
            type: Object,
            default: () => {}
        },
        isReturn: {
            type: Boolean,
            default: false
        }
    });

    const platformType = computed(() => {
        const value = props.row.orderFrom || props.row.plat;
        if (value === 1) return '微信';
        if (value === 2) return '支付宝';
        return '';
    });
</script>
<style lang="scss" scoped>
    .common-text {
        display: flex;
        align-items: center;
        .el-image {
            margin-left: 4px;
            margin-top: 3px;
        }
    }
</style>
