import React from 'react';
import {
  DatePicker,
  Tooltip,
  Button,
  Input,
  Select,
  Spin,
  Table,
  message,
  Form,
  Tabs,
} from 'antd';
import $ from 'jquery/src/ajax';
import moment from 'moment';
import { ShowModal, } from "@/tools.js";
import { station } from "@/dataDic";
import ShowModalDiv from "@/showModal.jsx";
import { ChooseList } from "../../order/orderNew/chooseList";

const TabPane = Tabs.TabPane;

const ProjecScore = Form.create()(React.createClass({

  getInitialState() {
    return {
      searchValues: {},
      loading: false,
      exportPendingLoading: false,
      changeList: undefined,
      dataSource: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      columns: [
        {
          title: "用户姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "高新&科技评分",
          dataIndex: "htSatScoreAverage",
          key: "htSatScoreAverage",
          render: (text, record) => {
            return (
              <div>{text}分</div>
            )
          },
        },
        {
          title: '会员评分',
          dataIndex: 'memberScoreAverage',
          key: 'memberScoreAverage',
          render: (text, record) => {
            return (
              <div>{text}分</div>
            )
          },
        },
        {
          title: "高新&科技总数/待评/已评",
          dataIndex: "htSatCount",
          key: "htSatCount",
          render: (text, record) => {
            return (
              <div>{text + " / " + record.htSatNotScoreCount + " / " + record.htSatScoreCount}</div>
            )
          },
        },
        {
          title: "会员总数/待评/已评",
          dataIndex: "memberCount",
          key: "memberCount",
          render: (text, record) => {
            return (
              <div>{text + " / " + record.memberNotScoreCount + " / " + record.memberScoreCount}</div>
            )
          },
        },
        {
          title: '部门',
          dataIndex: 'depName',
          key: 'depName',
        },
        {
          title: "上级主管姓名",
          dataIndex: "superName",
          key: "superName",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            return (
              <div style={{ color: ["green", "red"][text] }}>{["正常", "锁定"][text]}</div>
            )
          }
        },
        {
          title: '最后登录时间',
          dataIndex: 'lastLoginTime',
          key: 'lastLoginTime',
        },

      ],
      dataSource: [],
      departmentArr: [],
      roleArr: [],
    };
  },

  componentWillMount() {
    this.departmentList();
    this.rolesList();
  },

  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/taskScore/list",
      data: datas,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data.list,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
            });
          } else {
            this.setState({
              dataSource: data.data,
              pagination: false,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  // 部门
  departmentList() {
    const { searchValues } = this.state
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            });
            if (item.name == "科德-研发服务事业部") {
              searchValues["depId"] = item.id
            }
          });
        }
        this.setState({
          departmentArr: theArr,
          searchValues: searchValues,
        }, () => {
          this.loadData();
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  //角色
  rolesList() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/roles",
      data: {

      },
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              roleName: item.roleName,
              id: item.id,
            })
          })
        }
        this.setState({
          roleArr: theArr,
        })
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },

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

  exportAll() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    let data = JSON.parse(JSON.stringify(this.state.searchValues));
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/taskScore/list/export",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        loading();
        this.setState({
          exportPendingLoading: false,
        });
      }.bind(this)
    );
  },

  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  },

  search() {
    this.loadData();
  },

  reset() {
    this.setState({
      searchValues: JSON.parse(JSON.stringify({})),
    }, () => {
      this.loadData();
    })
  },

  render() {
    const { searchValues, roleArr } = this.state
    let departmentArr = this.state.departmentArr || [];
    return (
      <div className="user-content">
        <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>
        <div className="user-search">
          <Tabs
            defaultActiveKey="1"
            className="test">
            <TabPane tab="搜索" key="1">
              <div
                className="user-search"
                style={{
                  marginTop: "10px",
                  marginLeft: "10px",
                  marginRight: "10px",
                }}
              >
                <Input
                  placeholder="用户名称"
                  style={{
                    width: 220,
                    marginRight: "10px",
                  }}
                  value={searchValues["name"]
                    ? searchValues["name"]
                    : ""}
                  onChange={(e) => {
                    searchValues["name"] = e.target.value;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                />
                <Select
                  placeholder="选择负责部门"
                  style={{ width: 170, }}
                  value={searchValues["depId"]
                    ? searchValues["depId"]
                    : undefined}
                  onChange={(e) => {
                    searchValues["depId"] = e
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                >
                  {departmentArr.map(function (item) {
                    return (
                      <Select.Option key={item.id}>{item.name}</Select.Option>
                    );
                  })}
                </Select>
                <Select
                  placeholder="角色"
                  style={{ width: 180 }}
                  value={this.state.rolesSearch}
                  onChange={e => {
                    this.setState({ rolesSearch: e });
                  }}
                >
                  {roleArr.map(function (item) {
                    return (
                      <Select.Option key={item.id}>
                        {item.roleName}
                      </Select.Option>
                    );
                  })}
                </Select>
                <Select
                  placeholder="岗位"
                  style={{ width: 100 }}
                  value={searchValues["position"]
                    ? searchValues["position"]
                    : undefined}
                  onChange={e => {
                    searchValues["position"] = e
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                >
                  {station.map(function (item) {
                    return (
                      <Select.Option key={item.value}>
                        {item.key}
                      </Select.Option>
                    );
                  })}
                </Select>
                <Button type="primary" onClick={this.search} style={{ marginRight: 10 }}>
                  搜索
                </Button>
                <Button onClick={this.reset}>重置</Button>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <ChooseList
                  columns={this.state.columns}
                  changeFn={this.changeList}
                  changeList={this.state.changeList}
                  top={55}
                  margin={11}
                />
              </div>
            </TabPane>
            <TabPane tab="导出EXCEL" key="3">
              <Button
                type="primary"
                loading={this.state.exportPendingLoading}
                onClick={this.exportAll}
                style={{ margin: 10 }}
              >
                导出excel
              </Button>
            </TabPane>
          </Tabs>
        </div>
        <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}
              bordered
            />
          </Spin>
        </div>
      </div >
    );
  }
}));

export default ProjecScore;
