import React from 'react';
import { Table, Tag, Space,Button,Radio,Row,Col, Input, Checkbox } from 'antd';

import { connect } from 'dva';
import { gray } from 'chalk';

import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
import { indexOf } from 'lodash';

import { useIntl,getLocale} from 'umi';

import {
    DownOutlined,
    UpOutlined,
  } from '@ant-design/icons';
var ArrayToPingYin = require('./ArrayToPingYin');   
const CheckboxGroup = Checkbox.Group;
const menuListNormal=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]

function getDotText(arr) {
    if(arr){
        var str = "";
        for (var i = 0; i < arr.length; i++) {
            str += arr[i]+ "，";
        }
        if (str.length > 0) {
            str = str.substr(0, str.length - 1);
        }
        return str;
    }
}


class SelectOptions extends React.Component {

    state = {
     
    };
    constructor(props) {
        super(props);
        const {list, dispatch,checklist} = this.props;

        if(list==null){
            //console.error("组件错误:没有数据导入")            
        }
        if(checklist==null){
            this.state = {
                menuList:ArrayToPingYin.get(list),
                checkedListOptions:list,              
                checkedList: this.props.single!=null?[]:list,
                indeterminate: false,
                checkAll: true,
                checkNone: false,
                resultList:this.props.single!=null?[]:list,
                flag:false,
                lastValue:null
            };
        }else{
            console.log(checklist)
            this.state = {
                menuList:ArrayToPingYin.get(list),
                checkedListOptions:list,              
                checkedList: checklist,
                indeterminate: false,
                checkAll: true,
                checkNone: false,
                resultList:checklist,
                flag:false,
                lastValue:null
            };            
        }
    }
    componentDidUpdate(){
        if(this.props.show!=null){
            if(this.props.show==this.state.flag){
                console.log(this.props.show)
                if(this.props.show==false){
                    this.setState({componetVisible:this.state.selectoptionsOpen,flag:true})  
                }else{
                    this.setState({componetVisible:this.state.selectoptionsPutItAway,flag:false}) 
                }
                console.log(this.state.componetVisible)
            }
        }
    }
    componentDidMount(){
        var name=getLocale();
        //console.log(name)
        if(name=="zh-CN"){
            this.setState({
                selectoptionsOpen : '展开',
                selectoptionsPutItAway :'收起',
                selectoptionsSelected : '已选',
                selectoptionsSelectAll : '全选',
                selectoptionsSelectNone : '全不选',
                selectoptionsAll:'所有',
                selectoptionsSearchCell :'搜索小区',
                selectoptionsAllCell:'全部小区',
                componetVisible:'收起',
               })
        }else{
            this.setState({
                selectoptionsOpen : 'Open',
                selectoptionsPutItAway :'Put It Away',
                selectoptionsSelected : 'Selected',
                selectoptionsSelectAll : 'Select All',
                selectoptionsSelectNone : 'Unselect All',
                selectoptionsAll:'All',
                selectoptionsSearchCell :'Search cell',
                selectoptionsAllCell:'All Cell',
                componetVisible:'Put It Away',
            })
        }
        // console.log("初始化2")
    };


    hideAndexpand = ()=> {
        if(this.state.componetVisible==this.state.selectoptionsOpen){ 
            this.setState({componetVisible:this.state.selectoptionsPutItAway})  
        }else{
            this.setState({componetVisible:this.state.selectoptionsOpen})  
        }
    };
    onChangeValue = (checkedList) => {  
        if(this.props.single!=null){  
            var tmp
            if(checkedList.length>1){
                for(var i=0;i<checkedList.length;i++){
                    if(checkedList[i]!=(this.state.lastValue)[0]){
                        tmp=checkedList[i]
                    }
                }  
                this.setState({ 
                    lastValue:[tmp],
                    checkedList:[tmp],
                    resultList:[tmp]                
                });
            }else{
                tmp=checkedList
                this.setState({ 
                    lastValue:checkedList,
                    checkedList:checkedList,
                    resultList:checkedList                
                });
                
            }
            this.props.onSubmit(tmp[0])
        }else{
            let difference;
            var a=this.state.resultList;
            var b=this.state.checkedListOptions
            let first = a.concat(b).filter(v => a.includes(v) && !b.includes(v))
            a=first
            b=checkedList
            difference=a.concat(b.filter(v => !a.includes(v)))  
            this.setState({ 
            checkedList,
            indeterminate: !!difference.length && difference.length < this.props.list.length,
            checkAll: difference.length ===  this.props.list.length,
            checkNone:difference.length===0,
            resultList:difference
            });        
            this.props.onSubmit(difference) 
      };
        }
    onCheckAllChange = e => {
        this.setState({
          checkedList:this.props.list,
          indeterminate: false,
          checkAll: true,
          checkNone:false,
          resultList:this.props.list,
        });
        this.props.onSubmit(this.props.list) 
      };
      onCheckAllChangeOver = e => {
        this.setState({
          checkedList: [],
          indeterminate:false,
          checkAll: false,
          checkNone:true,
          resultList:[],
        });
        this.props.onSubmit([]) 
      };
      itemSelectAll = (e)=>{
        this.setState({ 
            checkedListOptions:this.props.list,              
            checkedList:this.state.resultList,
        });
      }
      itemSelect = (item,e)=>{
        var arraylist=this.props.list        
        var array=ArrayToPingYin.get(this.props.list)
        var tempAarry=new Array();
        if(array){
            for(var i=0;i<array.length;i++){
                if(array[i]==item){
                    tempAarry.push(arraylist[i]);
                }
            }
        }
        this.setState({ 
            checkedListOptions:tempAarry,              
            checkedList:this.state.resultList,
        });
      };

