/*
 * Create:      柿子
 * CreateDate:  2022/09/14
 * Describe：   react组件 -- 组件数据维护 -- 复制数据
 * */
import React, { Component } from 'react';
import { Modal, Input, Select, Button, message } from 'antd';
import { Util } from 'tools';
import PublicTablePagination from 'pages/common/PubilcTablePagination';

class ComponentDataSelectModal extends Component {
  constructor() {
    super();
    this.state = {
      columns: [],
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 20,
      loading: false,
      tableWidth: 0,
      rowID: '',
      alias: undefined,
      statusID: undefined,
      componentID: '',
      selectedRowKeys: [],
      activeKey: ''
    }
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 修改弹窗状态
  modifyVisible = (visible, componentID, selectedRowKeys, activeKey) => {
    const { columns } = this.state;
    if (visible && !(columns && columns.length > 0)) { // 获取下拉数据
      this.getColumnsData();
    }
    this.setState({ visible, componentID, selectedRowKeys, activeKey }, () => {
      this.state.visible ? this.getTableData() : '';
    })
  }

  // 获取列表表头数据
  getColumnsData = async () => {
    try {
      let data = {
        params: [{
          type: 'C',
          compontName: 'ComponentDataMaintenance',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let filterColumn = res.result && res.result.C && Array.isArray(res.result.C) && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).filter(function (item) { return item.displayFlag !== 'N' }) : [];
      if (filterColumn && filterColumn.length > 0) {
        this.setState({ columns: filterColumn, tableWidth: res.totalWidth });
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 查询
  handleQuery = () => {
    this.setState({ page: 1 }, () => {
      this.getTableData();
    })
  }

  // 获取列表数据
  getTableData = async () => {
    try {
      let { alias, statusID, page, pageSize } = this.state;
      let data = {
        params: [{
          alias,
          status: statusID
        }],
        pagination: [{
          pageSize: pageSize,
          currentPage: page,
          sortColumn: '',
          sortOrder: ''
        }]
      }
      let res = await React.$asyncPost(this, '01040272', data);
      let tableData = res.result && res.result.rows ? Util.addKeyValueToDataSource(res.result.rows) : [];
      this.setState({ tableData, total: res.result?.total || 0, rowID: '' });
    } catch (error) {
      this.setState({ tableData: [], total: 0, rowID: '' });
    }
  }

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowID === '' || (this.state.rowID && (this.state.rowID !== record.id))) {
          this.setState({ rowID: record.id });
        } else {
          this.setState({ rowID: '' });
        }
      }
    }
  }

  // 选中行操作
  setRowClassNamePublic = (record) => {
    return record.id === this.state.rowID ? 'clickRowStyle' : '';
  }

  // 确认
  handleConfirm = async () => {
    try {
      const { rowID, componentID, selectedRowKeys, activeKey } = this.state;
      if (!rowID) {
        message.error('请选择组件进行复制操作');
        return;
      }
      let data = {
        params: [{
          fromComponentID: componentID,
          toComponentID: rowID,
          data: selectedRowKeys,
          type: activeKey
        }]
      }
      let res = await React.$asyncPost(this, '01040291', data);
      message.success(res?.errorMessage || '操作成功');
      this.modifyVisible(false);
    } catch (error) {
      console.log(error);
    }
  }

  render() {
    const { visible, loading, columns, totalWidth, tableData, alias, statusID } = this.state;
    return (
      <Modal
        destroyOnClose
        visible={visible}
        width="1000px"
        title="数据复制到"
        className="table-body-height"
        onCancel={() => this.modifyVisible(false)}
        onOk={this.handleConfirm}
      >
        <div style={{ marginBottom: 12 }}>
          代码/描述：<Input
            value={alias}
            className="common-query-input"
            title="输入内容后可回车检索"
            placeholder="请输入( Enter )"
            style={{width: '300px'}}
            onPressEnter={this.handleQuery}
            onChange={Util.commonInputChange.bind(this, 'alias')}
          />
          状态：<Select
            showSearch
            value={statusID}
            placeholder="请选择"
            optionFilterProp="search"
            className="common-query-input"
            onChange={Util.handleSelectChange.bind(this, 'statusID')}
          >
            <Option value="">全部</Option>
            <Option value="Y">可用</Option>
            <Option value="N">不可用</Option>
          </Select>
          <Button onClick={this.handleQuery}>查询</Button>
        </div>
        <PublicTablePagination
          param={{
            loading,
            columns, // 表头配置
            y: 400,
            height: '450px',
            x: totalWidth, // 表格的宽度
            data: tableData, // 表格数据
          }}
          onClickRowPublic={this.onClickRowPublic}
          setRowClassNamePublic={this.setRowClassNamePublic}
        />
      </Modal>
    )
  }
};

export default ComponentDataSelectModal;