<template>
    <el-dialog v-if="orderinfo ? mountSheetNum : false" lock-scroll title="电子面单预览" :visible.sync="visible" width="500px"
        :before-close="beforeCloseDialog" center>
        <div v-if="sheetLength == 0">暂无电子面单数据</div>
        <div v-else>
            <el-alert :title="`当前订单下共有 ${sheetLength} 个电子面单`" type="success"> </el-alert>
            <ul class="sheet_list_ui">
                <li v-for="(item, index) in orderinfo.products" style="border:1px solid #f1f1f1 ; overflow: hidden; padding: 10px 0;">
                    <div v-html="item.fmsHtml"></div>
                </li>

            </ul>
        </div>
        <span slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button type="primary" @click="submit" plain>确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    props: {
        visible: {
            type: Boolean,
            value: true
        },
        orderitem: {
            type: Object,
            value: {}
        },
        radio3: 'null',
        orderinfo: {
            type: Object,
            value: {}
        }
    },
    data() {
        return {
            sheetLength: 0,
            sheetList: [

            ],
            checkedList: [],
            orderDetails: {}
        }
    },
    created() {
        // this.mountSheetNum()
        this.visible = false
    },
    methods: {
        // 关闭前
        beforeCloseDialog() {
            this.$emit('closeDialog', false)
            this.sheetLength = 0
        },
        submit() {           
            this.beforeCloseDialog()
        },
        // 

        // 获取面单
        // getSheetList(){
        //     this.$http({
        //     url: this.$http.adornUrl(`/book/buyorderdetail/info/${this.orderId}`),
        //     method: 'get'
        //     // params: this.$http.adornParams({          
        //     //   'orderId': this.orderId,          
        //     // })
        //   }).then(({ data }) => {
        //     if (data && data.code === 0) {         
        //      console.log(data,'电子面单')        
        //     } else {         
        //     }       
        //   })
        // }
        // 计算面单数量
        mountSheetNum() {
            this.orderinfo.products.forEach(element => {
                if (element.fmsHtml != '' && element.fmsHtml != null) {
                    this.sheetLength += 1
                }
            });
        }
    },
    watch: {
        orderinfo: {
            handler(val, oldVal) {
                //console.log(val)
                this.mountSheetNum()
                this.visible = true
            },
            deep: true
        },
    }


}
</script>
<style>
    .ohh div{height: auto !important;}

</style>
<style lang="less" scoped>

.sheet_list_ui {
    padding: 0;
    height: 400px;
    overflow-y: scroll;
    overflow: hidden-y;

    li {
        margin-bottom: 10px;
        display: block;
        overflow: hidden;
        list-style: none;
        padding: 5px;
        position: relative;
        height: 600px;
    }

}
</style>