<!--
@name 业务组件：PDA详情展示
@desc 基于 vant-ui

【必填入参】：
    @param {Object} [data]  - 详情数据
    @param {Object} [property]  - 展示属性名称，
        @example: {
                    base: [{name: "", value: ""},...], // 基础信息展示，name:属性的名称, value: 属性的命名
                    child: [{name: "", child: [{name: "", value: ""},...]}] // 折叠面板展示，标题和属性的集合，其中name:属性的名称, value: 属性的命名
                }

【选填入参】： 
    @param {String} [headertitle] - 详情标题, 默认：""

【父组件控制方法】：
    @function {in} open() - 显示组件
    @function {in} close() - 关闭组件

【插槽】
    @slot [headertitle]  -  详情标题插槽

@time 2020年7月26日 -- design by Yj_cHen
-->
<template>
    <van-popup v-model="show" round class="barcode-info-popup" closeable  get-container="body" position="bottom">
        <van-cell-group>
            <van-cell class="header-title" title-class="barcode-info-header" center>
                <template slot="title">
                    <template v-if="headertitle">
                        {{headertitle}}
                    </template>
                    <slot v-else name="headertitle"></slot>
                </template>
            </van-cell>
        </van-cell-group>
        
        <div class="barcode-info-inner">
            <van-cell
                v-for="(item, index) in property.base"
                :key="index"
                :title="item.name"
                title-class="barcode-info-title"
                value-class="barcode-info-value"
                :value="isDateValue(item.value, data[item.value])"
            />
            <van-collapse v-model="activeNames" class="barcode-info-collapse" :border="false">
                <van-collapse-item
                    v-for="(items, index) in property.child"
                    :key="index"
                    :name="index"
                    class="barcode-collapse-title"
                >
                    <template slot="title">
                        <div class="info-title">
                            <i class="iconfont icon-format-list-bulleted"></i>
                            {{ items.name }}
                        </div>
                    </template>
                    <van-cell
                        v-for="(item, idx) in items.child"
                        :key="idx"
                        :title="item.name"
                        title-class="barcode-info-title"
                        value-class="barcode-info-value"
                        :value="isDateValue(item.value, data[item.value])"
                    />
                </van-collapse-item>
            </van-collapse>
        </div>
    </van-popup>
</template>

<script>
export default {
    name: "ljPdaDetail",
    data() {
        return {
            activeNames: [],
            show: false,
        }
    },
    props: {
        headertitle: {
            type: String,
            default: ""
        },
        data: {
            type: Object,
            default: function() {
                return {}
            }
        },
        property: {
            type: Object,
            default: function() {
                return {
                    base: [],
                    child: []
                }
            }
        }
    },
    computed: {
        isDateValue(pro, val) {
            return function(pro, val) {
                let value = "";
                if (pro.indexOf("date") > -1) {
                    value = $lj.dateformat(val, 'yyyy-MM-dd hh:mm');
                } else if (pro == "storagename") {
                    let scode = this.data.scode && this.data.scode != "" ? this.data.scode + " - " : "";
                    value = val == "" ? "-" : scode + val;
                } else if (pro == "ifpack") {
                    value = val === "" ?
                        "-" :
                        Number(val) == 1? 
                            "通用包件" :
                            "非包件";
                } else if (pro == "ifpackpro") {
                    value = val === "" ?
                        "-" :
                        Number(val) == 1? 
                            "通用包件产品" :
                            "非包件产品";
                } else if (pro == "cusname") {
                    let msg = "";
                    if ($lj.checkPower(1210)) {
                        msg = " - " + this.data.cusname;
                    }
                    value = val == "" ? "-" : this.data.cuscode + msg;
                } else {
                    value = val == "" ? "-" : val;
                }
                return value;
            }
        }
    },
    mounted() {
        // 展开全部集合
        if (this.property.child) {
            for (let i = 0; i < this.property.child.length; i++) {
                this.activeNames.push(i);
            }
        }
    },
    methods: {
        open() {
            this.show = true;
        },
        close() {
            this.show = false;
        }
    }
}
</script>

<style lang="less">
.barcode-info-popup {
    // max-height: 80%;
    max-height: 450px;
    overflow: hidden;
    border-radius: 10px 10px  0 0!important;
    
    .barcode-info-inner {
        max-height: 420px;
        overflow: auto;
    }
    .barcode-info-header {
        font-weight: bold;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }
    .van-cell:not(.header-title) {
        text-align: left;
        padding: 8px 10px;
    }
    .header-title {
        padding: 10px 15px;
    }
    .barcode-info-collapse {
        .van-collapse-item__content {
            padding: 0;
        }
    }
    .barcode-info-title {
        color: #969799;
    }
    .barcode-info-value {
        flex: 2;
        color: #333;
    }
    .barcode-collapse-title {
        text-align: left;
        .info-title {
            display: flex;
            i {
                margin-right: 5px;
            }
        }
    }
    .sign-code {
        font-size: 12px;
    }
}
</style>