
/**
 * 互联网电子病历组件
 */
import React from 'react'
import { Table, Popconfirm, Divider, Modal, Form, Row, Col, DatePicker, Input, Button, Select } from 'antd';
import moment from 'moment';
import './style.less';
const FormItem = Form.Item;
const { Option } = Select;
class TemplateTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rowId: "",
      defaultExpand:false
    }
  }

  componentDidMount() {

    setTimeout(() => {
      this.setState({defaultExpand:true});
    }, 5000);
  }

  onRow = (event, record) => {
    // 层级的类型
    if (record.fieldType == "mould") {
      if(this.state.rowId != record.key){
        this.setState({ rowId: record.key },()=>{
          this.props.onRow(record);
        });
      }
    }
  }

  setRowClassName = (record) => {
    return record.key === this.state.rowId ? 'clickRowStyle' : '';
  }
  editTemp = (event, record) =>{
    event.preventDefault();
    this.props.editTemp(record);
  }
  onDelete = (event, record)=>{
    event.preventDefault();
    this.props.onDelete(record);
  }
  render() {
    const columns = [
      {
        title: "级别",
        dataIndex: 'rank',
        key: 'rank',
        width:"15%"
      },
      {
        title: '分类',
        dataIndex: 'classify',
        key: 'classify',
        className: "test",
        width:"15%"
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width:"40%"
      },
      {
        title: '状态',
        dataIndex: 'handle',
        key: 'handle',
        width:"15%"
      },
      {
        title: '操作',
        dataIndex: 'address',
        key: 'address',
        width:"15%",
        render: (value, row, index) => {

          const obj = {
            children: (
              <span>
                <span className='span' style={{ cursor: "pointer" }} onClick={(e) => this.editTemp(e, row)}>编辑</span>
                {/* 分割线 */}
                <Divider type="vertical" />
                <Popconfirm title="删除不可恢复，你确定要删除吗?"  onConfirm={(e) => this.onDelete(e, row)} >
                  <span className='span' style={{ cursor: "pointer" }} style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                </Popconfirm>
              </span>
            ),
            props: {},
          };
          if (row.level !== "1") {
            return obj;
          }
        }
      },
    ];
    // demo
    const data = [
      {
        key: 1,
        rank: '个人模板',
        level: "1",
        children: [
          {
            key: 11,
            classify: '其他',
            level: "2"
          },
          {
            key: 12,
            classify: '呼吸道感染',
            level: "2",
            children: [
              {
                key: 121,
                name: '轻度感染',
                handle: "生效",
                level: "3"
              },
            ],
          }

        ],
      },
      {
        key: 2,
        rank: '科室模板',
      },
    ];

    return (
      <div className="TemplateTable">
        <Table columns={columns} dataSource={this.props.data} pagination={false} defaultExpandAllRows={true}
          onRow={record => {
            return {
              onClick: event => this.onRow(event, record)
            };
          }}
          rowClassName={this.setRowClassName}
        />
      </div>
    )
  }
}

// 添加病历目录
@Form.create()
class TemplateModalA extends React.Component {

