/**
 * 组件列维护
 */
import React, { Component } from 'react';
import { Table, Card, Row, Col, Select, Input, Button, Empty } from 'antd';
import { $http } from '../../containers/config/https';
import store from 'store';
import ColumnConfig from './ColumnConfig';
import ColumnAuthoritysModel from './ColumnAuthoritysModel'
import CommonPagination from 'components/pagination/index';
import iconListVisits from 'assets/images/icon_listvisits.png';
import iconMessages from 'assets/images/icon_messages.png';

class ReactComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: "",
      code: '',
      descripts: '',
      statusData: [],
      configType: "C",
      ComponentData: [],
      columns: [],
      clickRow: {},
      size: 'large',
      page: 1,
      pageSize: 50,
      total: 0,
      typeOfData: {},
    }
  }

  componentDidMount() {
    this.loadColumn();
  }

  onRef = (ref) => {
    this.child = ref;
  }

  ///行背景色
  setRowClassName = (record) => {
    return this.state.clickRow.id == record.id ? 'clickRowStyle' : "";
  }

  onRow = (record) => {
    var that = this
    return {
      onClick: () => {
        that.setState({
          clickRow: record,
        }, () => {
          if (this.child) this.child.reloadData();
        })
      },
      onChange: () => {
        this.setState({ isDoubelClickTab: false })
      }
    };
  }

  handleQueryTypeOfData = () => {
    let data = {
      params: [{}],
    }
    $http.post('urlS', this, {
      code: "01040209",
      data: data,
      success: (res) => {
        if (+res.errorCode === 0) {
          this.setState({
            typeOfData: res.result,
          })
        }
      }
    })
  }

  handleQuery = () => {
    let data = {
      params: [{
        status: this.state.status,
        code: this.state.code,
        descripts: this.state.descripts,
      }],
      pagination: [{
        pageSize: this.state.pageSize,
        currentPage: this.state.page,
      }]
    }
    $http.post('urlDeault', this, {
      code: "01040115",
      data: data,
      success: (res) => {
        if (+res.errorCode === 0) {
          this.setState({
            ComponentData: res.result.componentData,
            total: res.result.total,
            clickRow: {}
          })
        }
      }
    })
  }

  //分页切换
  changePageSize(page, pageSize) {
    this.setState({ pageSize: pageSize, page: current }, () => {
      this.handleQuery();
    });
  }

  onChange(e, pageSize) {
    this.setState({ page: e, pageSize: pageSize }, () => {
      this.handleQuery();
    });
  }

  //查询列头数据
  loadColumn = () => {
    let data = {
      params: [{}]
    }
    $http.post('urlDeault', this, {
      code: "01040116",
      data: data,
      success: (res) => {
        if (+res.errorCode === 0) {
          this.setState({
            columns: res.result.columns,
            statusData: res.result.status,
            status: res.result.statusDefID,
          }, () => {
            this.handleQuery();
            this.handleQueryTypeOfData();
          })
        }
      }
    })
  }

  //组件权限编辑器
  onColumnRef = (ref) => {
    this.columnRef = ref;
  }

  //状态改变
  statusChange = (value, opt) => {
    this.setState({
      status: value,
    }, () => {
      this.handleQuery();
    })
  }

  //文本框改变事件触发
  onInputChange = (name, e) => {
    this.setState({
      page: 1,
      [name]: e.target.value,
    })
  }

  /**
  * @ByShizi: 组件列维护界面优化
  * Create 2022-11-22
  * */
  render() {
    let statusOption = [];
    this.state.statusData.map((item) => {
      statusOption.push(
        <Option key={item.id} value={item.id}>
          {item.descripts}
        </Option>
      )
    })
    return (
      <div className='reactComponent' style={{ height: '100%', width: '100%' }}>
        <ColumnAuthoritysModel
          clientWidth='800px'
          compontName="ComponentList"
          configType="C"
          onRef={this.onColumnRef}
          reloadData={this.loadColumn}
        />
        <Row className="table-body-height">
          <Col span={10}>
            <div style={{ paddingRight: '8px', position: 'relative', height: '100%' }}>
              <Card
                size="small"
                bordered={false}
                title={(
                  <div className="card-title-left-img">
                    <img src={iconListVisits} alt="" />
                    请选择组件
                  </div>
                )}
              >
                <div>
                  <div style={{ height: '32px', width: '100%', marginBottom: 12 }}>
                    状态: <Select
                      value={this.state.status}
                      onChange={this.statusChange}
                      className="common-query-input"
                      style={{ width: '80px' }}
                    >
                      {statusOption}
                    </Select>
                    代码: <Input
                      onChange={this.onInputChange.bind(this, "code")}
                      value={this.state.code}
                      placeholder="输入代码回车查询"
                      onPressEnter={this.handleQuery}
                      className="common-query-input"
                    />
                    描述: <Input
                      onChange={this.onInputChange.bind(this, "descripts")}
                      value={this.state.descripts}
                      onPressEnter={this.handleQuery}
                      className="common-query-input"
                      placeholder="输入描述回车查询"
                    />
                    <Button onClick={this.handleQuery}>查询</Button>
                  </div>
                  <Table
                    bordered
                    pagination={false}
                    style={{ height: store.getState().tableHeight.y + 100 + 'px' }}
                    scroll={{ x: 600, y: store.getState().tableHeight.y + 50 }}
                    onRow={this.onRow}
                    columns={this.state.columns}
                    rowClassName={this.setRowClassName}
                    dataSource={this.state.ComponentData}
                    rowKey={(row) => {
                      return row.id;
                    }}
                    onHeaderRow={column => {
                      return {
                        onDoubleClick: () => {
                          this.columnRef.onOpenModel();
                        }
                      };
                    }
                    }
                  >
                  </Table>
                  <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search={this.state.search}
                    onShowSizeChange={this.changePageSize.bind(this)} complete={false} dataSource={this.state.ComponentData}
                    onChange={this.onChange.bind(this)} />
                </div>
              </Card>
              <div className="common-card-right-split-line" style={{ width: 8 }}></div>
            </div>
          </Col>
          <Col span={14}>
            <Card
              size="small"
              bordered={false}
              title={(
                <div className="card-title-left-img">
                  <img src={iconMessages} alt="" />
                  组件列信息维护
                </div>
              )}
            >
              {this.state.clickRow.code ? <ColumnConfig onRef={this.onRef} typeOfData={this.state.typeOfData} compontName={this.state.clickRow?.code || ''} configType={this.state.configType} /> : (
                <div style={{ paddingTop: '200px' }}>
                  <Empty description="暂无组件信息，请先选择组件" />
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>
    )
  }

}
export default ReactComponent;  