/**
 * 企业服务合同页面
*/
import React, { Component } from 'react';
import { connect } from 'dva';
import { Input, Alert, Button, Form, Modal, message, Badge, Tabs, Popover, notification, Select } from 'antd';
import * as api from '../../../services/api';
import './less/contract.less';
import PTable from '../../../components/Pro/PTable';
import PSelect from '../../../components/Pro/PSelect';
import ContractDrawer from './ContractDrawer';
// import DrawRenew from './DrawRenew';
const confirm = Modal.confirm;
const Option = Select.Option;
const { TabPane } = Tabs;
import axios from 'axios';
import store from 'store';
import $nModal from '../../../utils/modal/nModal';
import AttendanceList from './AttendanceList';
@connect(state => ({
  profile: state.profile,
  global: state.global
}))
@Form.create()
export default class EnterpriseServiceContract extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false, //编辑查看
      editable: false, //抽屉的输入框是否可编辑
      editOrGo: true, //抽屉的输入框是编辑还是续签（true是编辑，false是续签，默认是编辑）
      renewOpen: false, //续签合同
      number: 0,
      forceUpdate: false,
      typesd: '', //合同类型
      pageParm: {
        keyWord: '',
        comKeyWord: '',
        addressKeyWord: '',
        contractType: '01',
        expiredMonth: '',
        pageSize: '10',
        pageNumber: '1',
        contractEffect: '',
        isRelationTask:'',
      },
      addressKeyWord: '',
      keyWord: '',
      comKeyWord: '',
      contractType: '01',
      expiredMonth: '',
      contractEffect: '',
      isRelationTask:'',
      fileListUrl: '', //文件地址
      visible: false, //续签合同 抽屉 是否可见
      update: true,
      // table: null  //导出表格的元素对象
      expireContractCount: 0,  //即将到期的合同数量
      canExport: false  //是否可以导出表格
    };
  }

  componentWillMount() {
    api.getExpireContractCount({ expiredMonth: 1 }).then(res => {
      this.setState({
        expireContractCount: res.data
      });
    });
  }
  //终止合同
  interrupt = record => {
    const that = this;
    confirm({
      title: '即将终止合同，是否继续？',
      okText: '继续',
      cancelText: '取消',
      onOk() {
        api
          .enterpriseComContractTerminationComContract({
            comContractId: record.comContractId
          })
          .then(
            data => {
              that.setState(
                {
                  forceUpdate: true
                },
                () => {
                  that.setState({
                    forceUpdate: false
                  });
                }
              );
            },
            err => {
              message.error(err);
            }
          );
      },
      onCancel() {
        console.log('Cancel');
      }
    });
  };
  //根据id删除合同
  showDeleteConfirm = record => {
    const that = this;
    const { comContractId } = record;
    api.checkRelateTaskByContractId({ comContractId }).then(res => {
      // isExistsRelateTask是否存在关联的任务（0：不存在 1:存在）
      const { isExistsRelateTask, taskNames } = res.data;
      if (isExistsRelateTask == 1) {
        confirm({
          title: '即将删除合同，是否继续？',
          content: <p style={{ color: 'orange' }}>
            合同删除后，若有关联人员或任务的，将自动解除关联关系，你还要继续吗？
          </p>,
          okText: '继续',
          cancelText: '取消',
          onOk() {
            api
              .enterpriseComContractDeleteComContract({
                comContractId: record.comContractId,
                isExistsRelateTask
              })
              .then(
                data => {
                  if (data.retType === 0) {
                    message.success(data.msg);
                  }
                  that.setState(
                    {
                      forceUpdate: true
                    },
                    () => {
                      that.setState({
                        forceUpdate: false
                      });
                    }
                  );
                },
                err => {
                  message.error(err);
                }
              );
          }
        });
      } else {
        confirm({
          title: '即将删除合同，是否继续？',
          content: <p style={{ color: 'orange' }}>
            合同删除后，若有关联人员或任务的，将自动解除关联关系，你还要继续吗？
          </p>,
          okText: '继续',
          cancelText: '取消',
          onOk() {
            api
              .enterpriseComContractDeleteComContract({
                comContractId: record.comContractId,
                isExistsRelateTask
              })
              .then(
                data => {
                  if (data.retType === 0) {
                    message.success(data.msg);
                  }
                  that.setState(
                    {
                      forceUpdate: true
                    },
                    () => {
                      that.setState({
                        forceUpdate: false
                      });
                    }
                  );
                },
                err => {
                  message.error(err);
                }
              );
          }
        });
      }
    });
  };

  //输入框所输入的值
  onChangeName = e => {
    this.setState({
      contractName: e.target.value.trim()
    });
  };

  //table 数据变化
  dateTableChange = data => {
    this.setState({ number: data.total });
  };

  //表格变化
  changeTable = () => {
    this.setState(
      {
        forceUpdate: true,
        open: false
      },
      () => {
        this.setState({
          forceUpdate: false
        });
      }
    );
  };
  downLoad = url => {
    if (url) {
      window.open(url);
    } else {
      notification.warning({
        message: '该合同未上传附件！',
        description: '请先上传合同文件，方可下载。'
      });
    }
  }
  /**iverry end */
  //搜索
  handleContractSubmit = () => {
    const pageParm = { ...this.state.pageParm };
    let { keyWord, comKeyWord, contractType, expiredMonth, addressKeyWord,isRelationTask} = this.state;
    pageParm.keyWord = keyWord;
    pageParm.comKeyWord = comKeyWord;
    pageParm.addressKeyWord = addressKeyWord;
    pageParm.isRelationTask = isRelationTask;
    pageParm.expiredMonth = expiredMonth == '' ? '' : parseInt(expiredMonth);
    pageParm.contractEffect = this.state.contractEffect;
    this.setState(
      {
        pageParm,
        canExport: true,
        forceUpdate: true
      },
      () => {
        this.setState({
          forceUpdate: false
        });
      }
    );
  };
  //抽屉视图处理
  //查看
  changeDrawer2 = record => {
    this.setState({ open: true });
    this.setState({ editable: true });
    this.setState({
      comContractId: record.comContractId,
      typesd: record.contractType,
      fileListUrl: record.contractUrl
      // update: true
    });
  };
  //编辑
  changeDrawer3 = record => {
    this.setState({ open: true });
    this.setState({ editable: false, editOrGo: true });
    this.setState({
      comContractId: record.comContractId,
      typesd: record.contractType,
      fileListUrl: record.contractUrl
      // update: true
    });
  };
  //续签的状态
  openDrawRenew = record => {
    this.setState({ comContractId: record.comContractId, typesd: record.contractType, fileListUrl: record.contractUrl, open: true, editable: false, editOrGo: false });
  };
  closeUpdate = () => {
    this.setState({
      update: false
    });
  };
  openUpdate = () => {
    this.setState({
      update: true
    });
  };

  //报表类型 change
  pSelectChange = (value, type) => {
    this.setState({ [type]: value });
  };

  //表格渲染
  renderTable = () => {
    const columns = [
      {
        title: '合同类型',
        dataIndex: 'contractType_name',
        key: 'contractType_name',
        render: (text, record) => (
          <span
            style={{
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.contractType_name}
          </span>
        )
      },
      {
        title: '合同名称',
        dataIndex: 'contractName',
        key: 'contractName',
        render: (text, record) => (
          <Popover
            content={
              <span
                style={{
                  whiteSpace: 'normal',
                  width: '300px',
                  display: 'inline-block',
                  padding: '10px'
                }}
              >
                {text}
              </span>
            }
            placement="rightTop"
          >
            <div
              style={{
                maxWidth: '300px',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                marginTop: '8px',
                marginBottom: '8px'
              }}
            >
              {record.contractName}
            </div>
          </Popover>
        )
      },
      {
        title: '企业档案编号',
        dataIndex: 'comFileNo',
        key: 'comFileNo'
      },
      {
        title: '甲方名称',
        dataIndex: 'firstPartyName',
        key: 'firstPartyName'
      },
      {
        title: '乙方名称',
        dataIndex: 'secondPartyName',
        key: 'secondPartyName'
      },
      {
        title: '丙方名称',
        dataIndex: 'thirdPartyName',
        key: 'thirdPartyName'
      },
      {
        title: '合同有效时间',
        dataIndex: 'effectStartDate',
        key: 'effectStartDate',
        render:(text,record)=>{
        return <span>{text}~{record.effectEndDate}</span>
        }
      },
      {
        title: '合同状态',
        dataIndex: 'contractEffect',
        key: 'contractEffect',
        render: (text, record) => {
          let status = '';
          switch (true) {
            case text == '未生效':
              status = 'warning';
              break;
            case text == '有效':
              status = 'success';
              break;
            case text == '终止':
              status = 'error';
          }
          return (
            <div>
              <Badge status={status} />
              <span>{text}</span>
            </div>
          );
        }
      },
      {
        title: '关联驻勤点',
        dataIndex: 'taskCount',
        key: 'taskCount',
        render:(text,record)=>{
          return <a onClick={()=>{ 
            text==0 ? 
            Modal.info({
              title: '该合同没有关联驻勤点',
            }):
            $nModal({
              width: 800,
              title: '关联驻勤点',
              content: (
               <AttendanceList comContractId={record.comContractId}/>
              ),
              onOk: (close) => {
                close();
              }
            });
          }}>{text}</a>
        }
      },
      {
        title: '最后修改时间',
        dataIndex: 'lastUpdateTime',
        key: 'lastUpdateTime',
        render: (text, record) => (
          <span
            style={{
              width: '150px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.lastUpdateTime}
          </span>
        )
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => {
          return (
            <span className="action">
              <span
                onClick={this.changeDrawer2.bind(this, record)}
                style={{ color: '#0F71FF' }}
              >
                查看
              </span>
              <span
                onClick={this.changeDrawer3.bind(this, record)}
                style={{ color: '#0F71FF' }}
              >
                编辑
                </span>
              <a
                href="javascript:void(0);"
                style={{ marginRight: '8px', color: '#0F71FF' }}
                onClick={this.downLoad.bind(this, record.contractUrl)}
              >
                下载
              </a>
              <span
                className="delete"
                onClick={this.showDeleteConfirm.bind(this, record)}
                style={{ color: '#0F71FF' }}
              >
                删除
              </span>
              <span
                onClick={this.openDrawRenew.bind(this, record)}
                style={{ color: '#0F71FF' }}
              >
                续签
              </span>
              {record.contractStatus != '2' && record.contractStatus != '9' &&
                <span
                  onClick={this.interrupt.bind(this, record)}
                  style={{ color: '#0F71FF' }}
                >
                  终止
                </span>
              }
            </span>
          )
        }
      }
    ];
    // 导出的合同列表
    const columnsExport = [
      {
        title: '合同类型',
        dataIndex: 'contractType_name',
        key: 'contractType_name',
        // width: 100,
        render: (text, record) => (
          <span
            style={{
              // width: '100px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.contractType_name}
          </span>
        )
      },
      {
        title: '合同名称',
        dataIndex: 'contractName',
        key: 'contractName',
        render: (text, record) => (
          <Popover
            content={
              <span
                style={{
                  whiteSpace: 'normal',
                  width: '300px',
                  display: 'inline-block',
                  padding: '10px'
                }}
              >
                {text}
              </span>
            }
            placement="rightTop"
          >
            <div
              style={{
                maxWidth: '300px',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                marginTop: '8px',
                marginBottom: '8px'
              }}
            >
              {record.contractName}
            </div>
          </Popover>
        )
      },
      {
        title: '企业档案编号',
        dataIndex: 'comFileNo',
        key: 'comFileNo',
        // width: 300,
        render: (text, record) => (
          <span
            style={{
              // width: '300px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.comFileNo}
          </span>
        )
      },
      {
        title: '甲方名称',
        dataIndex: 'firstPartyName',
        key: 'firstPartyName',
        // width: 300,
        render: (text, record) => (
          <span
            style={{
              // width: '300px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.firstPartyName}
          </span>
        )
      },
      {
        title: '联系电话',
        dataIndex: 'firstPartyTel',
        key: 'firstPartyTel',
        // width: 300,
        render: (text, record) => (
          <span
            style={{
              // width: '300px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.firstPartyTel}
          </span>
        )
      },
      {
        title: '乙方名称',
        dataIndex: 'secondPartyName',
        key: 'secondPartyName',
        // width: 300,
        render: (text, record) => (
          <span
            style={{
              // width: '300px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.secondPartyName}
          </span>
        )
      },
      {
        title: '联系电话',
        dataIndex: 'secondPartyTel',
        key: 'secondPartyTel',
        // width: 300,
        render: (text, record) => (
          <span
            style={{
              // width: '300px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.secondPartyTel}
          </span>
        )
      },
      {
        title: '合同开始时间',
        dataIndex: 'effectStartDate',
        key: 'effectStartDate',
        // width: 150,
        render: (text, record) => (
          <span
            style={{
              width: '150px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.effectStartDate}
          </span>
        )
      },
      {
        title: '合同结束时间',
        dataIndex: 'effectEndDate',
        key: 'effectEndDate',
        // width: 150,
        render: (text, record) => (
          <span
            style={{
              width: '150px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.effectEndDate}
          </span>
        )
      },
      {
        title: '合同期限',
        dataIndex: 'contractPeriod',
        key: 'contractPeriod',
        // width: 150,
        render: (text, record) => (
          <span
            style={{
              width: '150px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.contractPeriod}
          </span>
        )
      },
      {
        title: '协议签订日期',
        dataIndex: 'agreementSignDate',
        key: 'agreementSignDate',
        // width: 150,
        render: (text, record) => (
          <span
            style={{
              width: '150px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.agreementSignDate}
          </span>
        )
      },
      {
        title: '合同备注信息',
        dataIndex: 'remark',
        key: 'remark',
        // width: 150,
        render: (text, record) => (
          <span
            style={{
              width: '150px',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              overflow: 'hidden'
            }}
          >
            {record.remark}
          </span>
        )
      }
    ];
    return (
      <div>
        <PTable
          style={{ marginTop: 20 }}
          columns={columns}
          url="enterpriseComContractComContractList"
          pageParm={this.state.pageParm}
          dateChange={this.dateTableChange}
          forceUpdate={this.state.forceUpdate}
        />
        <PTable
          ref="table"
          style={{ marginTop: 20, display: 'none' }}
          columns={columnsExport}
          url="enterpriseComContractComContractList"
          pageParm={this.state.pageParm}
          dateChange={this.dateTableChange}
          forceUpdate={this.state.forceUpdate}
        />
      </div>
    );
  };

  //关闭 修改 item 抽屉
  closeDrawer = () => {
    Modal.confirm({
      title: '当前信息未提交，返回后无法保证。是否确认返回？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.setState({ renewOpen: false });
      },
      onCancel: () => {
        console.log('Cancel');
      }
    });
  };
  confirmDrawer = () => {
    this.setState({ renewOpen: false });
  };


  changeDrawer = () => {
    this.props.history.push({
        pathname: `./addContract`,
        state: {
            title:'企业服务合同列表',
            url:'/contractManagement/enterpriseServiceContract',
            type:'01'
        }
    });
  };

  openContractDrawer = visiable => {
    this.setState({ open: visiable });
  };

  render() {
    // const { getFieldDecorator } = this.props.form;
    const { renewOpen, expireContractCount } = this.state;
    const { regProvince } = this.props.global.companyInfo;
    return (
      <div className="contractWrapper">
        <Tabs>
          <TabPane tab="企业服务合同列表" key="1">
            {/* <h2>共检索到<span>{this.state.number}</span>条数据</h2> */}
            <div>
              {
                (expireContractCount > 0 || /(^11)|(^65)/.test(regProvince)) &&
                <Alert
                  style={{ marginBottom: 15 }}
                  message={(() => {
                    return (
                      <div>
                        {
                          expireContractCount > 0 &&
                          <span>
                            有{this.state.expireContractCount}份合同将在一个月内到期，请及时处理。
                          <a href="javascript:void(0)"
                              onClick={() => {
                                this.setState({
                                  pageParm: {
                                    ...this.state.pageParm,
                                    keyWord: '',
                                    addressKeyWord: '',
                                    comKeyWord: '',
                                    isRelationTask: '',
                                    expiredMonth: '1'
                                  },
                                  expiredMonth: '1'
                                }, () => {
                                  this.setState(
                                    {
                                      forceUpdate: true
                                    },
                                    () => {
                                      this.setState({
                                        forceUpdate: false
                                      });
                                    }
                                  );
                                })
                              }}>筛选即将到期合同</a>
                          </span>
                        }
                        {
                          /(^11)|(^65)/.test(regProvince) &&
                          <div style={{ color: 'red' }}>因疫情原因无法续签合同的情况，可新建合同，在上传“合同电子文件”处上传公司没有续签合同的盖章说明即可，“合同有效期”请选择准备续签的日期，续签合同后请及时修改相应信息。同时在“合同备注信息”写明：因疫情原因未续签合同。</div>
                        }
                      </div>
                    );
                  })()}
                  type="warning"
                  showIcon
                />
              }

              <div>
                <label style={{ display: 'inline-block', marginRight: '16px' }}>
                  关键词：
                  <Input
                    style={{
                      width: '240px',
                      marginLeft: '16px',
                      marginBottom: '16px'
                    }}
                    value={this.state.keyWord}
                    placeholder="合同名称/企业档案编号"
                    onChange={e => {
                      this.setState({
                        keyWord: e.target.value.trim()
                      });
                    }}
                    maxLength={30}
                  />
                </label>
                <label style={{ display: 'inline-block', marginRight: '16px' }}>
                  办公所在地：
                  <Input
                    style={{
                      width: '240px',
                      marginLeft: '16px',
                      marginBottom: '16px'
                    }}
                    value={this.state.addressKeyWord}
                    placeholder="办公所在地"
                    onChange={e => {
                      this.setState({
                        addressKeyWord: e.target.value.trim()
                      });
                    }}
                    maxLength={30}
                  />
                </label>
                <label style={{ display: 'inline-block', marginRight: '16px' }}>
                  企业名称：
                  <Input
                    style={{
                      width: '240px',
                      marginLeft: '16px',
                      marginBottom: '16px'
                    }}
                    value={this.state.comKeyWord}
                    placeholder="甲方/乙方/丙方名称"
                    onChange={e => {
                      this.setState({
                        comKeyWord: e.target.value.trim()
                      });
                    }}
                    maxLength={30}
                  />
                </label>
                <label style={{ display: 'inline-block', margin: '0 16px 0' }}>
                  到期预警：
                  <Select
                    style={{ width: 240 }}
                    placeholder="请选择"
                    onChange={(value) => {
                      this.setState({
                        expiredMonth: value
                      });
                    }}
                    value={this.state.expiredMonth}
                  >
                    <Option value="">全部</Option>
                    <Option value="1">近一个月到期</Option>
                    <Option value="2">近两个月到期</Option>
                    <Option value="3">近三个月到期</Option>
                  </Select>
                </label>

                <label style={{ display: 'inline-block', marginRight: '16px' }}>
                  合同状态：
                  <Select value={this.state.contractEffect} style={{ width: 120 }} onChange={value => {
                    this.setState({
                      contractEffect: value
                    });
                  }}>
                    <Option value="">全部</Option>
                    <Option value="0">未生效</Option>
                    <Option value="1">有效</Option>
                    <Option value="2">终止</Option>
                  </Select>
                </label>
                <label style={{ display: 'inline-block', marginRight: '16px' }}>
                  是否关联驻勤点：
                  <Select 
                  value={this.state.isRelationTask}
                   style={{ width: 120 }} onChange={value => {
                    this.setState({
                      isRelationTask: value
                    });
                  }}>
                    <Option value="">全部</Option>
                    <Option value="1">是</Option>
                    <Option value="0">否</Option>
                  </Select>
                </label>
                <Popover content={(() => {
                  return <p style={{ padding: 10 }}>搜索后可导出搜索结果</p>
                })()} title="温馨提示：">
                  <Button
                    id="btnSearch"
                    type="primary"
                    onClick={this.handleContractSubmit}
                    style={{ marginBottom: '16px' }}
                  >
                    搜索
                  </Button>
                </Popover>
                <Button
                  id="btnSearch"
                  onClick={() => {
                    const pageParm = {
                      ...this.state.pageParm,
                      keyWord: '',
                      comKeyWord: '',
                      addressKeyWord: '',
                      isRelationTask: '',
                      expiredMonth: '',
                      contractEffect: ''
                    };
                    this.setState(
                      {
                        pageParm,
                        keyWord: '',
                        comKeyWord: '',
                        isRelationTask: '',
                        expiredMonth: '',
                        addressKeyWord: '',
                        forceUpdate: true,
                        canExport: false,
                        contractEffect: ''
                      },
                      () => {
                        this.setState({
                          forceUpdate: false
                        });
                      }
                    );
                  }}
                  style={{ marginBottom: '16px', marginLeft: 15 }}
                >
                  重置
                </Button>
              </div>
              <div>
                <Button type="primary" onClick={this.changeDrawer}>
                  添加合同
                </Button>
                <Popover content={(() => {
                  return <p style={{ padding: 10 }}>搜索后可导出搜索结果</p>
                })()} title="温馨提示：">
                  <Button style={{ marginLeft: 15 }}
                    type="primary"
                    disabled={!this.state.canExport}
                    onClick={() => {
                      const QUERY = `keyWord=${this.state.keyWord}&contractType=${this.state.contractType}&expiredMonth=${this.state.expiredMonth}&addressKeyWord=${this.state.addressKeyWord}&isRelationTask=${this.state.isRelationTask}`;
                      // api.exportContractList(PARMS).then(res => {
                      //   console.log(res);
                      // });
                      const COMPANY = this.props.global.companyInfo.comName;
                      axios({
                        method: 'get',
                        url: `${api.host}/enterprise/com-contract/export-contract-list?${QUERY}`, //后台请求地址
                        responseType: 'blob',
                        headers: {
                          access_token: store.get('saas')['access_token'],
        Accesstoken: store.get('saas')['access_token']|| sessionStorage.userV5Token,

                        }
                      }).then(data => {
                        if (!data) {
                          return;
                        }
                        let url = window.URL.createObjectURL(data.data);
                        let link = document.createElement('a');
                        link.style.display = 'none';
                        link.href = url;
                        link.setAttribute('download', `${COMPANY}_合同.xls`);
                        document.body.appendChild(link);
                        link.click();
                      });
                    }}>
                    导出excel表格
                  </Button>
                </Popover>
              </div>
              {this.renderTable()}
              <ContractDrawer
                onChange={this.openContractDrawer}
                visiable={this.state.open}
                editable={this.state.editable}
                editOrGo={this.state.editOrGo}
                comContractId={this.state.comContractId}
                typesd={this.state.typesd}
                fileUrl={this.state.fileListUrl}
                changeTable={this.changeTable}
                closeUpdate={this.closeUpdate}
                openUpdate={this.openUpdate}
                update={this.state.update}
              />

            </div>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
