<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">

            <div class="operate-btns">
                <a v-link="{path:'/abnormalDataAdd'}" href="javascript:" class="fbtn fb-add">新增</a>
            </div>

            <h3 class="current-module">异常数据展示</h3>
        </div>
        <nav class="abnormal-nav clearfix">
            <li v-if="abnormalFlag">
                <a class="abnormal-sort" href="javascript:;">
                    <span>暂无异常</span>
                </a>
            </li>
            <li v-for="abnormal in abnormalListDetail">
                <a class="abnormal-sort" :class="{ 'active':search.guid==abnormal.guid}" href="javascript:;" @click="changeState(search.guid,abnormal.guid)">
                    <span>{{abnormal.title}}&nbsp&nbsp<span style="font-weight: bold">{{abnormal.num}}</span></span>
                </a>
            </li>
        </nav>
        <!--<div class="purchase-plan mt-20">
            <table class="itable itable-bordertop itable-thead-13px">
                <thead>
                    <tr>
                        <th class="w100">序号</th>
                        <th class="w150">关键字</th>
                        <th class="w100">医院</th>
                        <th class="w150">供应商</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="abnormalList.length==0">
                        <td colspan="4">暂无数据！</td>
                    </tr>
                    <tr v-for="list in abnormalList">
                        <td> {{ $index + 1 }} </td>
                        <td class="t-left pr10 pl10">{{list.keyword}}</td>
                        <td class="t-left pr10 pl10">{{list.medname}}</td>
                        <td class="t-left pr10 pl10">{{list.suppliername}}</td>
                    </tr>
                </tbody>
            </table>
            <div class="pagination m-20-0">
                <em class="page">明细条目数【{{ search.total }}】</em>
                <pagination @page-change="getList(true)" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
                </pagination>
            </div>
        </div>-->

        <!--展现 start-->
        <div class="err-modal" id="err-modal">
            <div class="container error-info" :class="{'active':modal.change}">
                <div class="audit-detail error-detail">
                    <span class="close-win inco-size"  @click="operateModal()"></span>
                    <div class="sdiv-9-9b no-border pb0">
                        <p class="t-left error-head">{{errorData.title}}:{{errorData.num}}</p>
                    </div>
                    <div class="status-process wbe-0 clearfix error-row">
                        <table class="itable itable-bordertop itable-thead-13px">
                            <thead>
                            <tr>
                                <th class="w100">序号</th>
                                <th class="w150">关键字</th>
                                <th class="w100">医院</th>
                                <th class="w150">供应商</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-if="abnormalList.length==0">
                                <td colspan="4">暂无数据！</td>
                            </tr>
                            <tr v-for="list in abnormalList">
                                <td> {{ $index + 1 }} </td>
                                <td class="t-left pr10 pl10">{{list.keyword}}</td>
                                <td class="t-left pr10 pl10">{{list.medname}}</td>
                                <td class="t-left pr10 pl10">{{list.suppliername}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pagination m-20-0">
                            <em class="page">明细条目数【{{ search.total }}】</em>
                            <pagination @page-change="getList(true)" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
                            </pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--展现 end-->

    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                abnormalList: [],//异常明细数
                abnormalListDetail:[],//异常标题数
                abnormalFlag:false,
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    guid:''
                },
                errorData:{},
                modal:{
                    show:false,//遮罩层
                    change:false,//消失
                }
            };
        },

        methods: {
            operateModal:function(type){
                var self=this;
                if(type && type == "1"){//打开
                    self.modal.show = true;
                    self.modal.change = true;
                }else{
                    self.modal.change = false;
                    setTimeout(function () {
                        self.modal.show = false;
                    },80)
                }
            },
            getData:function(){
                var self=this;
                Ajax.post('/systemdata/getAbnormaldetail',{}).
                then(function(response){
                    var data = response.data.data;
                    if(response.data.errorCode==0){
                        self.$set("abnormalListDetail", data);

                        var len = self.abnormalListDetail.length;
                        if(self.abnormalListDetail && len){
                            if(len == 0){
                                self.abnormalFlag = true;
                            }
                        }
                    }else{
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }

                })
            },
            getList:function(){
                var self=this;
                Ajax.post('/systemdata/getAbnormallist',self.search).
                then(function(response){
                    var data = response.data.data;
                    if(response.data.errorCode==0){
                        self.search.totalPages=data.totalPages;
                        self.search.total=data.total;
                        self.$set("abnormalList", data.list);

                        self.operateModal(1);
                        self.bindClick();//绑定点击事件
                    }else{
                        self.MessageBox({
                            title: '提示',
                            message: response.data.message,
                            type: 'alert'
                        }, function(action) {});
                    }

                })
            },
            bindClick:function(){
                var self = this;
                $("#err-modal").off('click').bind("click", function(event) {
                    if (event && event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    }
                });

                $("body").off('click').bind("click", function(e) {
                    var $target = $(e.target);
                    if ($target.attr("id") == "app" || !$.contains($(".abnormal-nav")[0],e.target)) {
                        self.operateModal();
                    }
                });
            },
            changeState:function(searchGuid,abnormalGuid){
                var self = this;
                if(searchGuid && abnormalGuid && searchGuid == abnormalGuid){//相同
                    var $errInfo = $('.err-modal').find('.error-info');
                    if($errInfo[0]){
                        if($errInfo.hasClass('active')){//打开
                            self.operateModal();
                        }else{//关闭
                            self.operateModal(1);
                        }
                    }

                }else{//不同
                    self.search.guid = abnormalGuid;
                    self.handleState(self.search.guid);
                }
            },
            handleState:function(val){
                var self = this;
                if(val){
                    var item = self.abnormalListDetail.filter(function(item,index){
                        return item.guid == val;
                    });
                    if(item && item[0]){
                        self.errorData = item[0];
                    }
                    self.search.page = 1;
                    self.getList();
                }
            }
        },
        watch: {


        },
        route: {
            activate: function() {
                this.getData();
            }
        }

    };
</script>
<style scoped>
    .err-modal{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .error-head{
        font-size: 18px;
        font-weight: bold;
    }
    .error-info{
        position: relative;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
        background-color: #fff;
        height: 100%;
        margin-right:0 !important;
        -webkit-transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
        -moz-transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
        -ms-transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
        -o-transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
        transition: width 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
        opacity: 0;
        width: 0;
    }
    .active {
        opacity: 1;
        width: 800px;
    }
    .error-detail{
        margin: 0 !important;
        padding:10px 0 60px;
        border:none !important;
        border-radius: 0 !important;
        width:100%;
        height:100%;
    }
    .error-row{
        padding:2px 20px;
        height: 100%;
        overflow-y: scroll;
    }
    .inco-size{
        width:40px;
        height:40px;
    }
</style>