(function() {
    $.jgrid.defaults.styleUI="Bootstrap";
    Vue.component('appointment-table', {
        template: '<div class="mt10">\
                        <div ref="container" style="overflow-x: hidden">\
                            <div class="jqGrid_wrapper">\
                                <table id="table_list"></table>\
                            </div>\
                        </div>\
                        <div id="pager_list">\
                        </div>\
                    </div>',
        props: [],
        data: function() {
            return {
                
            }
        },
        mounted: function() {
            initTable()
            initContainer(this)
            initEventOnBus()
            bindEvents()
        },
        methods: {

        }
    })
    
    function resetWidth(vm) {
        var $searchbar = $("#searchbar")
        $("#table_list").setGridWidth($(window).width());
		$("#table_list").jqGrid("setGridHeight", $(window).height() - $searchbar.height() - 158)
	}
    
    function initContainer(vm) {
        resetWidth(vm)
        window.onresize = function() {
            resetWidth(vm)
        }
    }
    var kwObj = null;
    function initEventOnBus() {
		EventBus.$on('appointment-search', function (arg) {
			kwObj = arg.data
			$("#table_list").jqGrid('setGridParam',{datatype:'json', page: 1, postData: arg.data}).trigger('reloadGrid');
		})
	}
    
    function initTable() {
        $("#table_list").jqGrid({
			url: APIService.server+"/third/guahao/GetRegList",
            datatype:"local",
            mtype: 'GET',
            postData: {
            	
            },
            loadBeforeSend: function(request, grid) {
	        	var userAgent = window.sessionStorage.getItem("LoginUser");
                if(userAgent) {
					userAgent = JSON.parse(userAgent)
					request.setRequestHeader(APIService.agentName, JSON.stringify({
                    	"id":userAgent.id,"uid":userAgent.code,"mobile":userAgent.mobile
                    }));
				}
	        },
            prmNames: {
            	page: "page",
            	rows: "size"
            },
            jsonReader: {
            	root: "data",
            	page: "data.page",
            	records: "data.records",
            	total: "data.total"
            },
			ondblClickRow: function(rowId) {
				var rowData = jQuery(this).getRowData(rowId);
				 console.log('dddddddddddd',rowData)
				var code = rowData.operation;
					code = code.match(/code="(\S*)"/)[1];
				var ssc = rowData.ssc;
				param = {
						code: code,
						ssc: ssc
					}
				top.layer.open({
				    type: 2,
				    title: '预约挂号详情',
				    shadeClose: false,
				    closeBtn: true, //显示关闭按钮
				    shade: 0.8,
				    area: ['800px', "90%"],
				    content: 'customer-service/page/appointment/appointment-detail.html?code='+code+'&param='+encodeURIComponent(JSON.stringify(param))+'&kwObj='+encodeURIComponent(JSON.stringify(kwObj))  //iframe的url
				});
			},
            height:400,
            autowidth:true,
            loadtext: "加载中...",
            loadui: "block",
            shrinkToFit:true,
            rowNum:9,
            rowList:[10,20,30],
            colNames:["居民姓名","身份证号","社保卡号","就诊医院","科室",
                    "医生","就诊时间","预约状态","操作"],
            colModel:[
            {name:"name",index:"name",width:100,sortable:false,align:"center"},
            {name:"idcard",index:"idcard",width:200,sortable:false,align:"center",formatter: function(v) {
            	var len = v.length
				if (len == 18) {
					return v.substr(0, 4) + '**********' + v.substr(14, 4)
				} else if (len == 15) {
					return v.substr(0, 4) + '*******' + v.substr(11, 4)
				}
            }},
            {name:"ssc",index:"ssc",width:150,sortable:false,align:"center"},
            {name:"orgName",index:"orgName",width:200,sortable:false,align:"center"},
            {name:"deptName",index:"deptName",width:150,sortable:false,align:"center"},
            {name:"doctorName",index:"doctorName",width:150,sortable:false,align:"center"},
            {name:"startTime",index:"startTime",width:200,sortable:false,align:"center"},
            {name:"status",index:"status",width:100,sortable:false,align:"center",formatter: function(v) {
            	return ["已取消","","预约成功"][v]
            }},
            {name:"operation",index:"operation",width:200,sortable:false,align:"center",formatter: function(v, row, data) {
            	var btns = '<a class="view-detail-btn operation-icon chakan-icon" data-ssc="' + data.ssc + '"data-code="' + data.code + '" href="javascript:void(0)" style="color: #33c05a;" title="查看"></a>'
            	if(data.status != "0") {
            		btns += '<a class="view-delete-btn ml15 operation-icon shanchu-icon" data-ssc="' + data.ssc + '"data-code="' + data.code + '" href="javascript:void(0)" style="color: #ff3b30;" title="取消"></a>'
            	}
            	return btns
            }},
            ],
            pager:"#pager_list",
            pagerpos: "left"})
    }
    
    function bindEvents() {
    	
    	$(document.body).on("click", ".view-detail-btn", function() {
    		var code = $(this).attr("data-code"),
    			ssc = $(this).attr("data-ssc"),
    			param = {
    				code: code,
    				ssc: ssc
    			}
    		top.layer.open({
			    type: 2,
			    title: '预约挂号详情',
			    shadeClose: false,
			    closeBtn: true, //显示关闭按钮
			    shade: 0.8,
			    area: ['800px', "90%"],
			    content: 'customer-service/page/appointment/appointment-detail.html?code='+code+'&param='+encodeURIComponent(JSON.stringify(param))+'&kwObj='+encodeURIComponent(JSON.stringify(kwObj))  //iframe的url
			});
    	})
    	
    	$(document.body).on("click", ".view-delete-btn", function() {
    		var code = $(this).attr("data-code"),
    			ssc = $(this).attr("data-ssc")
    		var layerid = top.layer.confirm('请与居民确认：<br>一个月内连续取消预约三次，系统会自动将居民年列入黑名单，三个月后才 可再次预约。', {
    			title: '取消预约',
    			closeBtn: true,
			  	btn: ['确定','取消'] //按钮
			}, function(){
			  	
			  	var loadingid = top.layer.load(1, {
				  shade: [0.1,'#fff'] //0.1透明度的白色背景
				});
			  	APIService.cancelOrder({
	    			code: code,
	    			ssc: ssc
	    		}).then(function(res) {
	    			top.layer.close(loadingid)
	    			if(res.status == 200) {
	    				top.layer.close(layerid)
	    				top.showSuccessMessage("取消预约成功!")
	    				EventBus.$emit('appointment-search',{
							data: kwObj
						})
	    			} else {
	    				top.showErrorMessage(res.msg || "取消预约失败!")
	    			}
	    		}).catch(function(e) {
	    			top.layer.close(loadingid)
	    			console && console.error(e)
	    		})
			}, function(){
			  
			});
    	})
    }
    
})()