<template>
    <div>
        <crumbs title="数据统计" style="min-width: 980px">
        </crumbs>
        <div class="contents">
            <div class="contentBox">
                <div class="headerBox">
                    <span v-show="updateTime">当前数据更新时间：{{updateTime}}</span>
                    <el-button
                        class="btn"
                        size="mini"
                        type="warning"
                        @click="updateData">
                        更新数据
                    </el-button>
                </div>
                
                <el-table
                :data="list"
                :span-method="objectSpanMethod"
                border
                style="width: 100%">
              
                   
                    <el-table-column
                        :resizable = "false"
                        prop="moduleName"
                        width="180">
                        
                    </el-table-column>
                    <el-table-column
                        :resizable = "false"
                        label="朗通医疗医学数据"
                        prop="itemName"
                        >
                    </el-table-column>
                
                    <el-table-column
                        :resizable = "false"
                        prop="count"
                        label="数量">
                    </el-table-column>
                </el-table>

            </div>
            
        </div>
    </div>
</template>
<script>
import api from '@api/medicalStatistics.js';
export default {
    name: 'MedicalStatistics',
    data() {
        return {
           list: [],
           updateTime: undefined
        }
    },
    created() {
        this.getStatisticsCount()
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.flag) {
                    return {
                    rowspan: row.rowspan,
                    colspan: 1
                    };
                } else {
                    return {
                    rowspan: 0,
                    colspan: 0
                    };
                }
            }
            
        },
        updateData() {
            this.getStatisticsCount()
        },
        getStatisticsCount(){
           
            return api.statisticsCount().then((res)=>{
                
                if(+res.data.code === 0) {
                    const data = res.data.data
                     this.list = []
                    for(let dataItem in data) {
                        if(data[dataItem].items) {
                            data[dataItem].items[0].flag = true
                            data[dataItem].items[0].rowspan =   data[dataItem].items.length
                            this.list = [...this.list, ...data[dataItem].items]
                        }
                        
                    }
                    this.updateTime = data.gmtOperate
                } else {
                    this.warning(res.data.msg)
                }
                })
        },
        warning(msg,type){
            this.$message({
                showClose: true,
                message:msg,
                type:type||'warning'
            })
        }
    }
}
</script>
<style scoped lang="less">
/deep/.el-table_1_column_1_column_2.is-leaf{
    display: none;
}
/deep/.el-table_1_column_1_column_3.is-leaf{
    display: none;
}
/deep/.el-table {
    min-width: 500px;
}
/deep/.el-table th {
    background: rgba(239,243,249,1);
}
.contentBox {
    background: #fff;
    padding: 80px 70px 30px;
    position: relative;
}
.headerBox {
    position: absolute;
    text-align: right;
    height: 50px;
    line-height: 50px;
    top: 0;
    right: 0;
    width: 100%;
}
.btn {
    margin: 0 50px;
    height: 40px;
}

</style>