/*
 * Create:      柿子
 * CreateDate:  2022/07/19
 * Describe：   验光室队列 - 查看队列
 * */
import React, { Component } from 'react';
import { Modal, Button, Radio, Tooltip } from 'antd';
import { $http } from 'containers/config/https';
import GetPatientInformation from './GetPatientInformation';
import PublicTablePagination from 'pages/common/PubilcTablePagination.jsx';

class OptometryRoomQueue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      totalWidth: 950,
      columns: [],
      tableData: [],
      rowData: {},
      statusSelectData: [],
      radioValue: '',
    };
    this.staticColumns = [{
      key: 1,
      title: '检查序号',
      dataIndex: 'appNo',
      align: 'center',
      width: 80
    }, {
      key: 2,
      title: '病人ID',
      dataIndex: 'patNo',
      align: 'center',
      width: 150
    }, {
      key: 3,
      title: '姓名',
      dataIndex: 'patName',
      align: 'center',
      width: 100
    }, {
      key: 4,
      title: '性别',
      dataIndex: 'patSexDesc',
      align: 'center',
      width: 100
    }, {
      key: 5,
      title: '年龄',
      dataIndex: 'patAge',
      align: 'center',
      width: 100
    }, {
      key: 6,
      title: '门诊诊断',
      dataIndex: 'admDiag',
      align: 'center',
      width: 100
    }, {
      key: 7,
      title: '开单科室',
      dataIndex: 'ordLocDesc',
      align: 'center',
      width: 100
    }, {
      key: 8,
      title: '开单医生',
      dataIndex: 'ordDoctor',
      align: 'center',
      width: 100
    }, {
      key: 9,
      title: '类型',
      dataIndex: 'orderType',
      align: 'center',
      width: 100
    }, {
      key: 10,
      title: '状态',
      dataIndex: 'queStatusDesc',
      align: 'center',
      width: 100
    }]
  }

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

  // 默认
  getDefaultData = () => {
    let { rowData } = this.state;
    let data = {
      params: [{
        areaRoomID: rowData?.areaRoomID || '',
      }]
    }
    $http.post('urlS', this, {
      code: '17010008',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            statusSelectData: res.result?.statusData || [],
            radioValue: res.result?.defaultStatusCode || [],
          }, () => {
            this.handleQuery();
          })
        } else {
          this.handleQuery();
        }
      }
    })
  }

  // 获取表头数据
  getColumnsData = () => {
    let data = {
      params: [{
        compontName: 'OptometryRoomQueue',
        type: 'C',
      }]
    }
    $http.post('urlS', this, {
      code: '01040073',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let columns = res.result && 'C' in res.result && Array.isArray(res.result.C) ? res.result.C : [];
          if (columns && columns.length > 0) {
            columns = columns.map(item => {
              return {
                ...item,
                render: (text, record) => {
                  return (
                    <Tooltip title={text}>
                      <span className='ellipsis' style={{ width: '100%', display: 'block' }}>{text}</span>
                    </Tooltip>
                  )
                },
              }
            })
            this.setState({
              columns,
              totalWidth: res.totalWidth
            })
          }
        }
      }
    })
  }

  // 查询
  handleQuery = () => {
    this.setState({ loading: true });
    let { rowData, radioValue, statusSelectData } = this.state;
    let patID = this.patientRef && this.patientRef.getPatientID();
    let data = {
      params: [{
        // patID,
        patInfo: patID,
        areaRoomID: rowData?.areaRoomID || '',
        statusCode: radioValue
      }],
    }
    $http.post('urlS', this, {
      code: '17010009',
      data: data,
      success: function (res) {
        this.setState({ loading: false })
        if (+res.errorCode === 0) {
          for (var i = 0; i < statusSelectData.length; i++) {
            if (statusSelectData[i].statusCode === 'C') { // 未完成
              statusSelectData[i].statusCount === res.result?.unFinCount || 0;
            } else if (statusSelectData[i].statusCode === 'F') { // 已完成
              statusSelectData[i].statusCount === res.result?.finCount || 0;
            }
          }
          this.setState({ tableData: res.result?.rows || [], statusSelectData })
        }
      },
      error: function () {
        this.setState({ loading: false })
      }
    })
  }

  // 修改弹窗状态
  modifyVisible = (visible, rowData) => {
    this.setState({ visible, rowData }, () => {
      let { columns } = this.state;
      if (this.state.visible) {
        this.getDefaultData();
        columns && columns.length > 0 ? '' : this.getColumnsData();
      }
    })
  }

  // 修改按钮状态
  handleRadioChange = e => {
    this.setState({ radioValue: e.target.value }, () => {
      this.handleQuery();
    })
  }

  render() {
    let { cardType, cardSelectData } = this.props;
    let { visible, statusSelectData, radioValue, columns, loading, totalWidth, tableData } = this.state;

    return (
      <Modal
        width="66vw"
        title="验光室队列"
        footer={null}
        visible={visible}
        destroyOnClose={true}
        onCancel={() => this.modifyVisible(false)}
      >
        <div style={{ marginBottom: 12 }}>
          <GetPatientInformation queryType="fuzzySearch" cardType={cardType} cardSelectData={cardSelectData} onRef={ref => this.patientRef = ref} handleQuery={this.handleQuery} />
          <Button type="primary" onClick={this.handleQuery}>查询</Button>
          <Radio.Group
            value={radioValue}
            buttonStyle="solid"
            style={{ float: 'right' }}
            onChange={this.handleRadioChange}
          >
            {statusSelectData && statusSelectData.map((item, index) => {
              return (
                <Radio.Button key={index} value={item.statusCode}>{item.statusDesc + '（' + item.statusCount + '）'}</Radio.Button>
              )
            })}
          </Radio.Group>
        </div>
        <PublicTablePagination
          param={{
            loading,
            y: 400,
            height: 450,
            rowKey: 'id',
            x: totalWidth,
            data: tableData,
            componentName: 'OptometryRoomQueue',
            columns: columns && columns.length > 0 ? columns : this.staticColumns,
          }}
          getColumns={this.getColumnsData}
        />
      </Modal>
    )
  }
};

export default OptometryRoomQueue;
