<template>
    <div class="jc-card-wrapper" @click="$emit('callFuntion',item)">
        <header>
            <van-cell
                class="lj-card__header card-header lj-cell-left"
                :title="item.mtrlname"
                is-link
            >
            </van-cell>
        </header>
        <main>
            <mu-row>
                <mu-col span="3" class="lj-card-secondary-title">厚度：</mu-col>
                <mu-col span="3" class="lj-card-secondary-content">{{item.thickness}}</mu-col>
                <mu-col span="3" class="lj-card-secondary-title">单位：</mu-col>
                <mu-col span="3" class="lj-card-secondary-content">{{item.priceunit}}</mu-col>
                <mu-col span="3" class="lj-card-secondary-title">备注：</mu-col>
                <mu-col span="9" class="lj-card-secondary-content">{{item.dscrp}}</mu-col>
            </mu-row>
        </main>
        <footer class="footer-result" v-if="pricePower">
            <div class="flx-1  flx-start">
                <!-- <lj-tag-double value="部门" type="primary" :doubleValue="item.deptid | enumFilter(deptEnum)"></lj-tag-double> -->
            </div>
            <div class="flx-shrink">
                <span class="subtitle">单价</span>
                ￥{{ item.pricelistprice | moneyFilter }}
            </div>
        </footer>
    </div>
</template>

<script>
    import LjStatusBadge from "components/lj-status-badge";
    import LjTagDouble from "components/lj-tag-double";
    // import EvmxItem from "./event-evmx-item.vue";

    export default {
        name: "mtrldef-selection-item",
        components: {
            LjStatusBadge,
            LjTagDouble,
            // EvmxItem,
        },
        props: {
            item: {
                // 传入数据
                type: Object
            },
        },
        data() {
            return {
                showCount: 0,
                // selectMode: false
                statusDic: {
                    "待审核": {color: "red"},
                    "已审核": {color: "green1"},
                    // "待上诉": {color: "orange"},
                    // "申诉中": {color: "indigo"},
                    // "待裁定": {color: "green1"},
                    // // "待审核": {color: "green1"},
                    // "处理完": {color: "teal"},
                    // "已终止": {color: "gray1"},
                },
                active: 0,
                interval: null, // 计时器
                flagStatus: "",
                pricePower: $lj.checkPower(96)
            }
        },
        created () {
        },
        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">
    @import "~assets/css/lj-style-variable";
    @import "~assets/css/lj-base";

    .jc-card-wrapper {
        position: relative;
        overflow: hidden;
        margin: 10px;
        margin-top: 6px;
        // box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05); // 较为自然投影
        border-radius: 4px;
        background-color: #fff;

        &.card-stop {
            // background: @light-fill-tertiary;
            -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
            filter: grayscale(100%);
        }

        > header {
            position: relative;
            &::after {
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                bottom: 0;
                left: 16px;
                border-bottom: 1px solid @light-separator-transparent-secondary;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
        }
        .evmx-ellipsis {
            margin: 0 auto;
            width: 48px;
            height: 16px;
            background-color: @light-fill-quarternary;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            opacity: 0.6;

            .iconfont {
                font-size: 16px;
                color: @light-label-secondary;
            }
        }
        > main {
            display: flex;
            flex-direction: column;

            // .result-box {
            //     padding: 5px 10px;
            //     position: relative;
                
            //     &::after {
            //         position: absolute;
            //         box-sizing: border-box;
            //         content: ' ';
            //         pointer-events: none;
            //         right: 16px;
            //         top: 0;
            //         left: 16px;
            //         border-top: 1px solid @light-separator-transparent-secondary;
            //         -webkit-transform: scaleY(0.5);
            //         transform: scaleY(0.5);
            //     }

            //     main {
            //         background-color: rgba(255, 69, 58, 0.05);
            //         border-radius: 4px;

            //         .result-header {
            //             text-align: center;
            //             margin-top:5px;
            //             padding:5px 0 5px 0;
            //             color: @light-system-red;
            //             font-size:12px;
            //         }
            //     }
            //     .departmentname {
            //         // display: block;
            //         // font-size: 14px;
            //         color: @light-label-tertiary;
            //     }
            //     .result-dscrp {
            //         margin-left: 16px;
            //         margin-bottom: 4px;
            //         font-size: 12px;
            //         color: @light-label-secondary;
            //         .title {
            //             font-size: 12px;
            //             color: @light-label-tertiary;
            //         }
            //     }
            // }
            .lj-card-secondary-title {
                font-weight: normal;
                color: @light-label-secondary;
            }
        }
        > footer {
            position: relative;
            display: flex;
            padding: 4px 10px;

            .subtitle {
                padding-right: 2px;
                font-size: 12px;
                color: @light-label-tertiary;
            }

            &::before {
                position: absolute;
                box-sizing: border-box;
                content: ' ';
                pointer-events: none;
                right: 16px;
                top: 0;
                left: 16px;
                border-bottom: 1px solid @light-separator-transparent-secondary;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
            // &.footer-result {
            //     .result-header {
            //         flex: 1;
            //         text-align: center;
            //         color: @light-label-secondary;
            //         font-size:12px;
            //     }
            // }

            // .left-part {
            //     flex: 1;
            //     display: inline-block;
            //     margin: auto 0;
            //     // align-items: center;


            //     // .tag-ul {
            //     //     display: inline-block;
                    
            //         .iconfont {
            //             font-size: 12px;
            //             padding-right: 1px;
            //         }
            //     // }
            //     .van-tag {
            //         float: left;
            //     }
            //     .duty-tag {
            //         margin-top: 1px;
            //         margin-bottom: 1px;
            //         background-color: rgba(255, 69, 58, 0.2);
            //         color: @light-system-red;
            //         border: 1px solid rgba(255, 69, 58, 0.2);
            //     }
            //     .duty-tag-item {
            //         margin-left: 2px;
            //         margin-top: 1px;
            //         margin-bottom: 1px;
            //         background-color: @light-barkground-secondary;
            //         border: 1px solid rgba(255, 69, 58, 0.05);
            //         color: @light-system-red;
            //     }
            // }
            // .right-part {
            //     flex-shrink: 0;
            //     display: inline-flex;
            //     align-items: center;
            // }
            .footer-btn {
                width: 80px;
                font-size: 12px;
                // padding-left: 15px;
                // padding-right: 15px;

                &.status-0 {
                    background-color: @light-barkground-secondary;
                    border-color: rgba(0, 122, 255, 0.4);
                    color: @musePrimary;
                    box-shadow: 0px 2px 4px rgba(0, 122, 255, 0.2);
                }
                &.status-1 {
                    background-color: @light-barkground-secondary;
                    border-color: @light-fill-primary;
                    color: @light-label-primary;
                    box-shadow: 0px 2px 4px rgba(120, 120, 128, 0.16);
                }
                &.status-2 {
                    background-color: rgba(88, 86, 214, 0.1);
                    border-color: @light-system-indigo;
                    color: @light-system-indigo;
                    box-shadow: 0px 2px 4px rgba(88, 86, 214, 0.2);
                }
            }
        }
    }

</style>