/*
 * Creater:     shizi
 * CreateDate:  2022/05/25
 * Describe：   收费项列表
 * */
import React, { Component } from 'react';
import { Modal, Input, Button } from 'antd';
import { Util, dayFormat } from 'tools';
import moment from 'moment';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';

class ListOfChargeItems extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      alias: undefined, // 代码/描述
      columns: [],
      tableData: [],
      totalwidth: 1280,
      total: 0,
      page: 1,
      pageSize: 20,
      loading: false,
      selectedRowKeys: [],
      selectedRows: [],
      pcInput: undefined, // 物价代码/名称
    };
    this.staticColumns = [{
      title: '收费项代码',
      dataIndex: 'chargeCode',
      width: '150px',
      align: "center",
    }, {
      title: '收费项描述',
      dataIndex: 'chargeDesc',
      width: '150px',
      align: "center",
    }, {
      title: '价格（元）',
      dataIndex: 'chargePrice',
      width: '100px',
      align: "center",
    }, {
      title: '费别',
      dataIndex: 'chargeAdmReasonDesc',
      width: '80px',
      align: "center",
    }, {
      title: '单位',
      dataIndex: 'chargeUnitDesc',
      width: '100px',
      align: "center",
    }, {
      title: '规格',
      dataIndex: 'chargeSpec',
      width: '100px',
      align: "center",
    }, {
      title: '厂家',
      dataIndex: 'chargeManfID',
      width: '150px',
      align: "center",
    }, {
      title: '备注',
      dataIndex: 'chargeRemarks',
      width: '150px',
      align: "center",
    }, {
      title: '地区',
      dataIndex: 'chargeRegionTypeDesc',
      width: '150px',
      align: "center",
    }]
  }

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

  // 获取列表columns
  getTableColumns = async () => {
    try {
      let data = {
        params: [{
          type: 'C',
          compontName: 'ListOfChargeItems',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result?.C || [];
      this.setState({
        columns,
        totalWidth: res.totalWidth
      })
    } catch (error) {
      console.log(error)
    }
  }

  // 关闭弹窗
  modifyVisible = (visible) => {
    const { columns } = this.state;
    if (visible && !(columns && columns.length > 0)) {
      this.getTableColumns();
    }
    // if (visible && !(tableData && tableData.length > 0)) { // 默认不查询
    //   this.getTableData();
    // }
    this.setState({ visible })
  }

  // 关闭弹窗
  handleCancel = () => {
    // let fieldsValue = this.getFieldsValue(); // 关闭弹窗的时候记录表单输入的值
    // this.props.recordFormInput && this.props.recordFormInput(fieldsValue);
    this.modifyVisible(false);
  }

  // 确认
  handleConfirm = () => {
    let { selectedRows } = this.state;
    this.props.handleAdd && this.props.handleAdd(selectedRows);
    this.setState({ selectedRowKeys: [], selectedRows: [] }, () => {
      this.modifyVisible(false);
    });
  }

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

  // 提供修改page和pageSize的回调函数
  compilePage = (page, pageSize) => {
    // 修改page，或者pageSize
    this.setState({ page: page, pageSize: pageSize }, () => {
      // 重新调用查询方法
      this.getTableData();
    })
  }

  // 请求列表数据
  getTableData = async (id) => {
    this.setState({ loading: true });
    try {
      let { alias, pageSize, page, pcInput } = this.state;
      let data = {
        params: [{
          alias,
          pcInput: pcInput, // 物价代码描述
          statusID: 'U',
        }],
        pagination: [{
          pageSize,
          currentPage: page
        }]
      }
      let res = await React.$asyncPost(this, '02020387', data);
      let tableData = res.result && 'rows' in res.result ? res.result.rows : [];
      for (var i = 0; i < tableData.length; i++) {
        let partLinkChargeNum = tableData[i] && 'partLinkChargeNum' in tableData[i] && tableData[i].partLinkChargeNum ? tableData[i].partLinkChargeNum : 1;
        let chargePrice = tableData[i] && 'chargePrice' in tableData[i] && tableData[i].chargePrice ? tableData[i].chargePrice : 0;
        tableData[i].key = tableData[i].chargeID;
        tableData[i].statusFlag = 'C'; // statusFlag: A - 正在用  B - 已停用  C - 将启用
        tableData[i].startDate = moment().add(1, 'days').format(dayFormat); // 生效日期
        tableData[i].partLinkChargeNum = partLinkChargeNum; // 部位关联收费项数量
        tableData[i].chargeNum = tableData[i] && 'chargeNum' in tableData[i] && tableData[i].chargeNum ? tableData[i].chargeNum : 1; // 计费数量
        tableData[i].totalMoney = ((partLinkChargeNum * 1000) * (chargePrice * 1000)) / 1000000; // 部位关联收费项金额
      }
      this.setState({ tableData, total: res.result.total, loading: false, selectedRowKeys: [], selectedRows: [] });
    } catch (error) {
      this.setState({
        tableData: [], total: 0, loading: false
      })
    }
  }

  handleRowSelectionChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys,
      selectedRows
    })
  }

  render() {
    let { visible, alias, columns, tableData, totalwidth, total, page, loading, selectedRowKeys, selectedRows, pcInput } = this.state;
    // 组件所需参数
    const param = {
      // 表头配置
      columns: columns && columns.length > 0 ? columns : this.staticColumns,
      // 表格数据
      data: tableData,
      // 数据总条数
      total,
      // 当前页数
      page,
      pageSize: '20',
      loading,
      // 表格的宽度
      x: totalwidth,
      y: 450,
      height: '500px',
      componentName: 'ListOfChargeItems',
      isRowSelection: true,
    }

    // 选择行操作
    let rowSelection = {
      selectedRowKeys,
      selectedRows,
      onChange: this.handleRowSelectionChange,
    };
    return (
      <Modal
        title="添加收费项"
        visible={visible}
        onCancel={this.handleCancel}
        destroyOnClose={true}
        width="80vw"
        onOk={this.handleConfirm}
        okText="确认添加"
        okButtonProps={{
          disabled: selectedRowKeys && selectedRowKeys.length > 0 ? false : true
        }}
      >
        <div className='table-body-height'>
          <div style={{ marginBottom: '12px' }}>
            代码/描述：
            <Input
              style={{ width: '250px', marginRight: '12px' }}
              placeholder="输入收费项代码/描述回车检索"
              value={alias}
              onChange={Util.commonInputChange.bind(this, 'alias')}
              onPressEnter={this.handleQuery}
            />
            物价信息：<Input
              title="输入内容后可回车检索"
              placeholder="输入物价代码/描述回车检索"
              value={pcInput}
              onChange={Util.commonInputChange.bind(this, 'pcInput')}
              onPressEnter={this.handleQuery}
              style={{ width: '250px', marginRight: '12px' }}
            />
            <Button onClick={this.handleQuery}>查询</Button>
          </div>
          <PubilcTablePagination
            param={param}
            compilePage={this.compilePage}
            rowSelectionPublic={rowSelection}
            getCloumns={this.getTableColumns}
          />
        </div>
      </Modal>
    )
  }
};

export default ListOfChargeItems;