/*
 * Creator:     ML
 * CreatDate:   2019-10-28
 * descripts：  设备维护表
 * */
import React from 'react';
import { Form, Input, Select, Button, message, Row, Icon, Divider, Popconfirm, DatePicker, Table, Col, Card, } from 'antd';
import { $http } from 'containers/config/https';
import moment from 'moment';
import store from 'store';
import CommonPagination from 'components/pagination';
import EquipmentDeatil from './EquipmentDeatil'

const { Option } = Select;

class Equipments extends React.Component {
  constructor() {
    super();
    var userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      tableData: [], // 列表数据
      total: 0,
      page: 1,
      pageSize: 50,
      size: "big",
      search: "",
    };
  }

  componentDidMount() {
    // document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y  + 'px';
    var x = document.querySelectorAll(".ant-table-body");
    for (var i = 0; i < x.length; i++) {
        x[i].style.height = store.getState().tableHeight.y  + 'px';
    }
    if (this.state.size == "small") {
      this.setState({
        pageSize: 10
      })
    } else {
      this.setState({
        pageSize: 50
      })
    }
    this.getFindDate()
    this.getHospData()
  }
 //获取医院下拉数据框
 getHospData=()=>{
  let data = {
    params: [{
      hospID:sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID:"",
      logonGroupID:sessionStorage.userData ? JSON.parse(sessionStorage.userData).groupID:"",
      logonHospID:sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID:"",
    }],
  }
  $http.post('urlS', this, {
    code: '01040001',
    data: data,
    success: function (res) {
      if (+res.errorCode === 0) {
        this.setState({
         hospData:res.result
        })
      }
    }
  })
}

  //调子组件
  onAttRef = (ref) => {
    this.childAtt = ref
  }
  // 点击查询
  handleQuery = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          values,
        }, () => {
          this.onShowSizeChange("1",this.state.pageSize)
        })
      }
    })
  }
  //查询
  getFindDate = (values,e) => {
    let { page, pageSize, } = this.state;
    let data = {
      params: [{
        hospID:values && values.hospID || "",
        code: values && values.code || "",
        descripts: values && values.dec || "",
        status: values && values.status || "",
      }],
      pagination: [{
        pageSize: pageSize,
        currentPage: page,
      }]
    }
    $http.post('urlS', this, {
      code: '04150008',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          this.setState({
            search:e,
            tableData: res.result.Data,
            total: res.result.TotalCount,
          })
        }
      }
    })
  }
  // 修改page和pageSize 跳转至---
  onChange = (e) => {
    this.setState({ page: e, pageSize: this.state.pageSize, }, () => {
      // 重新调用查询方法
      let { values } = this.state;
      this.getFindDate(values);
    })
  }
  //下拉选择页数
  onShowSizeChange = (page, pageSize) => {
    // console.log("page",page,"pagesize",pageSize)
    this.setState({ page: 1, pageSize: pageSize }, () => {
      // 重新调用查询方法
      let { values } = this.state;
      this.getFindDate(values, "search");
    })
  }
  // 显示分页总条数
  showTotal(total) {
    return `共 ${total} 条`;
  }

  //点击Row
  onClickRow = (record) => {
    return {
      onClick: () => {
        this.setState({
          parms: record,
        })
        this.childAtt.clearInfo()
        if (this.state.rowIds === "") {
          this.setState({
            rowIds: record.equipmentID,
          })
          this.childAtt.getInfo(record)
        } else {
          if (this.state.rowIds !== record.equipmentID) {
            this.setState({
              rowIds: record.equipmentID,
            });
            this.childAtt.getInfo(record)
          } else {
            this.setState({
              rowIds: "",
            });
            this.childAtt.clearInfo()
          }
        }
      },
    };
  }
  //点击查询后 表格行
  setRowClassNames = (record) => {
    return record.equipmentID === this.state.rowIds ? 'clickRowStyle' : '';
  }
  render() {
    const { tableData, total, page, rowData,hospData } = this.state;

    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: '医院代码',
        dataIndex: 'hospCode',
        width: 120,
        key: '7',
        align: "center",
      }, {  
        title: '医院描述',
        dataIndex: 'hospDesc',
        width: 220,
        align: "center",
        key: '8'
      }, 
      {
        title: '设备代码',
        dataIndex: 'code',
        width: 120,
        key: '0',
        align: "center",
      }, {
        title: '设备描述',
        dataIndex: 'descripts',
        width: 220,
        align: "center",
        key: '1'
      },  {
        title: 'Note',
        dataIndex: 'note',
        width: 200,
        align: "center",
        key: '4'
      }, {
        title: '设备工作时间',
        dataIndex: 'workStartTime',
        width: 120,
        align: "center",
        key: '5',
        render: (text, record, index) => {
          if (text == "") {
            return "--";
          } else{
            return text;
          }
        },
      },{
        title: '设备结束时间',
        dataIndex: 'workStopTime',
        width: 120,
        align: "center",
        key: '6',
        render: (text, record, index) => {
          if (text == "") {
            return "--";
          } else{
            return text;
          }
        },
      },{
        title: '生效日期',
        dataIndex: 'startDate',
        width: 120,
        align: "center",
        key: '3',
        render: (text, record, index) => {
          if (text == "") {
            return "--";
          } else{
            return text;
          }
        },
      }, {
        title: '失效日期',
        dataIndex: 'stopDate',
        width: 120,
        align: "center",
        key: '3',
        render: (text, record, index) => {
          if (text == "") {
            return "--";
          } else{
            return text;
          }
        },
      },]

    const formLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
    }
    const selectData = [
      {
        id: "",
        descripts: "全部"
      },
      {
        id: "Y",
        descripts: "可用"
      },
      {
        id: "N",
        descripts: "不可用"
      }
    ]
    // 状态选择
    let statusOpt = [];
    selectData && selectData.map((item, index) => {
      statusOpt.push(<Option key={index} value={item.id} title={item.descripts} >{item.descripts}</Option>)
    });
     // 医院选择
     let hospOpt = [];
     hospData && hospData.map((item, index) => {
      hospOpt.push(<Option key={index} value={item.id} title={item.descripts} >{item.descripts}</Option>)
     });

    return (
      <div>
        <div>
          <Form layout={'horizontal'}>
            <Row>
            <Col span={4}>
                <Form.Item label='医院' {...formLayout}>
                  {getFieldDecorator('hospID', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Select allowClear style={{ width: '100%' }} placeholder="请选择">
                      {hospOpt}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label="代码" {...formLayout}>
                  {getFieldDecorator('code', {
                    rules: [{ required: false, message: '请输入' }]
                  })(
                    <Input onPressEnter={this.handleQuery}></Input>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label='描述' {...formLayout}>
                  {getFieldDecorator('dec', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Input onPressEnter={this.handleQuery}></Input>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label='状态' {...formLayout}>
                  {getFieldDecorator('status', {
                    rules: [{ required: false, message: '' }],
                  })(
                    <Select allowClear style={{ width: '100%' }} placeholder="请选择">
                      {statusOpt}
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Button style={{ margin: '3px 0 0 10px' }} type="primary" onClick={this.handleQuery}>查询</Button>
              </Col>
            </Row>
          </Form>
        </div>
        <Row>
          <Col span={8}>
            <Card>
              <Table
                scroll={{ x: 1360 }}
                columns={columns}
                dataSource={this.state.tableData}
                pagination={false}
                rowKey={record => record.key}
                onRow={this.onClickRow}
                rowClassName={this.setRowClassNames}
                bordered
                style={{ height: store.getState().tableHeight.y  + 'px',overflow:"auto"}}
              />
              <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search={this.state.search}
                onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.tableData}
                onChange={this.onChange.bind(this)} />

            </Card>
          </Col>
          <Col span={16} style={{marginLeft:"-1px"}}>
            <Card>
              <EquipmentDeatil onAttRef={this.onAttRef} handleQuery={this.handleQuery}></EquipmentDeatil>
            </Card>
          </Col>
        </Row>

      </div>
    )
  }
};
const Equipment = Form.create()(Equipments);
export default Equipment;