<template>
    <van-cell 
        class="lj-card__header card-barcode lj-cell-left"
        :title="item.barcode"
        :class="{'ifuse': !item.isuse, 'ifcurrent': barcode == item.barcode}"
    >
        <template #title>
            <slot name="title" :data="item" :clickTitle="handleConfirm">
                <div class="card-barcode__title" @click.stop="handleConfirm">
                    <i class="card-icon iconfont icon-erweima"></i>
                    <span class="card-title">
                        {{ item.barcode }}
                    </span>
                    <i v-if="isLink" class="card-icon-right iconfont icon-right"></i>
                    <van-tag v-if="item.isuse == 0" plain class="isuse-tag">
                        已失效
                    </van-tag>
                </div>
            </slot>
        </template>
        <template #label>
            <slot name="label" :data="item">
                <span class="field-value">{{ item.opdate | shortDateFilter }}</span>
                <span class="field">
                    {{ item.opemp }}
                </span>
            </slot>
        </template>
        <template #default>
            <slot name="default" :data="item">
                <div class="card-default">
                    <span class="field">
                        {{ item.spinoffqty > 0 ? '剩余' : '基数' }}
                    </span>
                    <span class="field-value card-title">
                        {{ item.packqty }}
                    </span>
                    <span class="field">
                        {{ unit }}
                    </span>
                </div>
                <div class="card-default" v-if="item.spinoffqty > 0">
                    <lj-tag-double
                        value="已剪"
                        :doubleValue="item.spinoffqty + unit"
                    >
                    </lj-tag-double>
                </div>
            </slot>
        </template>
    </van-cell>
</template>

<script>
import LjTagDouble from 'components/lj-tag-double';
import {Qrcode} from 'vux';
export default {
    name: 'L1AppBarcodeMxItem',

    components: {
        LjTagDouble,
        Qrcode
    },

    data() {
        return {
            maxVal: 0,
        };
    },

    props: {
        item: Object,
        unit: String,
        barcode: String,
        isLink: {
            type: Boolean,
            default: false
        }
    },

    computed: {
    },

    mounted() {
        
    },

    methods: {
        handleConfirm() {
            if (!this.isLink) return;
            // if (this.loading) return;
            this.$emit("confirm", this.item);
        },
    },
    filters: {
        shortDateFilter(data) {
            return $lj.formatTime(data, '{y}-{m}-{d} {h}:{i}', true)
        }
    },
};
</script>

<style lang="less">
.card-barcode__title {
    display: inline-block;

    .iconfont {
        font-size: 16px;
    }
}
.card-barcode {
    .van-cell__title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .text-line-through {
        text-decoration: line-through;
    }
}

</style>