/*
 * Creater:     shizi
 * CreateDate:  2022/05/25
 * Describe：   折扣审批
 * */

import React, { Component } from 'react';
import { Modal, Row, Col, Input, Button, Select } from 'antd';
import { Util, dayFormat } from 'tools';
import moment from 'moment';
import store from 'store';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel'; // 表格列编辑
import PatientAdmOrderChargesApply from 'pages/Cashier/Report/PatientAdmOrderChargesApply.jsx';
import RangeDatePicker from 'components/rangePicker/index';

class DiscountApproval extends Component {
  constructor(props) {
    super(props);
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData,
      patNo: undefined, // 人员标识
      startDate: moment().subtract(1, 'days').format(dayFormat),  // //开始日期
      endDate: moment().format(dayFormat),  // //结束日期
      columns: [], // 表头数据
      widthTotal: 0,
      tableData: [], // 表格数据
      total: 0, // 总条数
      page: 1, // 当前页
      pageSize: 20, // 当前页条数
      loading: false, // 表格加载状态
      discountShow: false,
      rowData: {},
      isStatusSelectData: [{ id: '', descripts: '全部' }, { id: 'A', descripts: '申请中' }, { id: 'D', descripts: '已审批' }],
      isStatus: 'A'
    };
  }
  componentDidMount() {
    this.getColumnsData();
    this.getTableData();
  }

  // 获取表头数据
  getColumnsData = async () => {
    let { userData } = this.state;
    let columsOperation = {
      title: '操作',
      dataIndex: 'operation',
      fixed: 'right',
      align: "center",
      width: 130,
      render: (text, record) => (
        <span className='span' onClick={(e) => this.handleExamine(record, e)}>审批</span>
      ),
    }
    try {
      let data = {
        params: [{
          compontName: "PriceApply",
          type: 'C',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let arr = res.result.C && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
        return {
          ...item,
          key: index + 1,
          title: <div onDoubleClick={() => this.columnRef.onOpenModel()}>{userData.language == 'EN' ? (item && item.enDescripts ? item.enDescripts : item.title) : item.title}</div>
        }
      }) : '';
      let filterArr = arr.filter(function (item) { return item.display === 'Y' });
      filterArr.push(columsOperation);
      this.setState({
        columns: filterArr,
        widthTotal: res.totalWidth
      })
    } catch (error) {
      console.log(error)
    }
  }

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

  // 获取列表数据
  getTableData = async () => {
    this.setState({ loading: true })
    try {
      let { patNo, pageSize, page, userData, startDate, endDate, isStatus } = this.state;
      let data = {
        params: [{
          hospID: userData.hospID,
          patNo: patNo,
          isStatus: isStatus,
          startDate,
          endDate
        }],
        pagination: [{
          pageSize,
          currentPage: page
        }]
      }
      let res = await React.$asyncPost(this, '05210088', data);
      let tableData = res.result && 'rows' in res.result ? Util.addKeyValueToDataSource(res.result.rows) : [];
      this.setState({ tableData, total: res.result.total, loading: false });
    } catch (error) {
      this.setState({
        tableData: [], total: 0, loading: false
      })
    }
  }

  compilePage = (nPage, nPageSize) => {
    this.setState({ page: nPage, pageSize: nPageSize });
  }

  // 审批
  handleExamine = record => {
    this.setState({ rowData: record, discountShow: true });
  }

  handleStartChange = e => {
    this.setState({ startDate: e })
  }
  handleEndChange = e => {
    this.setState({ endDate: e })
  }
  SelectChange = e => {
    this.setState({ isStatus: e }, () => {
      this.getTableData();
    })
  }
  render() {
    let { patNo, startDate, endDate, columns, widthTotal, tableData, total, page, loading, discountShow, rowData, isStatus } = this.state;
    // 组件所需参数
    const param = {
      // 表头配置
      columns,
      // 表格数据
      data: tableData,
      // 数据总条数
      total,
      // 当前页数
      page,
      pageSize: "20",
      loading,
      // 表格的宽度
      x: widthTotal || 1000,
      y: store.getState().tableHeight.y + 6,
      height: store.getState().tableHeight.y + 56 + 'px'
    }
    return (
      <div>
        <Row className='query-table-header'>
          <Col span={22} className="flex-align-items">
            <RangeDatePicker
              isChange={true}
              label="日期范围："
              format="YYYY-MM-DD"
              width={320}
              startDate={startDate}
              endDate={endDate}
              startChange={this.handleStartChange}
              endChange={this.handleEndChange}
            />
            <span style={{ marginLeft: '12px' }}>人员标识：</span>
            <Input
              placeholder="请输入"
              value={patNo}
              onChange={Util.commonInputChange.bind(this, 'patNo')}
              style={{ width: '150px', marginRight: '12px' }}
              onPressEnter={this.handleQuery}
            />
            状态：<Select
              allowClear
              showSearch
              optionFilterProp="seachprop"
              placeholder="请选择"
              value={isStatus}
              onChange={this.SelectChange}
              style={{ width: '150px', marginRight: '12px' }}
            >
              {React.$SelectOptions(this.state.isStatusSelectData)}
            </Select>
            <Button onClick={this.handleQuery}>查询</Button>
          </Col>
          <Col span={2} style={{ textAlign: 'right' }}>

          </Col>
        </Row>
        <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
        <div style={{ padding: "24px 24px 12px 24px" }} className="table-body-height">
          <PubilcTablePagination param={param} compilePage={this.compilePage} />
        </div>

        {/* 修改表头信息 */}
        <ColumnAuthoritysModel
          clientWidth='800px'
          compontName='PriceApply'
          configType="C"
          onRef={ref => this.columnRef = ref}
          reloadData={this.getColumnsData}
        />

        <Modal
          title="优惠折扣审批"
          className='discount-modal'
          visible={discountShow}
          onCancel={() => this.setState({ discountShow: false })}
          footer={false}
        >
          <PatientAdmOrderChargesApply
            userInfo={rowData}
            onRef={ref => this.discountChild = ref}
            closeModal={() => this.setState({ discountShow: false })}
          />
        </Modal>
      </div>
    )
  }
};
export default DiscountApproval;