  onOk = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onOk(values);
      }
    })
  }

  // setFieldsValue = (obj) => {
  //   this.props.form.setFieldsValue(obj);
  // }
  // resetFields = ()=>{
  //   this.props.form.resetFields();
  // }
  

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        key='3'
        width='600px'
        visible={this.props.visible}
        title={this.props.title}
        onOk={this.onOk}
        onCancel={this.props.onCancel}
        footer={[
          <Button key="submitc" type="primary" onClick={this.props.onCancel}>取消</Button>,
          <Button key="submits" type="primary" onClick={this.onOk}>确定</Button>,
        ]}>
        <div>
          <Form>
            <Row gutter={60}>
              <Col span={27}>
                <FormItem label='目录名称' wrapperCol={{ span: 21 }} labelCol={{ span: 3 }}>
                  {getFieldDecorator('IEMRMouldCataDesc', {
                    initialValue: undefined,
                    rules: [{ required: true, message: '请输入目录名称' }],
                  })(
                    <Input placeholder="请输入目录名称" maxLength={30} style={{ width: "100%" }} />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={60}>
              <Col span={24}>
                <FormItem label='模板级别' wrapperCol={{ span: 21 }} labelCol={{ span: 3 }}>
                  {getFieldDecorator('templetTypeID', {
                    initialValue: undefined,
                    rules: [{ required: true, message: '请选择类型' }],
                  })(
                    <Select>
                      {
                        this.props.templateLevelList.map((item, index) => {
                          return <Option value={item.id} key={index}>{item.descripts}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={60}>
              <Col span={12}>
                <FormItem label='生效日期' wrapperCol={{ span: 17 }} labelCol={{ span: 7 }}>
                  {getFieldDecorator('IEMRMouldCataStartDate', {
                    initialValue: moment(),
                    rules: [{ required: true, message: '请选择生效日期' }],
                  })(
                    <DatePicker style={{ width: '100%' }} disabledDate={(curDate) => {
                      return curDate && curDate > moment().endOf('day');
                    }} />
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label='失效日期' wrapperCol={{ span: 17 }} labelCol={{ span: 7 }}>
                  {getFieldDecorator('IEMRMouldCataStopDate', {
                    initialValue: undefined,
                    rules: [{ required: false, message: '' }],
                  })(
                    <DatePicker style={{ width: '100%' }} disabledDate={(curDate) => {
                      return curDate < moment(this.props.form.getFieldValue('IEMRMouldCataStartDate')).format('YYYY-MM-DD');
                    }} />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    )
  }
}


@Form.create()
class TemplateModalB extends React.Component {
 
  onOk = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onOk(values);
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        key='3'
        width='600px'
        visible={this.props.visible}
        title={this.props.title}
        onOk={this.onOk}
        onCancel={this.props.onCancel}
        footer={[
          <Button key="submitc" type="primary" onClick={this.props.onCancel}>取消</Button>,
          <Button key="submits" type="primary" onClick={this.onOk}>确定</Button>,
        ]}>
        <div>
          <Form ref={"bingliRef"}>
            <Row gutter={60}>
              <Col span={27}>
                <FormItem label='模板名称' wrapperCol={{ span: 21 }} labelCol={{ span: 3 }}>
                  {getFieldDecorator('IEMRMoudleDesc', {
                    initialValue: undefined,
                    rules: [{ required: true, message: '请输入模板名称' }],
                  })(
                    <Input placeholder="请输入模板名称" maxLength={30} style={{ width: "100%" }} />
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={60}>
              <Col span={24}>
                <FormItem label='模板级别' wrapperCol={{ span: 21 }} labelCol={{ span: 3 }}>
                  {getFieldDecorator('templetTypeID', {
                    initialValue: undefined,
                    rules: [{ required: true, message: '请选择级别' }],
                  })(
                    <Select onChange={this.props.onLevelChange}>
                      {
                        this.props.templateLevelList.map((item, index) => {
                          return <Option value={item.id} key={index}>{item.descripts}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={60}>
              <Col span={24}>
                <FormItem label='所属目录' wrapperCol={{ span: 21 }} labelCol={{ span: 3 }}>
                  {getFieldDecorator('IEMRMouldCataID', {
                    initialValue: undefined,
                    rules: [{ required: false, message: '请选择所属目录' }],
                  })(
                    <Select>
                      {
                        this.props.muluList.map((item, index) => {
                          return <Option value={item.IEMRMouldCataID} key={"mulu" + index}>{item.IEMRMouldCataDesc}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={60}>
              <Col span={12}>
                <FormItem label='生效日期' wrapperCol={{ span: 17 }} labelCol={{ span: 7 }}>
                  {getFieldDecorator('IEMRMoudleStartDate', {
                    initialValue: moment(),
                    rules: [{ required: true, message: '请选择生效日期' }],
                  })(
                    <DatePicker style={{ width: '100%' }} disabledDate={(curDate) => {
                      return curDate && curDate > moment().endOf('day');
                    }} />
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label='失效日期' wrapperCol={{ span: 17 }} labelCol={{ span: 7 }}>
                  {getFieldDecorator('IEMRMoudleStopDate', {
                    initialValue: undefined,
                    rules: [{ required: false, message: '' }],
                  })(
                    <DatePicker style={{ width: '100%' }} disabledDate={(curDate) => {
                      return curDate < moment(this.props.form.getFieldValue('startTime')).format('YYYY-MM-DD');
                    }} />
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    )
  }
}

export {
  TemplateTable,
  TemplateModalA,
  TemplateModalB
};




