/// <reference path="http://www-app.gdepb.gov.cn/ext-2.2/vswd-ext_2.1.js" />
Ext.namespace('EQPublish');

/**
* 饮用水源表格
*/
EQPublish.RaqiStore = function(config) {
    Ext.applyIf(config, {
        fields: [
		    { name: 'PointID', type: 'string', mapping: "PointID" },
		    { name: 'PointNameCHS', type: 'string', mapping: "PointNameCHS" },
		    { name: 'PI', type: 'float', mapping: "PI" },
		    { name: 'AirLevel', type: 'string', mapping: "AirLevel" },
		    { name: 'Longitude', type: 'float', mapping: "Longitude" },
		    { name: 'Latitude', type: 'float', mapping: "Latitude" }
        ]
    });
    EQPublish.RaqiStore.superclass.constructor.call(this, config);
}
Ext.extend(EQPublish.RaqiStore, Ext.ux.AjaxStore);

EQPublish.RaqiPanel = Ext.extend(Ext.grid.GridPanel, {
	ascxHandlerUrl: '',
	mapChartHandlerUrl: '',
	mapIconHandlerUrl: '',
	initComponent: function() {
		Ext.apply(this, {
			id: 'RaqiPanel',
			chartWindow: null,
			tbar: [
                { id: 'datePicker1', format: 'Y-m-d', xtype: 'datefield', width: 80, value: new Date() },
			    { id: 'btn-3', tooltip: '前一天', icon: 'images/toolbar-left.png', cls: 'x-btn-icon', handler: this.onDayBtn, scope: this },
			    { id: 'btn-4', tooltip: '后一天', icon: 'images/toolbar-right.png', cls: 'x-btn-icon', handler: this.onDayBtn, scope: this },
				'->',
				'-',
				'显示:',
				{ id: 'cb-1', xtype: 'checkbox', checked: true, /*, cls: 'x-btn-text-icon', icon: 'images/chart_pie.gif',*/scope: this/*, tooltip: '<br/><b>按照<b>建设情况</b>在地图上显示图标</b><br/><br/><center><img src="images/Mapicon/chartLegend.png"/></center><br/>' */ },
				{ id: 'la-1', text: '测点', xtype: 'label' },
				{ id: 'cb-2', xtype: 'checkbox', checked: true, /*, cls: 'x-btn-text-icon', icon: 'images/chart_pie.gif',*/scope: this/*, tooltip: '<br/><b>按照设计能力在地图上显示</b><br/><br/><center><img src="images/Mapicon/chartLegend.png"/></center><br/>'*/ },
				{ id: 'la-2', text: '等值线', xtype: 'label' }
            ],
			store: new EQPublish.RaqiStore({
				storeId: 'RaqiStore',
				url: 'handlers/RaqiHandler.ashx'
			}),
			columns: [
				{ header: "监测站", align: 'center', tooltip: '区域空气质量监测站', width: 75, sortable: true, dataIndex: 'PointID', renderer: this.PointRenderer, id: 'PointID' },
				{ header: "RAQI", align: 'center', tooltip: '区域空气质量指数', width: 80, sortable: true, renderer: this.valueRenderer, dataIndex: 'PI' },
				{ header: "等级", align: 'center', tooltip: '区域空气质量等级', sortable: true, width: 40, resizable: false, dataIndex: 'AirLevel', renderer: this.levalRenderer, id: 'AirLevel' },
			    { header: '图表', align: 'center', tooltip: '区域空气质量指数变化图表', width: 40, locked: true, resizable: false, dataIndex: 'PointID', renderer: this.buttonRender, css: 'cursor:pointer;' }
			],
			autoExpandColumn: 'PointID',
//			stripeRows: true,
			height: 478,
			width: 480
			//          autoScroll:true
		});
		EQPublish.RaqiPanel.superclass.initComponent.apply(this, arguments);
		this.addEvents({ 'timechange': true });
	},
	buttonRender: function(val) {
		if (!val) {
			return;
		}
		return '<image src="images/more.png" />';
	},
	OnCheck: function(thisCheckBox, checked) {
		var date = Ext.getCmp('datePicker1').value;
		var isShowPoint = Ext.getCmp('cb-1').checked;
		var isShowIsoline = Ext.getCmp('cb-2').checked;
		this.fireEvent('timechange', this, { Date: date, isShowPoint: isShowPoint, isShowIsoline: isShowIsoline });
	},
	onDayBtn: function(btn, evtobj) {
		var addNum = 1;
		if (btn.id == 'btn-3') {
			addNum = -1;
		}
		var lastDate = Date.parseDate(Ext.getCmp('datePicker1').value, 'Y-m-d');
		var date = lastDate.add(Date.DAY, addNum);
		Ext.getCmp('datePicker1').setValue(date.format('Y-m-d'));
		Ext.getCmp('leftPanel').setTitle(date.format('Y年m月d日') + '粤港珠三角空气质量');
		this.store.load({ queryCondi: { Date: date.format('Y-m-d')} });
		var isShowPoint = Ext.getCmp('cb-1').checked;
		var isShowIsoline = Ext.getCmp('cb-2').checked;
		this.fireEvent('timechange', this, { Date: date.format('Y-m-d'), isShowPoint: isShowPoint, isShowIsoline: isShowIsoline });
	},
	initEvents: function() {
		EQPublish.RaqiPanel.superclass.initEvents.call(this);
		this.on('cellclick', this.btnClick, this);
		this.getStore().on('beforeload', this._beforeLoad, this);
		this.getStore().on('load', this._afterLoad, this);
		this.getStore().on('loadexception', this._loadException, this);
		Ext.getCmp('datePicker1').on('change', this.OnChange, this);
		Ext.getCmp('cb-1').on('check', this.OnCheck, this);
		Ext.getCmp('cb-2').on('check', this.OnCheck, this);
	},
	_afterLoad: function(loader, node, response) {
		this.body.unmask();
	},
	_beforeLoad: function(loader, node, callback) {
		this.body.mask('加载数据...', 'x-mask-loading');
	},
	_loadException: function(loader, node, response) {
		this.body.unmask();
		Ext.MessageBox.show({
			title: '提示：',
			msg: '加载数据出错',
			icon: Ext.MessageBox.ERROR,
			buttons: Ext.MessageBox.OK
		});
	},
	btnClick: function(thisGird, rowIndex, colIndex, evObject) {
		if (colIndex == 3) {
			if (this.chartWindow == null) {
				var endTime = Ext.getCmp('datePicker1').value;
				var startTime = new Date(endTime.replace('-', '/').replace('-', '/')).add('d', -6).format('Y-m-d');
				this.chartWindow = new EQPublish.ChartWindow({
					startTime: startTime,
					endTime: endTime,
					ascxHandlerUrl: ascxHandler,
					chartHandlerUrl: '~/Controls/RaqiChart.ascx'
				});
			}
			var id = thisGird.store.getAt(rowIndex).get('PointID');
			this.chartWindow.setID(id);
			var title = String.format('{0}站区域空气质量指数时间变化图', thisGird.store.getAt(rowIndex).get('PointNameCHS'));
			this.chartWindow.setTitle(title);
			this.chartWindow.show();
		}
	},
	/**
	* 重写afterRender方法，可以在这里加载数据。
	*/
	afterRender: function() {
		EQPublish.RaqiPanel.superclass.afterRender.apply(this, arguments);
		this.initDate();
	},
	initDate: function() {
		Ext.Ajax.request({
			url: 'Handlers/RaqiHandler.ashx',
			params: { op: 'SelectLastDate' },
			success: this.DateSuccessed,
			failure: this.Datefailured,
			scope: this
		});
	},
	DateSuccessed: function(response, options) {
		var result = Ext.decode(response.responseText);
		var date;
		if (result.Success) {
			date = result.Data;
		}
		else {
			Ext.MessageBox.alert('出错', result.ErrorMessage); ;
			return false;
		}
		Ext.getCmp('datePicker1').setValue(date);
		date = Ext.getCmp('datePicker1').value;

		this.store.load({ queryCondi: { Date: date} });
		var isShowPoint = Ext.getCmp('cb-1').checked;
		var isShowIsoline = Ext.getCmp('cb-2').checked;
		this.fireEvent('timechange', this, { Date: date, isShowPoint: isShowPoint, isShowIsoline: isShowIsoline });
	},
	Datefailured: function() {
		alert('初始化失败');
	},
	OnChange: function(thisFiled, newValue, oldValue) {
		//      刷新grid
		var selectDate = newValue;
		//        Ext.getCmp('leftPanel').setTitle(selectDate.format('Y年m月d日')+'粤港珠三角空气质量');
		this.store.load({ queryCondi: { Date: selectDate} });
		var isShowPoint = Ext.getCmp('cb-1').checked;
		var isShowIsoline = Ext.getCmp('cb-2').checked;
		this.fireEvent('timechange', this, { Date: newValue.format('Y-m-d'), isShowPoint: isShowPoint, isShowIsoline: isShowIsoline });
	},
	AddZero: function(num) {
		var result = Number(num);
		if (num < 10) {
			return String.format('0{0}', Number(num));
		}
		return String.format('{0}', Number(num));
	},
	PointRenderer: function(val, metadata, record) {
		metadata.attr = 'style="text-align:left;font-size:12px;vertical-align:middle;"';
		return String.format('{0}', record.data.PointNameCHS);
	},
	FIndexSynPoll: function(val, metadata, record) {
		//        if (c.data.strWaterClassName == '极差') {
		//            b.css = "color:red;"
		//        }
		return record.data.fIndexSynPoll;
	},
	levalRenderer: function(val, metadata, record) {
		var color = '';
		if (val) {
			if (val == 'Ⅰ' || val == 'I') {
				color = raqiClassColor[0];
			}
			if (val == 'Ⅱ' || val == 'II') {
				color = raqiClassColor[1];
			}
			if (val == 'Ⅲ' || val == 'III') {
				color = raqiClassColor[2];
			}
			if (val == 'Ⅳ' || val == 'IV') {
				color = raqiClassColor[3];
			}
			if (val == 'Ⅴ' || val == 'V') {
				color = raqiClassColor[4];
			}
			if (val == 'Ⅵ' || val == 'VI') {
				color = raqiClassColor[5];
			}
		}
		metadata.attr = 'style="text-align:center;font-size:12px;vertical-align:middle;background-color:' + color + '";';
		return val;
	},
	valueRenderer: function(val, metadata, record) {
		metadata.attr = 'style="text-align:center;font-size:14px;vertical-align:middle;"';
		if (val == null || val == '') {
			return '-';
		}
		else {
			return val > 4 ? ' > 4' : val;
		}
	}

});
Ext.reg('RaqiPanel', EQPublish.RaqiPanel);