      getSearchValue=(item,e)=>{
         
          var list=this.props.list
          var  tempAarry=new Array()
          for(var i=0;i<list.length;i++){
              if((list[i].toLowerCase()).indexOf(item.toLowerCase())!=-1){       
                tempAarry.push(list[i]);
              }
          }
          this.setState({ 
            checkedListOptions:tempAarry,
          })       
      }

  render() {
    return (
      <div style={{minWidth:800,marginBottom:16}}>
            {
                    this.state.componetVisible==this.state.selectoptionsOpen?
                    <>
                    <div style={{width:"100%",height:48, position:"relative"}}>
                    <div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?this.state.selectoptionsSelectNone:this.state.selectoptionsSelected}{this.state.resultList.length==this.props.list.length?(this.state.selectoptionsAllCell):(null)}</div>                 
                    <div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}<DownOutlined /></div>                    
                    </div>
                    <div style={{paddingLeft:15,paddingRight:15,paddingBottom:20}}>{this.state.resultList.length==this.props.list.length?null:getDotText(this.state.resultList)}</div>
                    </>
                    :
                    <div style={{width:"100%",backgroundColor:"#eeeeee"}}>
                    <div style={{width:"100%",height:48, position:"relative"}}>
                    <div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?this.state.selectoptionsSelectNone:this.state.selectoptionsSelected}{this.state.resultList.length==this.props.list.length?this.state.selectoptionsAllCell:null}</div>
                    <div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible} <UpOutlined /></div>
                    </div>
                    <div style={{paddingLeft:15,paddingRight:15,paddingBottom:20}}>{this.state.resultList.length==this.props.list.length?null:getDotText(this.state.resultList)}</div>
                    <div style={{width:"100%",backgroundColor:"#eeeeee",userSelect:"none"}}>
                        <div style={{width:"100%",height:40, position:"relative"}}>
                            <div  style={{fontSize:14,position:"absolute"}}>
                            <a style={{marginLeft:16}} onClick={this.itemSelectAll.bind(this)}>{this.state.selectoptionsAll}</a>
                            {
                                menuListNormal.map((item, index) => {                                
                                    if(this.state.menuList.indexOf(item)>-1){
                                        return (<a  key={item} style={{marginLeft:10,userSelect:"none"}} onClick={this.itemSelect.bind(this,item)}>{item}</a>)                                
                                    }else{
                                        return (<a  key={item} style={{marginLeft:10,userSelect:"none"}} disabled>{item}</a>)
                                    }
                                  })
                            }
                            </div>
                            {
                                this.props.single!=null?null:
                                <>
                                    <Checkbox style={{ position:"absolute",right:130}} indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange} checked={this.state.checkAll}>{this.state.selectoptionsSelectAll}</Checkbox>          
                                    <Checkbox style={{ position:"absolute",right:0}} onChange={this.onCheckAllChangeOver}  checked={this.state.checkNone} >{this.state.selectoptionsSelectNone}</Checkbox>
                                </>
                            }                        
                        </div>
                        <div style={{width:"100%",paddingLeft:16,paddingRight:16}}>
                            <div  style={{width:"100%",backgroundColor:"#ffffff",border:"1px solid #cfcfcf",padding:5}}>
                           
                            <Input.Search placeholder={this.state.selectoptionsSearchCell} onSearch={this.getSearchValue.bind(this)} style={{width:200,margin:16}} />
                            <div><h1> </h1></div>
                            <CheckboxGroup
                                options={ this.state.checkedListOptions}
                                value={this.state.checkedList}
                                onChange={this.onChangeValue} style={{marginLeft:16}}/>
                             <div><h1> </h1></div>                                                                      
                            </div>                           
                        </div> 
                        <br/>
                    </div>
                    </div>
            }
          
      </div>
    );
  }


};

export default SelectOptions;
  