import React from "react";
import $ from "jquery/src/ajax";
import "@/manageCenter/financialManage/distribute/public.less";
import { ChooseList } from "../../order/orderNew/chooseList";
import "./personnelList.less"
import {
  Button,
  Form,
  Input,
  Select,
  Spin,
  Table,
  message,
  Modal,
  Tabs,
  Tag,
  RangePicker,
  DatePicker,
  Radio,
} from "antd";
import {} from "@/tools";
const FormItem = Form.Item;
const { TabPane } = Tabs;
const { TextArea } = Input;
const PersonnelAll = React.createClass({
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      page: pageNo,
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/orderTaskList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        specially: 1, //经理
        name: this.state.nameSearch, //客户名称
        orderNo: this.state.orderNoSearch, //订单编号
        taskId: this.state.taskNoSearch, //任务编号
        depId: this.state.departmenttSearch, //订单部门
        taskStatus: this.state.taskStatus, //任务状态
        adminName: this.state.adminName, //任务受理人
        outsource: 1,
      },
      success: function (data) {
        let theArr = [];
        if (!data.data || !data.data.list) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            if (thisdata.splitList) {
              thisdata.splitList.forEach((item) => {
                item.key = item.id;
              });
            }
            theArr.push({
              key: thisdata.id,
              orderNo: thisdata.orderNo, //订单编号
              id: thisdata.id, //任务ID
              taskName: thisdata.taskName, //名称
              cname: thisdata.cname, //项目品类
              receiverName: thisdata.receiverName, //受理人
              projectStatus: thisdata.projectStatus, //项目状态
              taskStatus: thisdata.taskStatus, //任务状态
              taskDate: thisdata.taskDate, //分配时间
              commodityQuantity: thisdata.commodityQuantity, //数量
              userName: thisdata.userName, //用户名
              depName: thisdata.depName, //部门名称
              splitStatus: thisdata.splitStatus, //拆分状态
              splitList: thisdata.splitList,
            });
          }
        }
        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;
        }
        this.setState({
          dataSource: theArr,
          pagination: this.state.pagination,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  getInitialState() {
    return {
      peoVisible: false,
      isAddPeo: false,
      searchMore: true,
      assignVisible: false,
      releaseDate: [],
      roleName: "",
      shouKuanDate: [],
      boHuivisible: false,
      departmentArr: [],
      selectedRowKeys: [],
      selectedRows: [],
      paginations: false,
      loading: false,
      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: "id",
          key: "id",
        },
        {
          title: "员工姓名",
          dataIndex: "name",
          key: "name",
        },
      ],
      dataSource: [],
      resVisible: false,
    };
  },
  /* 分派 */
  evaluate(record, nub) {
    this.state.assignData = record;
    this.setState(
      {
        nub,
      },
      () => {
        this.setState({
          assignVisible: true,
        });
      }
    );
  },

  componentWillMount() {
    this.loadData();
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  },
  addPeo() {
    this.setState({
      peoVisible: true,
      isAddPeo: true
    })
  },
  addPeoCancel() {
    this.setState({
      peoVisible: false,
      isAddPeo: false
    })
  },
  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1),
        });
      },
    };
    const { RangePicker } = DatePicker;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    let departmentArr = this.state.departmentArr || [];
    return (
      <div className="user-content">
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>人事档案统计</span>
        </div>
        <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
          <TabPane tab="更改表格显示数据" key="1">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
          <TabPane tab="搜索" key="2">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Input
                placeholder="订单编号"
                value={this.state.orderNoSearch}
                onChange={(e) => {
                  this.setState({ orderNoSearch: e.target.value });
                }}
              />
              <Input
                placeholder="客户名称"
                value={this.state.nameSearch}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Select
                placeholder="订单部门"
                style={{ width: 120, marginRight: 10 }}
                value={this.state.departmenttList}
                onChange={(e) => {
                  this.setState({ departmenttList: e });
                }}
              >
                {departmentArr.map(function (item) {
                  return (
                    <Select.Option key={item.id}>{item.name}</Select.Option>
                  );
                })}
              </Select>
              <Input
                placeholder="合同编号"
                value={this.state.contractNoSearch}
                onChange={(e) => {
                  this.setState({
                    contractNoSearch: e.target.value,
                  });
                }}
              />
              <Select
                placeholder="流程状态"
                onChange={(e) => {
                  this.setState({ processStatusSearch: e });
                }}
                style={{ width: 120, marginRight: 5 }}
                value={this.state.processStatusSearch}
              >
                <Option value="3">未分配</Option>
                <Option value="4">已分配</Option>
                <Option value="9">已驳回</Option>
              </Select>
              <Select
                placeholder="结算状态"
                onChange={(e) => {
                  this.setState({ liquidationStatus: e });
                }}
                style={{ width: 120, marginRight: 5 }}
                value={this.state.liquidationStatus}
              >
                <Option value="0">首付待付清</Option>
                <Option value="1">尾款待付清</Option>
                <Option value="2">已付清</Option>
              </Select>
              <Select
                style={{ width: 120 }}
                placeholder="签单金额"
                value={this.state.amountStatus}
                onChange={(e) => {
                  this.setState({
                    amountStatus: e,
                  });
                }}
              >
                <Option value="0">10万元以下</Option>
                <Option value="1">10~20万元</Option>
                <Option value="2">20~30万元</Option>
                <Option value="3">30~40万元</Option>
                <Option value="4">40万元以上</Option>
              </Select>
              <span style={{}}>下单日期:</span>
              <RangePicker
                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 });
                }}
              />
              <span style={{}}>最近收款:</span>
              <RangePicker
                value={[
                  this.state.shouKuanDate[0]
                    ? moment(this.state.shouKuanDate[0])
                    : null,
                  this.state.shouKuanDate[1]
                    ? moment(this.state.shouKuanDate[1])
                    : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({ shouKuanDate: dataString });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <TabPane tab="新增员工档案" key="3">
            <Button
              type="primary"
              onClick={this.addPeo}
              style={{ margin: "11px 0px 10px 10px" }}
            >
              新增员工档案
            </Button>
          </TabPane>
          <TabPane tab="导出Excel" key="4">
            <Button type="primary" style={{ margin: "11px 0px 10px 10px" }}>
              导出当前列表
            </Button>
          </TabPane>
          <TabPane tab="查看" key="5">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={() => {}}
            >
              详情收款流水
            </Button>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              dataSource={this.state.dataSource}
              scroll={{ x: "max-content", y: 0 }}
              pagination={this.state.pagination}
              size="small"
            />
          </Spin>
        </div>

        <Modal
          visible={this.state.peoVisible}
          onOk={this.checkOk}
          width={800}
          okText={"保存"}
          onCancel={() => {
            this.loadData();
            this.addPeoCancel();
          }}
        >
          <Spin spinning={this.state.loading}>
            <h2
              style={{
                textAlign: "center",
                paddingBottom: 10,
                marginBottom: 10,
              }}
            >
              {this.state.isAddPeo ? "新增人事档案" : "修改人事档案"}
            </h2>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="员工编号"
              >
                <Input
                  placeholder=""
                  style={{ width: 200 }}
                  value={this.state.contractNoSearch}
                  onChange={(e) => {
                    this.setState({
                      contractNoSearch: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="门禁编号"
              >
                <Input
                  style={{ width: 200 }}
                  placeholder="请输入门禁编号"
                  value={this.state.contractNoSearch}
                  onChange={(e) => {
                    this.setState({
                      contractNoSearch: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem className="half-item" {...formItemLayout} label="姓名">
                <Input
                  placeholder=""
                  style={{ width: 200 }}
                  value={this.state.contractNoSearch}
                  onChange={(e) => {
                    this.setState({
                      contractNoSearch: e.target.value,
                    });
                  }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="出生日期"
              >
                <RangePicker
                  value={[
                    this.state.shouKuanDate[0]
                      ? moment(this.state.shouKuanDate[0])
                      : null,
                    this.state.shouKuanDate[1]
                      ? moment(this.state.shouKuanDate[1])
                      : null,
                  ]}
                  onChange={(data, dataString) => {
                    this.setState({ shouKuanDate: dataString });
                  }}
                />
              </FormItem>
            </div>
            <div className="clearfix">
              <FormItem className="half-item" {...formItemLayout} label="性别">
                <Radio.Group
                  onChange={(e) => {
                    this.setState({ sex: e.target.value });
                  }}
                  value={this.state.sex}
                >
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </Radio.Group>
              </FormItem>
              <FormItem className="half-item" {...formItemLayout} label="民族">
                <Input
                  placeholder="输入民族（例：汉族）"
                  style={{ width: 200 }}
                  value={this.state.contractNoSearch}
                  onChange={(e) => {
                    this.setState({
                      contractNoSearch: e.target.value,
                    });
                  }}
                />
              </FormItem>
            </div>
          </Spin>
        </Modal>
      </div>
    );
  },
});

export default PersonnelAll;
