<template>
    <div class="quotelist_main">
        <div class="quotelist_pic">
            <div class="quote-img-responsive" :class="{'notuse': !item.isuse}">
                <lj-img :md5="item.picmd5"/>
            </div>
        </div>
        <div class="quotelist_info">
            <div class="flexauto">
                <div class="quotelist_info_mtrl">
                    <div class="tag" v-if="item.mtrltype != ''">{{item.mtrltype}}</div>
                    {{item.mtrlname}}
                </div>
                <div class="quotelist_info_mtrlmode">{{item.mtrlmode}}</div>
                <div class="quotelist_info_other">
                    <div class="tag" v-if="item.net_weight > 0">净重{{item.net_weight}}KG</div>
                    <div class="tag" v-if="item.gross_weight">毛重{{item.gross_weight}}KG</div>
                    <div class="tag" v-if="item.mtrlsectype != ''">
                        <template v-if="baseMsg.mtrlsectypename">
                            {{baseMsg.mtrlsectypename}}:
                        </template>
                        {{item.mtrlsectype}}
                    </div>
                    <div class="tag" v-if="item.zxmtrlmode != ''">
                        <template v-if="baseMsg.zxmtrlmodename">
                            {{baseMsg.zxmtrlmodename}}:
                        </template>
                        {{item.zxmtrlmode}}
                    </div>
                    <div class="tag" v-if="item.usermtrlmode != ''">
                        <template v-if="baseMsg.usermtrlmodename">
                            {{baseMsg.usermtrlmodename}}:
                        </template>
                        {{item.usermtrlmode}}
                    </div>
                </div>
                <div class="quotelist_info_other">
                    <div class="tag" v-if="item.storagename && item.storagename.length > 0">仓库:{{item.storagename}}</div>
                    <div class="tag">库存数:{{item.noallocqty}}{{item.unit}}</div>
                    <div class="tag">已开订单数:{{item.kcqty}}</div>
                    <div class="tag">订单已发货数:{{item.xqqty}}</div>
                </div>
            </div>
            <div class="quotelist_info_amt">
                <div class="price">
                    <span>¥</span>{{item.price|moneyFilter}}
                </div>
                <div class="quotelist_info_add">
                    <mu-button small color="primary" @click.stop="handleConfirm">
                        <i class="iconfont icon-ic_add" />加入订单
                    </mu-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import LjImg from "components/lj-img";

    export default {
        name: "product-index-item",
        components: {
            LjImg,
        },
        props: {
            item: {
                // 传入数据
                type: Object
            },
            baseMsg: { // 自定义属性
                type: Object,
                default: {
                    mtrlsectypename: ""
                }
            }
        },
        data() {
            return {}
        },
        methods: {
            handleConfirm() {
                this.$emit('button-click', this.item)
            }
        }
    }
</script>

<style lang="less">
    .quotelist_main {
        position: relative;
        display: flex;
        padding: 2px 0;
        margin-bottom: 5px;
        
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 16px;
            right: 16px;
            height: 0.5px;
            background-color: rgba(0,0,0,0.12);
        }
    }

    .quotelist_pic {
        /* margin-left: 20px; */
        flex: 0 0 120px;
    }

    .quote-img-responsive {
        text-align: center;
        width: 120px;
        height: 120px;
        // margin-top: 10px;
        margin-left: 5px;
    }

    .quote-img-responsive.notuse {
        border: 1px solid @tertiary;
        position: relative;

        &::before{
            content: '失效';
            position: absolute;
            top: 0;
            left: 0;
            padding: 1px 2px;
            background-color: @tertiary;
            font-size: 10px;
            color: #fff;
            border-bottom-right-radius: 2px;
        }
    }

    .quotelist_info {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        flex: 1;
    }

    .flexauto {
        flex: 1;
    }

    .quotelist_info_other {
        display: flex;
        flex-wrap: wrap;
    }

    .quotelist_info_mtrl {
        font-size: 15px;
    }

    .quotelist_info_mtrlmode {
        font-size: 12px;
        color: #9c9c9c
    }

    .quotelist_info_other {
        padding: 5px 0;
    }

    .quotelist_info .tag {
        display: inline-block;
        font-size: 11px;
        margin-right: 2px;
        margin-bottom: 2px;
        border-radius: 4px;
        color: #888;
        background-color: #f8f8f8;
        padding: 0px 5px;
    }

    .quotelist_info_amt {
        display: flex;
        flex-basis: 0;
        align-content: flex-end;
        align-items: center;
    }

    .quotelist_info_amt .price {
        flex-basis: 0;
        color: #ff0000;
        font-weight: bold;
        font-size: 20px;
        margin-top: 5px;
    }

    .quotelist_info_amt .price span {
        font-size: 12px;
        font-weight: 500;
        padding: 0 2px 0 0;
    }

    .quotelist_info_qty {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
        color: #9c9c9c;
        padding: 0 5px 5px 0;
    }

    .quotelist_info_add {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
    }
</style>