<template>
    <mu-list-item button class="spring-item">
        <mu-list-item-content>
            <van-grid :column-num="5" :border="false">
                <van-grid-item>
                    <template #default>
                        <div class="spring-item__value">
                            {{ item.line_diameter }}
                        </div>
                        <div class="spring-item__label">
                            线径MM
                        </div>
                    </template>
                </van-grid-item>
                <van-grid-item>
                    <template #default>
                        <div class="spring-item__value">
                            {{ item.height }}
                        </div>
                        <div class="spring-item__label">
                            高度CM
                        </div>
                    </template>
                </van-grid-item>
                <van-grid-item>
                    <template #default>
                        <div class="spring-item__value">
                            {{ item.caliber }}
                        </div>
                        <div class="spring-item__label">
                            口经CM
                        </div>
                    </template>
                </van-grid-item>
                <van-grid-item>
                    <template #default>
                        <div class="spring-item__value">
                            {{ item.center_diameter }}
                        </div>
                        <div class="spring-item__label">
                            心径CM
                        </div>
                    </template>
                </van-grid-item>
                <van-grid-item>
                    <template #default>
                        <div class="spring-item__value">
                            {{ item.cyclenum }}
                        </div>
                        <div class="spring-item__label">
                            圈数
                        </div>
                    </template>
                </van-grid-item>
            </van-grid>
            <div class="spring-default flx">
                <div>
                    <lj-tag-double :value="item.springtypeid | enumFilter(typeEnum)"></lj-tag-double>
                    <lj-tag-double value="圈数" :doubleValue="item.cyclenum"></lj-tag-double>
                </div>
                <div class="flx-1" style="margin-left: 8px;">
                    <span class="title" v-if="item.dscrp">备注</span>
                    <span class="value" v-if="item.dscrp">{{ item.dscrp }}</span>
                </div>
            </div>
        </mu-list-item-content>
        <mu-list-item-action>
            <mu-button icon>
                <i class="iconfont icon-right"></i>
            </mu-button>
        </mu-list-item-action>
    </mu-list-item>
</template>

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

    export default {
        name: "spring-item",
        components: {
            LjTagDouble
        },
        props: {
            item: {
                // 传入数据
                type: Object
            },
            typeEnum: {
                // 部门枚举
                type: Array,
                default: () => ([])
            },
        },
        data() {
            return {
            }
        },
        methods: {
        },
        filters:{
            enumFilter(data, arr) {
                let name = "";
                arr.forEach(itm => {
                    if (Number(itm.value) == Number(data)) {
                        name = itm.label;
                    }
                });
                return name
            }
        }
    }    
</script>

<style lang="less">
.spring-item {
    height: 75px;
    & + .spring-item {
        border-top: 1px solid @light-separator-transparent;
    }
    &__label {
        font-size: 10px;
        color: @light-label-secondary;
    }
    &__value {
        font-size: 16px;
        font-weight: bold;
        color: @light-label-primary;
    }

    .van-grid-item__content {
        padding-bottom: 4px;
        background: unset;
    }
}

.spring-default {
    padding-top: 4px;
    border-top: 1px solid @light-separator-transparent-secondary;

    .title {
        font-size: 10px;
        color: @light-label-tertiary;
    }
    .value {
        font-size: 10px;
        color: @light-label-secondary;
    }
}
</style>