<template>
    <view class="order-item">
        <view class="order-item-head">
            <view class="c-font-13 name">{{ data.storeName }}</view>
            <view class="c-font-13 c-color">
                {{ data.status }}
                <view
                    v-if="data.popupInfo"
                    class="m-icon m-icon-wenhao icon-wenhao c-inline-block c-color-gray"
                    style="font-size: 12px;"
                    @tap="dialogShow(data.popupInfo)"
                ></view>
            </view>
        </view>
        <view class="order-item-cont">
            <view class="c-gap-right order-item-cont-left">
                <c-image
                    has-compress
                    :src="data.storeHeadImgUrl"
                    width="100%"
                    height="auto"
                    mode="widthFix"
                    radius="0.05rem"
                    :extra="{column: 5}"
                    :hack-white-stroke="false"
                    :is-round="false"
                />
            </view>
            <view class="order-item-cont-center c-gap-right">
                <view class="font-medium c-color-333 c-line-clamp2">{{ data.name }}</view>
                <view v-if="data.info && data.info.length">
                    <view
                        v-for="(item, index) in data.info"
                        :key="index"
                        class="c-font-normal order-item-cont-info"
                    >
                        <text class="c-color text">{{ item.text }}</text>
                        <text
                            class="value"
                            :style="{
                                color: item.type === 'income' ? '#ff6050' : '#555'
                            }"
                        >{{ item.value }}</text>
                        <text
                            v-if="item.type === 'number'"
                            class="icon"
                            @tap="buttonCopy(item.value)"
                        >
                            <img src="https://med-drug.cdn.bcebos.com/copy.svg" class="icon-copy c-gap-left-small" />
                        </text>
                    </view>
                </view>
            </view>
            <view class="c-tar order-item-cont-right">
                <view>
                    <text class="c-font-13 c-color">¥</text>
                    <text class="c-font-medium c-color">{{ data.price }}</text>
                </view>
                <view class="c-cont-noraml c-color-gray">x{{ data.num }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 订单item
* @author zhangqian51
* @categories 订单组件
* @tags [component]
*/
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
    },
    props: {
        // 业务数据
        data: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan
        };
    },
    methods: {
        // 复制
        buttonCopy(data) {
            this.$api.setClipboardData({
                data: data,
                success: () => {
                    this.$api.showToast({
                        title: '复制成功',
                        icon: 'none'
                    });
                },
                fail: err => {
                    this.$api.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                }
            });
        },
        dialogShow(obj) {
            /**
             * 显示弹窗
             *
             * @event click
             * @property {object} obj 弹窗数据
             */
            this.$emit('dialogShow', obj);
        }
    }
};
</script>

<style lang="less" scoped>
.order-item {
    margin: 0 10px 10px;
    background: #fff;
    border-radius: 8px;

    &-head {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f1f1f1;
        padding: 10px 15px;

        .name {
            color: #888;
        }

        .icon-wenhao {
            position: relative;
            top: -1px;
        }
    }

    &-cont {
        display: flex;
        padding: 15px;

        &-left {
            width: 19.4vw;
        }

        .img {
            width: 100%;
            height: .8rem;
            border-radius: 5px;
        }

        .icon-copy {
            width: 12px;
            height: 12px;
        }

        &-left,
        &-right {
            flex-shrink: 0;
        }

        &-center {
            position: relative;
            max-width: 45vw;
        }

        &-info {
            display: flex;

            .text,
            .icon,
            .value {
                flex-shrink: 0;
            }
        }
    }
}

.font-medium {
    font-family: PingFangSC-Medium;
}
</style>
