<template>
    <div class="lj_card_mtrldef--wrapper">
        <aside class="lj_card_mtrldef--picture">
            <div class="picture-box">
                <i class="iconfont icon-huowu"></i>
            </div>
        </aside>
        <div class="lj_card_mtrldef--content">
            <div class="content-header text-ellipsis-one">
                <slot name="mtrlcode" :data="data">
                    <lj-tag-double type="primary" light size="mini" :value="data.mtrltype"></lj-tag-double>
                    {{ data.mtrlcode }}
                </slot>
            </div>
            <div class="content-main text-ellipsis-one">
                {{ data.mtrlname }}
            </div>
            <div class="content-footer">
                <slot name="mtrlmode" :data="data">
                    <lj-tag-double v-if="data.mtrlmode" light type="primary" value="规格" :doubleValue="data.mtrlmode">
                        <span slot="double" class="tag-double" :class="{'text-ellipsis-one_2': mtrlmodeEllipsis == 1, '.text-ellipsis-two': mtrlmodeEllipsis == 2}">
                            {{ data.mtrlmode }}
                        </span>
                    </lj-tag-double>
                </slot>
            </div>
        </div>
        <aside class="lj_card_mtrldef--info">
            <div class="info-cost">
                <slot name="cost" :data="data">
                    <span class="prefix">￥</span>
                    <span>
                        {{ data.cost }}
                    </span>
                </slot>
            </div>
            <div class="info-qty">
                <slot name="qty" :data="data">
                    <span class="prefix">
                        <i class="iconfont icon-wrong_light"></i>
                    </span>
                    <span>
                        {{ data.qty }}
                    </span>
                    <span class="prefix">
                        {{ data.unit }}
                    </span>
                </slot>
            </div>
        </aside>
    </div>
</template>

<script>
import LjTagDouble from "components/lj-tag-double";

export default {
    name: 'L1appMtrldefItem',

    components: {
        LjTagDouble
    },

    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        mtrlmodeEllipsis: {
            type: Number,
            default: 0
        }
    },
};
</script>

<style lang="less">
.lj_card_mtrldef--wrapper {
    position: relative;
    display: flex;
    padding: 4px 6px;

    &:not(:last-child):after {
        content: '';
        position: absolute;
        right: 16px;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid @light-separator-transparent-secondary;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

    .lj_card_mtrldef--picture {
        display: flex;
        // justify-content: flex-start;
        justify-content: center;
        // align-items: center;
        align-items: flex-start;

        .picture-box {
            // background-color: @light-barkground-elevated-primary;
            // border-radius: 2px;
            // padding: 4px;
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
                font-size: 24px;
                // color: @light-label-secondary;
            }
        }
        .emp-box {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid #fff;
            // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
            box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            // margin-right: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .lj_card_mtrldef--content {
        flex: 1;
        margin: 0 4px;
        overflow: hidden;

        & > div + div {
            margin-top: 2px;
        } 

        .content-header {
            font-size: 12px;
            color: @light-label-secondary;
        }
        .content-main {
            font-size: 14px;
            color: @light-label-primary;
            font-weight: 500;
        }
        .content-footer {
            display: flex;
            color: @light-label-secondary;
            .lj-tag {
                // width: 100%;
                margin-right: 2px;
            }
            // .tag-double {
            //     width: 100%;
            // }
        }
        .lj-tag {
            margin-right: 2px;
        }
    }
    .lj_card_mtrldef--info {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        .info-cost,.info-qty {
            display: inline-flex;
            align-items: flex-end;
            justify-content: flex-end;

            .prefix {
                font-size: 12px;
                margin-left: 2px;
            }
        }
        .info-cost {
            font-size: 16px;
            font-weight: 500;
        }
        .info-qty {
            color: @light-label-secondary;
            .iconfont {
                font-size: 12px;
            }
        }
    }
    .field {
        color: @light-label-tertiary;
        margin-right: 2px;
    }
    .field-value {
        color: @light-label-secondary;
    }
    .field-value-primary {
        color: @light-label-primary;
    }
}
</style>