import React, { Component } from "react";
import {
  Button,
  Form,
  Input,
  message,
  Modal,
  Popconfirm,
  Select,
  Spin,
  Table,
  Tabs,
  Upload,
  Tooltip, DatePicker
} from "antd";
import { ChooseList } from "../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import { patentTypeList } from '@/dataDic.js';
import { getPatentType, ShowModal } from "@/tools.js";
import ShowModalDiv from "@/showModal.jsx";
import './patent.less';
import PatentDetails from './patentDetails';
import ReminderLog from "../../customer/NEW/crm/reminderLog";
import moment from "moment";
import Cascaders from "../../../common/cascaders";

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          width: 80,
          fixed: 'left'
        },
        {
          title: "专利号",
          dataIndex: "patentNo",
          key: "patentNo",
          width: 140,
          fixed: 'left'
        },
        {
          title: "专利名称",
          dataIndex: "name",
          key: "name",
          width: 140,
          fixed: 'left'
        },
        {
          title: "专利类型",
          dataIndex: "type",
          key: "type",
          render: (text) => {
            return (
              getPatentType(text)
            )
          }
        },
        {
          title: "申请日",
          dataIndex: "applyDates",
          key: "applyDates",
        },
        {
          title: "权利人",
          dataIndex: "holders",
          key: "holders",
          width: 120,
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div style={{
                  maxWidth: '120px',
                  overflow: 'hidden',
                  textOverflow: "ellipsis",
                  whiteSpace: 'nowrap',
                }}>{text}</div>
              </Tooltip>
            )
          },
        },
        {
          title: "授权日期",
          dataIndex: "authorizationDates",
          key: "authorizationDates",
        },
        {
          title: "发明人",
          dataIndex: "inventor",
          key: "inventor",
          width: 120,
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div style={{
                  maxWidth: '120px',
                  overflow: 'hidden',
                  textOverflow: "ellipsis",
                  whiteSpace: 'nowrap',
                }}>{text}</div>
              </Tooltip>
            )
          },
        },
        {
          title: "收费截止日",
          dataIndex: "endDates",
          key: "endDates",
        },
        {
          title: "费减状态",
          dataIndex: "costReduction",
          key: "costReduction",
          render: (text, record) => {
            return (
              record.tid ? (text === 1 ? '有费减' : text === 0 ? '无费减' : '') : '无'
            )
          }
        },
        {
          title: "年费状态",
          dataIndex: "annualFeeStatus",
          key: "annualFeeStatus",
          render: (text) => {
            return (
              <span style={{
                color: text === 0 ? '#f00' : text === 1 ? '#25e027' : ''
              }}>
                {
                  text === 0 ? '待缴费' :
                    text === 1 ? '已缴费' : ''
                }
              </span>
            )
          }
        },
        {
          title: "营销员是否提醒",
          dataIndex: "salesmanRemind",
          key: "salesmanRemind",
          render: (text) => {
            return (
              <span style={{
                color: text === 0 ? '#f00' : text === 1 ? '#25e027' : ''
              }}>
                {
                  text === 0 ? '未通知' :
                    text === 1 ? '已通知' : ''
                }
              </span>
            )
          }
        },
        {
          title: "Email",
          dataIndex: "email",
          key: "email",
        },
        {
          title: "年费/滞纳金/恢复",
          dataIndex: "delayingAmount",
          key: "delayingAmount",
          render: (text, record) => {
            return (
              record.patentAmount + '/' + text + '/' + record.recoveryAmount
            )
          }
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "项目名称",
          dataIndex: "projectName",
          key: "projectName",
        },
        {
          title: "项目编号",
          dataIndex: "tid",
          key: "tid",
        },
        {
          title: "营销员",
          dataIndex: "salesmanName",
          key: "salesmanName",
        },
        {
          title: "咨询师",
          dataIndex: "techName",
          key: "techName",
        },
        {
          title: "派单部门",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "录入人",
          dataIndex: "inputName",
          key: "inputName",
          width: 120,
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div style={{
                  maxWidth: '120px',
                  overflow: 'hidden',
                  textOverflow: "ellipsis",
                  whiteSpace: 'nowrap',
                }}>{text}</div>
              </Tooltip>
            )
          },
        },
        {
          title: "录入时间",
          dataIndex: "createTimes",
          key: "createTimes",
        },
        {
          title: "跟进人",
          dataIndex: "aname",
          key: "aname",
          width: 120,
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div style={{
                  maxWidth: '120px',
                  overflow: 'hidden',
                  textOverflow: "ellipsis",
                  whiteSpace: 'nowrap',
                }}>{text}</div>
              </Tooltip>
            )
          },
        },
        {
          title: "操作",
          dataIndex: "id",
          key: "caozuo",
          width: 200,
          fixed: 'right',
          render: (text, record) => {
            return (
              <div>
                <Button disabled={record.isFollow === 0} type="primary" onClick={(e) => {
                  e.stopPropagation();
                  this.setState({
                    detailsVisible: true,
                    detailsInfor: record,
                    readOnly: false
                  })
                }}>修改</Button>
                <Button style={{ marginLeft: '10px' }} type="primary" onClick={(e) => {
                  e.stopPropagation();
                  this.setState({
                    visible: true,
                    id: text
                  })
                }}>专利日志</Button>
              </div>
            )
          }
        },
      ],
      dataSource: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page, this.state.searchInfor);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      detailsVisible: false,
      detailsInfor: {},
      departmentArr: [],
      selectedRowKeys: [],
      selectedRows: [],

      unSelectedRows: [],

      name: undefined,
      type: undefined,
      depName: undefined,
      inputDep: undefined,
      followDep: undefined,
      releaseDate: [],
      releaseDate1: [],
      annualFeeStatus: undefined,
      userName: undefined,
      salesmanRemind: undefined,
      isFollow: 1,
      aname: undefined,
      patentNo: undefined,

      upLoad: {
        customRequest: (options) => {
          this.setState({
            upLoadFileLoading: true,
          })
          let params = new FormData();
          params.append("file", options.file);
          $.ajax({
            method: "post",
            url: globalConfig.context + "/api/admin/patentNew/import",
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            data: params
          }).done(
            function (data) {
              this.setState({
                upLoadFileLoading: false,
              })
              if (data.error.length === 0) {
                message.success("导入成功！");
                this.loadData();
              } else {
                message.warning(data.error[0].message);
                this.loadData();
              }
            }.bind(this)
          ).always(
            function (err) {
              if (err.status === 404) {
                message.warning('表格数据错误');
              }
              this.loadData();
              this.setState({
                upLoadFileLoading: false,
              });
            }.bind(this)
          );
        },
        name: "file",
        action: globalConfig.context + "/api/admin/patentNew/import",
      },

      adminList: [],

      status: props.status,

      aid: '',
    }
    this.changeList = this.changeList.bind(this);
    this.loadData = this.loadData.bind(this);
    this.download = this.download.bind(this);
    this.departmentList = this.departmentList.bind(this);
    this.exportExec = this.exportExec.bind(this);
    this.onReset = this.onReset.bind(this);
    this.updateBatch = this.updateBatch.bind(this);
    this.getAdminList = this.getAdminList.bind(this);
    this.downloadFile = this.downloadFile.bind(this);
  }

  componentWillReceiveProps(prevProps) {
    if (prevProps.status !== this.state.status) {
      this.setState({
        status: prevProps.status
      }, () => {
        this.setState({
          name: undefined,
          type: undefined,
          depName: undefined,
          inputDep: undefined,
          followDep: undefined,
          releaseDate: [],
          releaseDate1: [],
          annualFeeStatus: undefined,
          userName: undefined,
          salesmanRemind: undefined,
          isFollow: 1,
          aname: undefined,
          patentNo: undefined,
        }, () => {
          this.Cascaders1.empty();
          this.Cascaders2.empty();
          this.Cascaders3.empty();
          this.loadData();
        })
        // this.departmentList();
      })
    }
  }

  componentDidMount() {
    this.loadData();
    // this.departmentList();
  }

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  }

  loadData(pageNo) {
    this.setState({
      loading: true,
      selectedRowKeys: [],
      selectedRows: []
    });
    let data = {
      name: this.state.name,
      type: this.state.type,
      depName: this.state.depName,
      inputDep: this.state.inputDep,
      followDep: this.state.followDep,
      createStarts: this.state.releaseDate[0] || undefined,
      createEnds: this.state.releaseDate[1] || undefined,
      startDates: this.state.releaseDate1[0] || undefined,
      endDates: this.state.releaseDate1[1] || undefined,
      annualFeeStatus: this.state.annualFeeStatus,
      userName: this.state.userName,
      salesmanRemind: this.state.salesmanRemind,
      isFollow: this.state.isFollow,
      aname: this.state.aname,
      patentNo: this.state.patentNo,
      pageNo: pageNo || 1,
      pageSize: 10,
    }
    if (this.state.status) {
      data.status = this.state.status;
      data.isFollow = 1;
    }
    for (let i in data) {
      if (data[i] === undefined) { delete data[i] }
    }
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/patentNew/selectPatentNew",
      data,
      success: function (data) {
        ShowModal(this);
        if (data.error.length === 0) {
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
          if (data.data && data.data.list && !data.data.list.length) {
            this.state.pagination.current = 0;
            this.state.pagination.total = 0;
          }
          data.data.list.map(v => v.key = v.id)
          this.setState({
            page: data.data.pageNo,
            dataSource: data.data.list,
            pagination: this.state.pagination,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  download() {
    window.location.href =
      globalConfig.context +
      "/api/user/channel/downloadTemplate?" +
      "sign=user_channel";
  }

  downloadFile() {
    this.setState({
      downloadFileLoading: true
    })
    setTimeout(() => {
      this.setState({
        downloadFileLoading: false
      })
    }, 1500)
    window.location.href =
      globalConfig.context +
      "/api/admin/patentNew/exportTemplate?" +
      "sign=new_patent_template";
  }
  //部门
  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        if (data.error.length === 0) {
          let theArr = [];
          data.data.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            })
          })
          this.setState({
            departmentArr: theArr,
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
    }.bind(this));
  }

  exportExec() {
    this.setState({
      exportExecLoading: true
    })
    let loading = message.loading('加载中...');
    let data = {
      name: this.state.name,
      type: this.state.type,
      depName: this.state.depName,
      inputDep: this.state.inputDep,
      followDep: this.state.followDep,
      createStarts: this.state.releaseDate[0] || undefined,
      createEnds: this.state.releaseDate[1] || undefined,
      startDates: this.state.releaseDate1[0] || undefined,
      endDates: this.state.releaseDate1[1] || undefined,
      annualFeeStatus: this.state.annualFeeStatus,
      userName: this.state.userName,
      salesmanRemind: this.state.salesmanRemind,
      isFollow: this.state.isFollow,
      aname: this.state.aname,
      patentNo: this.state.patentNo,
    }
    for (let i in data) {
      if (data[i] === undefined) { delete data[i] }
    }
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/patentNew/export",
      data,
      success: function (data) {
        loading();
        this.setState({
          exportExecLoading: false
        })
        if (data.error.length === 0) {
          this.download(data.data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
      this.setState({
        exportExecLoading: false
      })
    }.bind(this));
  }

  download(fileName) {
    window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  }
  //获取营销管理员列表
  getAdminList(name) {
    this.setState({
      adminListLoading: true
    })
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/superviser/adminList",
      data: {
        pageNo: 1,
        pageSize: 99,
        name
      },
      success: function (data) {
        let thedata = data.data.list;
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          thedata.map(function (item, _) {
            theArr.push({
              value: item.id,
              label: item.name,
            });
          });
        }
        this.setState({
          adminList: theArr,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          adminListLoading: false
        })
      }.bind(this)
    );
  }

  onReset() {
    this.setState({
      name: undefined,
      type: undefined,
      depName: undefined,
      inputDep: undefined,
      followDep: undefined,
      releaseDate: [],
      releaseDate1: [],
      annualFeeStatus: undefined,
      userName: undefined,
      salesmanRemind: undefined,
      isFollow: 1,
      aname: undefined,
      patentNo: undefined,
    }, () => {
      this.Cascaders1.empty();
      this.Cascaders2.empty();
      this.Cascaders3.empty();
      this.loadData();
    })
  }

  updateBatch(type) {
    if (type === 2 && !this.state.aid) {
      message.warning('请选择营销管理员');
      return;
    }
    let loading = message.loading('加载中...')
    if (type === 0) {
      this.setState({
        updateBatchLoading0: true,
      })
    } else if (type === 1) {
      this.setState({
        updateBatchLoading1: true,
      })
    } else if (type === 2) {
      this.setState({
        updateBatchLoading2: true,
      })
    }
    let ids = this.state.selectedRowKeys.join(',');
    let data = {
      ids,
      type,//0 批量通知 1批量发邮件  2转给营销管理员
    }
    if (type === 2) {
      data.aid = this.state.aid
    }
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/patentNew/updateBatch",
      data,
      success: function (data) {
        loading();
        if (data.error.length === 0) {
          message.success(type === 0 ? '成功批量标记为已通知' : type === 1 ? '批量发邮件成功' : type === 2 ? '转入成功' : '');
          if (type === 2) {
            this.setState({
              adminVisible: false
            })
          }
          this.loadData(this.state.page);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
      if (type === 0) {
        this.setState({
          updateBatchLoading0: false,
        })
      } else if (type === 1) {
        this.setState({
          updateBatchLoading1: false,
        })
      } else if (type === 2) {
        this.setState({
          updateBatchLoading2: false,
        })
      }
    }.bind(this));
  }

  render() {
    return (
      <div className="user-content patentList">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>专利列表</span>
        </div>
        <Tabs defaultActiveKey="1" className="test">
          <TabPane tab="搜索" key="1">
            <div style={{ padding: '10px' }}>
              <Form
                layout="inline"
                name="basic"
              >
                <div style={{ display: 'flex', alignItems: 'center', flexFlow: 'wrap' }}>
                  <Form.Item>
                    <Input style={{ width: '160px' }} value={this.state.patentNo} onChange={(e) => { this.setState({ patentNo: e.target.value }) }} placeholder="请输入专利号" />
                  </Form.Item>
                  <Form.Item>
                    <Input style={{ width: '160px' }} value={this.state.name} onChange={(e) => { this.setState({ name: e.target.value }) }} placeholder="请输入专利名称" />
                  </Form.Item>
                  <Form.Item>
                    <Input style={{ width: '160px' }} value={this.state.userName} onChange={(e) => { this.setState({ userName: e.target.value }) }} placeholder="请输入客户名称" />
                  </Form.Item>
                  <Form.Item>
                    <Input style={{ width: '160px' }} value={this.state.aname} onChange={(e) => { this.setState({ aname: e.target.value }) }} placeholder="请输入跟进人名称" />
                  </Form.Item>
                  <Form.Item>
                    <Select
                      placeholder="请选择专利类型"
                      style={{ width: "140px" }}
                      value={this.state.type}
                      onSelect={(e) => {
                        this.setState({
                          type: e
                        })
                      }}
                    >
                      {patentTypeList.map(function (item) {
                        return (
                          <Select.Option key={item.value}>
                            {item.key}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    <Select placeholder="请选择是否代缴费" onSelect={(e) => {
                      this.setState({
                        annualFeeStatus: e
                      })
                    }} value={this.state.annualFeeStatus} style={{ width: "140px" }}>
                      <Select.Option value={0} >未代缴</Select.Option>
                      <Select.Option value={1} >已代缴</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    <Select placeholder="请选择是否通知" value={this.state.salesmanRemind} onSelect={(e) => {
                      this.setState({
                        salesmanRemind: e
                      })
                    }} style={{ width: "140px" }}>
                      <Select.Option value={0} >未通知</Select.Option>
                      <Select.Option value={1} >已通知</Select.Option>
                    </Select>
                  </Form.Item>
                  {!this.state.status ? <Form.Item>
                    <Select placeholder="请选择关系" value={this.state.isFollow} onSelect={(e) => {
                      this.setState({
                        isFollow: e
                      })
                    }} style={{ width: "140px" }}>
                      <Select.Option value={0} >我录入</Select.Option>
                      <Select.Option value={1} >我跟进</Select.Option>
                    </Select>
                  </Form.Item> : null}
                  <Form.Item>
                    <Cascaders
                      ref={ref => this.Cascaders1 = ref}
                      placeholder="请选择派单部门"
                      id="name"
                      name="name"
                      children="list"
                      height={32}
                      onSel={(e) => {
                        this.setState({
                          depName: JSON.stringify(e)
                        })
                      }}
                    />
                    {/* <Select
                                            placeholder="请选择派单部门"
                                            value={this.state.depName}
                                            onSelect={e => { this.setState({ depName: e }) }}
                                            style={{ width: "240px" }}
                                        >
                                            {
                                                this.state.departmentArr.map(function (item) {
                                                    return <Select.Option key={item.id} value={item.name}>{item.name}</Select.Option>
                                                })
                                            }
                                        </Select> */}
                  </Form.Item>
                  <Form.Item>
                    <Cascaders
                      ref={ref => this.Cascaders2 = ref}
                      placeholder="请选择录入部门"
                      id="id"
                      name="name"
                      children="list"
                      height={32}
                      onSel={(e) => {
                        this.setState({
                          inputDep: JSON.stringify(e)
                        })
                      }}
                    />
                    {/* <Select
                                            placeholder="请选择录入部门"
                                            value={this.state.inputDep}
                                            onSelect={e => {
                                                this.setState({ inputDep: e })
                                            }}
                                            style={{ width: "240px" }}
                                        >
                                            {
                                                this.state.departmentArr.map(function (item) {
                                                    return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                                                })
                                            }
                                        </Select> */}
                  </Form.Item>
                  <Form.Item>
                    <Cascaders
                      ref={ref => this.Cascaders3 = ref}
                      placeholder="请选择跟进部门"
                      id="id"
                      name="name"
                      children="list"
                      height={32}
                      onSel={(e) => {
                        this.setState({
                          followDep: JSON.stringify(e)
                        })
                      }}
                    />
                    {/* <Select
                                            placeholder="请选择跟进部门"
                                            value={this.state.followDep}
                                            onSelect={e => {
                                                this.setState({ followDep: e })
                                            }}
                                            style={{ width: "240px" }}
                                        >
                                            {
                                                this.state.departmentArr.map(function (item) {
                                                    return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                                                })
                                            }
                                        </Select> */}
                  </Form.Item>
                  <Form.Item>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <div style={{ marginRight: '10px' }}>录入时间:</div>
                      <RangePicker
                        style={{ marginRight: '10px', height: 32 }}
                        value={[
                          this.state.releaseDate[0]
                            ? moment(this.state.releaseDate[0])
                            : null,
                          this.state.releaseDate[1]
                            ? moment(this.state.releaseDate[1])
                            : null,
                        ]}
                        onChange={(data, dataString) => {
                          this.setState({ releaseDate: dataString });
                        }}
                      />
                    </div>
                  </Form.Item>
                  <Form.Item>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <span style={{ marginRight: '10px' }}>申请时间:</span>
                      <RangePicker
                        style={{ marginRight: '10px' }}
                        value={[
                          this.state.releaseDate1[0]
                            ? moment(this.state.releaseDate1[0])
                            : null,
                          this.state.releaseDate1[1]
                            ? moment(this.state.releaseDate1[1])
                            : null,
                        ]}
                        onChange={(data, dataString) => {
                          this.setState({ releaseDate1: dataString });
                        }}
                      />
                    </div>
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary" onClick={() => { this.loadData(); }}>
                      搜索
                    </Button>
                  </Form.Item>
                  <Form.Item>
                    <Button onClick={this.onReset}>
                      重置
                    </Button>
                  </Form.Item>
                </div>
              </Form>
            </div>
          </TabPane>
          <TabPane tab="操作" key="2">
            <Popconfirm placement="top" title="确定要标识为已通知吗?" onConfirm={(e) => {
              e.stopPropagation();
              this.updateBatch(0);
            }} okText="确定" cancelText="取消">
              <Button
                loading={this.state.updateBatchLoading0}
                type="primary"
                style={{ margin: "11px 0px 10px 10px" }}
                disabled={this.state.selectedRowKeys.length === 0}
              >
                标识为已通知
              </Button>
            </Popconfirm>
            <Popconfirm placement="top" title="确定要批量发邮件吗?" onConfirm={(e) => {
              e.stopPropagation();
              let arr = this.state.selectedRows.filter(v => v.status === 0);
              if (arr.length > 0) {
                this.setState({
                  unSelectedRows: arr,
                  unSelectedRowsVisible: true
                })
              } else {
                this.updateBatch(1)
              }
            }} okText="确定" cancelText="取消">
              <Button
                loading={this.state.updateBatchLoading1}
                type="primary"
                style={{ margin: "11px 0px 10px 10px" }}
                disabled={this.state.selectedRowKeys.length === 0}
              >
                批量发邮件
              </Button>
            </Popconfirm>
            <Button
              loading={this.state.updateBatchLoading2}
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              disabled={this.state.selectedRowKeys.length === 0}
              onClick={() => {
                this.setState({
                  adminVisible: true,
                  adminList: [],
                })
              }}
            >
              转交专利
            </Button>
            <Upload {...this.state.upLoad} disabled={this.state.upLoadFileLoading}>
              <Button
                loading={this.state.upLoadFileLoading}
                type="primary"
                style={{ marginRight: "10px", marginLeft: '20px' }}
              >
                批量导入
              </Button>
            </Upload>
            <Button
              type="primary"
              loading={this.state.downloadFileLoading}
              onClick={(e) => {
                e.stopPropagation();
                this.downloadFile();
              }}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              下载专利模板
            </Button>
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              loading={this.state.exportExecLoading}
              onClick={() => {
                this.exportExec();
              }}
            >
              导出Excel
            </Button>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="3">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              columns={
                this.state.changeList
                  ? this.state.changeList
                  : this.state.columns
              }
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              style={{
                cursor: 'pointer',
              }}
              onRowClick={(record) => {
                this.setState({
                  detailsVisible: true,
                  readOnly: true,
                  detailsInfor: record
                })
              }}
              rowSelection={{
                getCheckboxProps: record => ({
                  disabled: record.isFollow === 0
                }),
                selectedRowKeys: this.state.selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                  this.setState({ selectedRowKeys, selectedRows });
                },
              }}
              scroll={{ x: "max-content", y: 0 }}
              bordered
              size="small"
            />
          </Spin>
        </div>
        {this.state.detailsVisible ? <PatentDetails
          readOnly={this.state.readOnly}
          visible={this.state.detailsVisible}
          detailsInfor={this.state.detailsInfor}
          onRefresh={() => {
            this.loadData(this.state.page);
          }}
          onCancel={() => {
            this.setState({
              readOnly: true,
              detailsVisible: false,
              detailsInfor: {}
            })
          }}
        /> : null}
        {this.state.visible ? <ReminderLog
          id={this.state.id}
          visible={this.state.visible}
          cancel={() => {
            this.setState({
              visible: false,
              id: undefined
            })
          }}
        /> : null}

        {this.state.unSelectedRowsVisible ? <Modal
          title='提醒'
          className='payRecordComponent'
          width={500}
          maskClosable={false}
          footer={null}
          visible={this.state.unSelectedRowsVisible}
          onCancel={() => {
            this.setState({
              unSelectedRowsVisible: false,
              unSelectedRows: []
            })
          }}
        >
          <div style={{ paddingBottom: '15px' }}>下列专利，不在专利需缴费的90天提醒之内，不可发送邮件</div>
          <Table
            columns={[
              {
                title: "专利号",
                dataIndex: "patentNo",
                key: "patentNo",
              },
              {
                title: "专利名称",
                dataIndex: "name",
                key: "name",
              },
            ]}
            dataSource={this.state.unSelectedRows}
            pagination={false}
            scroll={{ x: "max-content", y: 0 }}
            bordered
            size="small"
          />
          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '20px' }}>
            <Button type="primary" onClick={() => {
              this.setState({
                unSelectedRowsVisible: false,
                unSelectedRows: []
              })
            }}>关闭</Button>
          </div>
        </Modal> : null}

        {this.state.adminVisible ? <Modal
          title='请选择需转交的跟进人'
          className='payRecordComponent'
          width={300}
          maskClosable={false}
          footer={null}
          visible={this.state.adminVisible}
          onCancel={() => {
            this.setState({
              adminVisible: false
            })
          }}
        >
          <div style={{ display: 'flex', flexFlow: "column", justifyContent: 'center', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span style={{ paddingRight: '15px' }}>跟进人:</span>
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="请选择跟进人"
                optionFilterProp="children"
                onSelect={(aid) => {
                  this.setState({
                    aid
                  })
                }}
                onSearch={(value) => { this.getAdminList(value) }}
              >
                {
                  this.state.adminList.map(v => (
                    <Select.Option value={v.value} key={v.value}>{v.label}</Select.Option>
                  ))
                }
              </Select>
            </div>
            <Popconfirm placement="top" title="确定要转入此营销管理吗?" onConfirm={(e) => {
              e.stopPropagation();
              this.updateBatch(2);
            }} okText="确定" cancelText="取消">
              <Button
                loading={this.state.updateBatchLoading2}
                type='primary'
                style={{ marginAuto: '0 auto', marginTop: '20px' }}
              >
                确定
              </Button>
            </Popconfirm>
          </div>
        </Modal> : null}
      </div>
    )
  }
}


export default List;