import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Table, Select, Pagination, Space, Modal, message, Row, Col, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import AddSurg from './addSurg'
import MatchSurg from './MatchSurg.js'
import '@common/common.less';
import apiObj from '@api/index';
import SurgContext from './surg-context';

const { post, api } = apiObj;
const { Option } = Select;
//获取列表
function SurgManager() {
  useEffect(() => {
    getOperationPage();
  }, []);
  const [SurgList, setSurgList] = useState([]);//当前页列表数据
  const [Surgid, setSurgid] = useState([]);//当前列表id
  const [title, setTitle] = useState("");//数据总量
  const [visible, setVisible] = useState(false);//新增修改 弹窗
  const [msvisible, setMsvisible] = useState(false);//删除 弹窗
  const [visible1, setvisible1] = useState(false);//导入 弹窗
  const [visible2, setvisible2] = useState(false);//匹配 弹窗
  const [unsaved, setUnsaved] = useState(false);//修改未保存弹窗
  const [revise, setRevise] = useState(false);//是否修改 新增修改内容
  const [type, setType] = useState("");
  const [formData, setFormData] = useState(null);//当前行数据
  const [size, setSize] = useState(15);//每页显示条数
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);//当前页
  const [uploadStatus, setUploadStatus] = useState(0);//导入状态，0初始，1成功，2格式错误，3导入数据错误
  const [uploadTip, setUploadTip] = useState("");		//导入状态提示语
  const [saveParams, setSaveParams] = useState({});		//匹配诊断选中
  const [params, setParams] = useState({
    pages: 1,
    current: 1,
    size: 15
  });
  const [form] = Form.useForm();
  const tipMap = {
    0: '提示：EXCEL导入，模板样式及数据请在【朗通云平台-CDSS数据维护-医学术语关联维护】中导出获取。',
    2: "模板格式错误，模板样式及数据请在【朗通云平台-CDSS数据维护-医学术语关联维护】中导出获取",
    3: '模板导入失败，失败原因已在Excel中标识并自动下载，请检查后重新导入',
  };

  let data = {
    pages: 1,
    current: 1,
    size: size
  }
  //新增 弹窗
  const showModal = (name, type, flag, Surgrow) => {
    setVisible(type);
    setTitle(name);
    setType(flag)
    if (flag == 1) {
      setFormData({
        status: '1'
      })
    }
    if (flag == 3) {
      setFormData(Surgrow)
      getOperationPage()
    }
  }
  //表格数据
  function getOperationPage(param) {
    post(api.getOperationPage, param || params).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        setSurgList(data.records);
        setTotal(data.total)
      }
    })
  }

  //删除
  function delOperationById() {
    post(api.delOperationById, { ids: Surgid }).then((res) => {
      setMsvisible(false);
      if (res.data.code === 200) {
        getOperationPage();
        setSurgid([])
        message.success("删除成功");
      } else {
        message.warning(res.data.msg || '操作失败');
      }
    }).catch(() => {
      setMsvisible(false);
      message.error("接口出错");
    });
  }
  //每页显示条数切换
  function onSizeChange(current, pageSize) {
    params.current = current
    params.size = pageSize
    setSize(pageSize)
    setCurrent(current)
    setParams(params)
    getOperationPage()
  }
  //翻页
  function changePage(page, pageSize) {
    params.current = page
    params.size = pageSize
    setCurrent(page)
    setParams(params)
    getOperationPage()
  }
  const onFinish = (value) => {
    const param = {
      ...data,
      ...value
    }
    setCurrent(1)
    setParams(param)
    getOperationPage(param);
  };
  //重置
  const onReset = () => {
    setCurrent(1)
    setParams(data)
    form.resetFields();
    getOperationPage(data);
  };
  //打开导入弹窗
  const ImportBox = () => {
    setvisible1(true)
  }
  //导入弹窗取消或关闭
  function handleCancel1() {
    setvisible1(false);
    setUploadStatus(0);
  }
  //打开匹配弹窗
  function match(row) {
    setvisible2(true)
    setFormData(row)
  }
  //导入弹窗取消或关闭
  function handleCancel2() {
    setvisible2(false);
  }
  const messageBox = () => {
    if (!Surgid.length) {
      message.warning("请先选择要删除的记录~", 1);
      return;
    }
    setMsvisible(true)
  }
  //删除 提示框取消或关闭
  function handleCancel() {
    setMsvisible(false);
  }

  //新增修改 取消或关闭
  function cancel() {
    if (revise) {
      setUnsaved(true)
    } else {
      setVisible(false)
      setFormData(null)
    }
  }

  function isChange(a) {
    setRevise(a)
  }

  function addCancel() {
    setRevise(false)
    setVisible(false)
    setUnsaved(false)
    setFormData(null)
  }

  function unsavedCancel() {
    setUnsaved(false)
  }

  //新增修改 保存
  function SurgChange() {
    setRevise(false)
    setVisible(false)
    getOperationPage();
  }
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setSurgid(selectedRowKeys)
    }
  };
  //导入模板
  const props = {
    name: 'file',
    accept: ".xls",
    showUploadList: false,
    action: api.importOperation,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      const { response, status } = info.file;
      if (status === 'done') {
        if (response.code === 200) {
          getOperationPage();		//刷新列表
          //setvisible1(false);			//关闭导入弹窗
          //message.success(`${info.file.name} 导入成功`);
          setUploadStatus(1);
          setUploadTip(response.data);
        } else {
          //message.error(`${info.file.name} 导入失败.`);
          setUploadStatus(2);
        }
      } else if (status === 'error') {
        setUploadStatus(3);
      }
    },
  };

  function saveMatching() {
    post(api.matchingOperation, saveParams).then((res) => {
      setvisible2(false);
      if (res.data.code === 200) {
        message.success("匹配成功");
        getOperationPage();
      } else {
        message.warning(res.data.message || "匹配失败，请重试");
      }
    }).catch((error) => {
      message.warning(error.message || "接口出错，请重试",);
    })
  }
  function matchChange(data) {
    setSaveParams(data);
  }
  const columns = [
    { title: '序号', dataIndex: 'index', render: (text, record, index) => (current - 1) * params.size + index + 1 },
    { title: '医院手术/操作名称', dataIndex: 'name', },
    { title: '手术和操作代码', dataIndex: 'code', },
    { title: '标准手术/操作名称', dataIndex: 'standard', },
    { title: '是否匹配', dataIndex: 'isMapping', },
    {
      title: '操作', dataIndex: 'key', render: (text, record) => (
        <Space size="middle">
          <a onClick={e => showModal('修改字典', true, 3, record)}>修改</a>
          <a onClick={e => match(record)}>匹配</a>
        </Space>
      )
    }
  ]
  return (
    <div className="wrapper">
      <div className="filter-box">
        <Form
          form={form}
          name="normal_login"
          onFinish={onFinish}
          initialValues={{ isMapping: '' }}
        >
          <Row gutter={24}>
            <Col span={5} key={0}>
              <Form.Item label="医院手术/操作名称" name="name">
                <Input placeholder="医院手术/操作名称" autoComplete='off' />
              </Form.Item>
            </Col>
            <Col span={5} key={1}>
              <Form.Item label="手术和操作代码" name="code">
                <Input placeholder="手术和操作代码" autoComplete='off' />
              </Form.Item>
            </Col>
            <Col span={5} key={2}>
              <Form.Item label="标准手术/操作名称" name="standard">
                <Input placeholder="标准手术/操作名称" autoComplete='off' />
              </Form.Item>
            </Col>
            <Col span={4} key={3}>
              <Form.Item id="groupTypeval" label="是否匹配" name="isMapping">
                <Select
                  showSearch
                  optionFilterProp="children"
                  // onSearch={onSearch}
                  // onFocus={onFocus}
                  placeholder="全部"
                >
                  <Option value={''} key={-1}>全部</Option>
                  <Option value={0} key={0}>未匹配</Option>
                  <Option value={1} key={1}>已匹配</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={5} key={4}>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button onClick={onReset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>

      <div className="table">
        <div className="table-header">
          <h2 className="table-title">手术信息维护</h2>
          <Row gutter={12}>
            <Col key={0}>
              <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增', true, 1)}>新增</Button>
            </Col>
            <Col key={1}>
              <Button onClick={e => messageBox()} className="delete" >删除</Button>
            </Col>
            <Col key={2}>
              <Button type="primary" onClick={e => ImportBox()}>导入</Button>
            </Col>
          </Row>
        </div>

        <Table
          rowSelection={{ type: 'checkbox', ...rowSelection, }}
          columns={columns}
          scroll={{ y: 'calc(100vh - 350px)' }}
          dataSource={SurgList}
          rowKey={record => record.id}
          pagination={{
            current: current,
            pageSize: size,
            size: 'small',
            showSizeChanger: true,
            pageSizeOptions: ['15', '30', '60', '120'],
            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
            onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
            onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
            total: total
          }} />
      </div>
      {visible && formData ?
        <Modal maskClosable={false}
          title={title}
          okText='确定'
          cancelText='关闭'
          width={'45%'}
          visible={visible}
          onCancel={cancel}
          footer={null}
          forceRender={true}
        >
          <SurgContext.Provider value={{ type, formData }}>
            <AddSurg SurgChange={SurgChange} cancel={cancel} isChange={isChange} />
          </SurgContext.Provider>
          <Modal
            title="提示"
            okText='确定'
            cancelText='关闭'
            width={400}
            visible={unsaved}
            onOk={addCancel}
            onCancel={unsavedCancel}
          >
            <p>当前数据未保存 是否确认关闭?</p>
          </Modal>
        </Modal>
        : ''}
      <Modal
        maskClosable={false}
        title="提示"
        okText='确定'
        cancelText='关闭'
        width={400}
        visible={msvisible}
        onOk={delOperationById}
        onCancel={handleCancel}
      >
        <p>诊断信息删除后将无法恢复，确认删除这{Surgid.length}条信息。</p>
      </Modal>
      <Modal
        maskClosable={false}
        destroyOnClose={true}
        title="提示"
        width={400}
        visible={visible1}
        onCancel={handleCancel1}
        footer={<Button key="back" onClick={handleCancel1}>关闭</Button>}
      >
        <div style={{ marginBottom: 10 + 'px' }}>
          <span>手术信息导入：</span>
          <Upload {...props}><Button type="primary" >导入目录</Button></Upload>
        </div>
        {uploadStatus === 1 ? (<span style={{ color: '#00AF71' }}>{uploadTip}</span>) : (<span style={{ color: '#E3505B' }}>{tipMap[uploadStatus]}</span>)}
      </Modal>
      <Modal
        maskClosable={false}
        destroyOnClose={true}
        title="提示"
        okText='保存'
        cancelText='关闭'
        width={800}
        visible={visible2}
        onCancel={handleCancel2}
        onOk={saveMatching}
      >
        <MatchSurg row={formData} onChange={matchChange}></MatchSurg>
      </Modal>
    </div>
  )
}

export default SurgManager;