var React = require('react');
var DigH5 = require("../../../libs/dig-h5/DigH5.jsx");
var Chart = DigH5.Charts.Chart;
var Table = DigH5.Table.Table;
var Td = DigH5.Table.Td;
var Tr = DigH5.Table.Tr;
var Menu = DigH5.Menu;
var RadioButton = DigH5.RadioButton;
var RadioButtonGroup = DigH5.RadioButtonGroup;
var TabSelector = DigH5.TabSelector;
var DropDownMenu = DigH5.DropDownMenu;
var Toggle = DigH5.Toggle;
var RaisedButton = DigH5.RaisedButton;
var ListItem = DigH5.ListItem;
var FontIcon = DigH5.FontIcon;
var IconButton = DigH5.IconButton;

var Data = React.createClass({

	getInitialState: function() {
		return {
			option: {} 
		};
	},

	componentDidMount: function() {
		option = {
		    title : {
		        text: ''
		    },
		    tooltip : {
		        trigger: 'item'
		    },
		    legend: {
		        data:['意向','预购']
		    },
		    grid: {
		    	borderWidth: 0,
		        x: 0,
		        y: 0,
		        x2: 0,
		        y2: 0
		    },
		    toolbox: {
		        show : false,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : ['周一','周二','周三','周四','周五','周六','周日'],
		            splitLine:{show:false}
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            splitLine:{show:false}
		        }
		    ],
		    series : [
		        {
		            name:'预购',
		            type:'line',
		            smooth:true,
		            itemStyle: {normal: {areaStyle: {type: 'default'}, color: "rgb(103, 58, 183)"}},
		            data:[30, 182, 434, 791, 390, 30, 10]
		        },
		        {
		            name:'意向',
		            type:'line',
		            smooth:true,
		            itemStyle: {normal: {areaStyle: {type: 'default'}}},
		            data:[1320, 1132, 601, 234, 120, 90, 20]
		        }
		    ]
		};
		this.setState( {option: option} );
	},

  render: function() {

  	var menuItems = [
  	  { payload: 'TextFieldExample', text: '文本框'},
  	  { payload: 'ButtonExample', text: '按钮'},
  	  { payload: 'IconButtonExample', text: '图标按钮'},
  	  { payload: 'IconsExample', text: '图标'},
  	  { payload: 'DropDownMenuExample', text: '下拉菜单'},
  	  { payload: 'SwitchExample', text: '开关'},
  	  { payload: 'TabsExample', text: 'Tabs'},
  	  { payload: 'TabSelectorExample', text: 'TabSelector'},
  	];

  	var dropItems = [
  	  { payload: '1', text: '其他曲线' },
  	  { payload: '2', text: '其他曲线1' },
  	  { payload: '3', text: '其他曲线2' },
  	  { payload: '4', text: '其他曲线3' },
  	  { payload: '5', text: '其他曲线4' }
  	];

    var sortItems = [
      { payload: '1', text: 'State1' },
      { payload: '2', text: 'State2' },
      { payload: '3', text: 'State3' },
      { payload: '4', text: 'State4' }
    ];

  	var data = [
  	   { text: '日', value: 'day' },
  	   { text: '周', value: 'week' },
  	   { text: '月', value: 'month' },
  	   { text: '年', value: 'yeawr' }
  	];

    var imgElement = (<img src="./images/1.png" className="dig-avatar" />);
    var iconRightElement = (<IconButton iconClassName="bingo-dig-icons-686" />);

    return (
      <div className="data-page">
        <div className="data-page-content">
        	<div className="data-page-tool">
        		<div className="data-page-tool-left">
	        		<span className="text-title">曲线名称：</span>
	        		<span className="text-main">某楼盘销售情况</span>
	        		<RadioButtonGroup  name="shipSpeed"
	        		  defaultSelected="not_light">
	        		    <RadioButton
	        		      id="radioButtonId1"
	        		      value="light"
	        		      label="筛选条件1"/>
	        		    <RadioButton
	        		      id="radioButtonId2"
	        		      value="not_light"
	        		      label="筛选条件2"/>
	        		</RadioButtonGroup>
	        	</div>
        		<div className="data-page-tool-right">
        			<DropDownMenu menuItems={dropItems} zDepth={0} mini={true}/>
        		</div>
        	</div>
        	<div className="dig-row data-page-chart">
	        	<div className="dig-cols-9 chart-container">  	
	        		<Chart option={this.state.option}/>
	        	</div>
	        	<div className="dig-cols-3 data-page-selector">  	
					    <TabSelector data={data} selected='week'/>
	        	</div>
        	</div>
          <div className="data-page-bottom dig-row">
          	<div className="data-page-table dig-cols-8">
              <div className="data-page-table-selector">
                <span className="text-sort">排序方式</span>
                <div className="sort-right">
                  <div className="dropdown">
                    <DropDownMenu menuItems={sortItems} zDepth={0} mini={true}/>
                  </div>
                  <div>
                    <RaisedButton label="应用" />
                  </div>
                </div>
              </div>
              <div>
            		<Table border={false} headerBg={false} columnWidth={[120,140,160,130,110]}>
            		    <Tr>
            		        <Td column="序号">#1000</Td>
            		        <Td column="日期">20150423</Td>
            		        <Td column="事件">重大服务事件</Td>
            		        <Td column="处理结果">已解决</Td>
            		        <Td column="开关状态">
            		        	<Toggle id="toggleId" name="toggleName" value="toggle"
            		        	    label=""  defaultToggled={false}/>
            		        </Td>
            		    </Tr>
            		    <Tr>
            		        <Td column="序号">#1000</Td>
            		        <Td column="日期">20150423</Td>
            		        <Td column="事件">重大服务事件</Td>
            		        <Td column="处理结果">已解决</Td>
            		        <Td column="开关状态">
            		        	<Toggle id="toggleId1" name="toggleName1" value="toggle1"
            		        	    label=""  defaultToggled={true}/>
            		        </Td>
            		    </Tr>
            		    <Tr>
            		        <Td column="序号">#1000</Td>
            		        <Td column="日期">20150423</Td>
            		        <Td column="事件">重大服务事件</Td>
            		        <Td column="处理结果">已解决</Td>
            		        <Td column="开关状态">
            		        	<Toggle id="toggleId2" name="toggleName2" value="toggle2"
            		        	    label=""  defaultToggled={false}/>
            		        </Td>
            		    </Tr>
            		    <Tr>
            		        <Td column="序号">#1000</Td>
            		        <Td column="日期">20150423</Td>
            		        <Td column="事件">重大服务事件</Td>
            		        <Td column="处理结果">已解决</Td>
            		        <Td column="开关状态">
            		        	<Toggle id="toggleId3" name="toggleName3" value="toggle3"
            		        	    label=""  defaultToggled={false}/>
            		        </Td>
            		    </Tr>
            		    <Tr>
            		        <Td column="序号">#1000</Td>
            		        <Td column="日期">20150423</Td>
            		        <Td column="事件">重大服务事件</Td>
            		        <Td column="处理结果">已解决</Td>
            		        <Td column="开关状态">
            		        	<Toggle id="toggleId4" name="toggleName4" value="toggle4" 
            		        		label=""  defaultToggled={true}/>
            		        </Td>
            		    </Tr>
            		</Table>
              </div>
            </div>
            <div className="data-page-date dig-cols-4">
              <div className="dig-row">
                <div className="date-title dig-cols-2">
                  <div className="date-title-num">1</div>
                  <div>周日</div>
                </div>
                <div className="date-border-min dig-cols-10">
                  <div className="date-border-text">Glants Game</div>
                  <div className="date-border-text">7-10p</div>
                </div>
              </div>

              <div className="divider margin"></div>
              <div className="week-title">
                <div>本周(四月2-8)</div>
              </div>

              <div className="dig-row">
                <div className="date-title dig-cols-2">
                  <div className="date-title-num red">2</div>
                  <div>周一</div>
                </div>
                <div className="dig-cols-10">
                  <div className="date-border-normal">
                    <div className="date-border-text">Schedule haircut</div>
                  </div>
                  <div className="date-border-normal">
                    <div className="date-border-text">Make dinner reservations</div>
                  </div>
                  <div className="divider red">
                    <div className="round"/>
                  </div>
                  <div className="date-border-large red">
                    <div className="large-text">
                      <div className="date-border-text">Weekly Team Meeting</div>
                      <div className="date-border-text">9-10a</div>
                      <div className="date-border-text">6F, Cumulus</div>
                    </div>
                    <img src="./images/1.png" className="dig-avatar" />
                  </div>
                  <div className="date-border-large green">
                    <div className="date-border-text">Lunch With jeese & Andy</div>
                    <div className="date-border-text">12-1p</div>
                    <div className="date-border-text">Delfina</div>
                  </div>
                </div>
              </div>
            </div>
        	</div>
        </div>
        <div className="data-page-list">
          <ListItem
            type='TwoLine'
            leftElement = {imgElement}
            rightElement = {iconRightElement}
            primaryText='Min Li Chan'
            secondaryText='Brunch this weekend?' />
          <ListItem
            type='TwoLine'
            leftElement = {imgElement}
            rightElement = {iconRightElement}
            primaryText='Min Li Chan'
            secondaryText='Brunch this weekend?' />
            <ListItem
              type='TwoLine'
              leftElement = {imgElement}
              rightElement = {iconRightElement}
              primaryText='Min Li Chan'
              secondaryText='Brunch this weekend?' />
            <ListItem
              type='TwoLine'
              leftElement = {imgElement}
              rightElement = {iconRightElement}
              primaryText='Min Li Chan'
              secondaryText='Brunch this weekend?' />
              <ListItem
                type='TwoLine'
                leftElement = {imgElement}
                rightElement = {iconRightElement}
                primaryText='Min Li Chan'
                secondaryText='Brunch this weekend?' />
              <ListItem
                type='TwoLine'
                leftElement = {imgElement}
                rightElement = {iconRightElement}
                primaryText='Min Li Chan'
                secondaryText='Brunch this weekend?'/>
              <ListItem
                type='TwoLine'
                leftElement = {imgElement}
                rightElement = {iconRightElement}
                primaryText='Min Li Chan'
                secondaryText='Brunch this weekend?' />
              <ListItem
                type='TwoLine'
                leftElement = {imgElement}
                rightElement = {iconRightElement}
                primaryText='Min Li Chan'
                secondaryText='Brunch this weekend?'/>
        </div>
      </div>
    );
  }

});

module.exports = Data;