import React, { useState, useEffect, useRef } 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, DownOutlined, UpOutlined } from '@ant-design/icons';
import { indexOf } from 'lodash';

import { useIntl, getLocale } from 'umi';

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.PureComponent {
  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: list.sort().toString() == checklist.sort().toString() ? false : true, // 多选框 总框的  状态
        checkAll: list.sort().toString() == checklist.sort().toString() ? true : false, // 判断传递来的小区是不是全选
        checkNone: false,
        resultList: checklist,
        flag: false,
        lastValue: null,
      };
    }
  }
  componentDidUpdate(prevProps) {
    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);
      }
      if (this.props.list.length > this.state.checkedList.length) {
      }
      // console.log(prevProps.list);
      // if (this.props.list.length > prevProps.list.length) {
      //   console.log(this.props.list);
      //   console.log(prevProps.list);
      //   // 发生改变重新赋值
      //   this.setState({
      //     menuList: ArrayToPingYin.get(this.props.list),
      //     checkedListOptions: this.props.list,
      //     checkedList: this.props.list,
      //     indeterminate: false,
      //     checkAll: true,
      //     checkNone: false,
      //     resultList: this.props.list,
      //     flag: false,
      //     lastValue: null,
      //   });
      // }
    }
  }
  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: 'Collapse ',
        selectoptionsPutItAway: 'Close ',
        selectoptionsSelected: 'Selected',
        selectoptionsSelectAll: 'Select All',
        selectoptionsSelectNone: 'Unselect All',
        selectoptionsAll: 'All',
        selectoptionsSearchCell: 'Search',
        selectoptionsAllCell: ' All',
        componetVisible: 'Close',
      });
    }
    // 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) => {
    // console.log(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) => {
    // console.log(prevProps.list);
    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) => {
    // console.log(this.props.list);
    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,
    });

    //小区内部搜索框键盘回车事件阻止冒泡
    // e.domEvent.stopPropagation();
  };

  // 小区内部搜索框回车事件
  onPressEnter = (e) => {
    this.getSearchValue(this.state.inputText);
    e.preventDefault();
  };

  //小区内部搜索框输入赋值
  SearchChange = (e) => {
    this.setState({
      inputText: e.target.value,
    });
  };

  render() {
    return (
      <div style={{ marginBottom: 14 }}>
        {/* 是否展开 */}
        {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: 40, position: 'relative' }}>
              <div style={{ position: 'absolute', left: 12, top: 10 }}>
                {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: 14, top: 10, 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: 30, position: 'relative' }}>
                {/* a-z 索引 */}
                <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={index}
                          style={{ marginLeft: 10, userSelect: 'none' }}
                          onClick={this.itemSelect.bind(this, item)}
                        >
                          {item}
                        </a>
                      );
                    } else {
                      return (
                        <a key={index} style={{ marginLeft: 10, userSelect: 'none' }} disabled>
                          {item}
                        </a>
                      );
                    }
                  })}
                </div>
                {/* 全选全不选 */}
                {this.props.single != null ? null : (
                  <>
                    <Checkbox
                      style={{ position: 'absolute', right: 120 }}
                      indeterminate={this.state.indeterminate}
                      onChange={this.onCheckAllChange}
                      checked={this.state.checkAll}
                    >
                      {this.state.selectoptionsSelectAll}
                    </Checkbox>
                    <Checkbox
                      style={{ position: 'absolute', right: 10 }}
                      onChange={this.onCheckAllChangeOver}
                      checked={this.state.checkNone}
                    >
                      {this.state.selectoptionsSelectNone}
                    </Checkbox>
                  </>
                )}
              </div>
              {/* 小区列表 */}
              <div style={{ width: '100%', paddingLeft: 12, paddingRight: 12 }}>
                <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: '10px' }}
                    onPressEnter={this.onPressEnter}
                    onChange={this.SearchChange}
                  />
                  <CheckboxGroup
                    options={this.state.checkedListOptions} // 所有数组
                    value={this.state.checkedList} // 选中的数组
                    onChange={this.onChangeValue}
                    style={{ marginLeft: 10, display: 'block' }}
                  />
                  <div>
                    <h1> </h1>
                  </div>
                </div>
              </div>
              <br />
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default SelectOptions;
