import React from "react";
import $ from "jquery/src/ajax";
import "@/manageCenter/financialManage/distribute/public.less";
import { Button, Form, Input, Select, Spin, Table, message, Modal } from "antd";
import Assign from "@/manageCenter/publicComponent/assign";
import {
  getProcessStatus,
  getLiquidationStatus,
  getApprovedState,
  splitUrl,
  getProjectStatus,
  getboutique,
  ShowModal
} from "@/tools";
import ShowModalDiv from "@/showModal.jsx";
const FormItem = Form.Item;

const Task = 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 //任务受理人
      },
      success: function(data) {
        ShowModal(this);
        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];
            theArr.push({
              key: i,
              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 //部门名称
            });
          }
        }
        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 {
      searchMore: true,
      assignVisible: false,
      releaseDate: [],
      roleName: "",
      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: "taskName",
          key: "taskName"
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo"
        },
        {
          title: "业务类别",
          dataIndex: "cname",
          key: "cname"
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName"
        },
        {
          title: "项目状态",
          dataIndex: "projectStatus",
          key: "projectStatus",
          render: text => {
            return getProjectStatus(text);
          }
        },
        {
          title: "分配时间",
          dataIndex: "taskDate",
          key: "taskDate"
        },
        {
          title: "任务数量",
          dataIndex: "commodityQuantity",
          key: "commodityQuantity"
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName"
        },
        {
          title: "操作",
          dataIndex: "caozuo",
          key: "caouzo",
          render: (text, record) => {
            return (
              <div>
                <Button
                  type="primary"
                  style={{ margin: "0 10px" }}
                  onClick={e => {
                    e.stopPropagation(), this.evaluate(record, "咨询师经理");
                  }}
                >
                  转交
                </Button>
                <Button
                  type="primary"
                  style={{ margin: "0 10px" }}
                  onClick={e => {
                    e.stopPropagation(), this.evaluate(record, "咨询师");
                  }}
                >
                  分配任务
                </Button>
              </div>
            );
          }
        }
      ],
      dataSource: [],
      searchTime: [],
      columnsX: [
        {
          title: "业务项目名称",
          dataIndex: "commodityName",
          key: "commodityName"
        },
        {
          title: "项目类别",
          dataIndex: "cname",
          key: "cname"
        },
        {
          title: "项目数量",
          dataIndex: "commodityQuantity",
          key: "commodityQuantity"
        },
        {
          title: "金额(万元)",
          dataIndex: "commodityPrice",
          key: "commodityPrice"
        },
        {
          title: "负责人",
          dataIndex: "contacts",
          key: "contacts"
        },
        {
          title: "负责人电话",
          dataIndex: "contactsMobile",
          key: "contactsMobile"
        },
        {
          title: "主要项目",
          dataIndex: "main",
          key: "main",
          render: text => {
            return text ? "是" : "否";
          }
        },
        {
          title: "项目说明",
          dataIndex: "taskComment",
          key: "taskComment",
          render: text => {
            return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
          }
        }
      ],
      dataSourceX: []
    };
  },
  /* 分派 */
  evaluate(record, nub) {
    this.state.assignData = record;
    this.setState(
      {
        nub
      },
      () => {
        this.setState({
          assignVisible: true
        });
      }
    );
  },

  componentWillMount() {
    this.departmentList();
    this.loadData();
  },
  tableRowClick(record) {
    this.state.RowData = record;
    this.setState({
      visible: true
    });
    this.xiangqing(record.orderNo);
    this.xiangmu(record.orderNo);
  },
  //订单详情
  xiangqing(orderNos) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
      data: {
        orderNo: orderNos
      },
      success: function(data) {
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          let thisdata = data.data;
          this.setState({
            orderNo: thisdata.orderNo, //订单编号
            contractNo: thisdata.contractNo, //合同编号
            userName: thisdata.userName, //客户名称
            signDate: thisdata.signDate, //签单时间
            processStatus: thisdata.processStatus, //流程状态
            liquidationStatus: thisdata.liquidationStatus, //结算状态
            contacts: thisdata.contacts, //企业联系人
            contactMobile: thisdata.contactMobile, //联系人电话
            legalPerson: thisdata.legalPerson, //法人
            legalPersonTel: thisdata.legalPersonTel, //法人电话
            firstAmount: thisdata.firstAmount, //签单金额
            totalAmount: thisdata.totalAmount, //首付金额
            approval: thisdata.approval, //特批状态
            settlementAmount: thisdata.settlementAmount, //已收款项
            orderRemarks: thisdata.orderRemarks, //订单留言
            orgCodeUrl: thisdata.contractPictureUrl
              ? splitUrl(
                  thisdata.contractPictureUrl,
                  ",",
                  globalConfig.avatarHost + "/upload"
                )
              : [], //图片地址
            salesmanName: thisdata.salesmanName, //营销员名称
            salesmanMobile: thisdata.salesmanMobile, //营销员电话
            financeName: thisdata.financeName, //财务名称
            financeMobile: thisdata.financeMobile, //财务电话
            oldSalesmanName: thisdata.oldSalesmanName, //营销员名称
            oldSalesmanMobile: thisdata.oldSalesmanMobile, //营销员电话
            nowFinance: thisdata.nowFinance, //财务名称
            nowFinanceMobile: thisdata.nowFinanceMobile, //财务电话
            depName: thisdata.depName //订单部门
          });
        }
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  //项目列表
  xiangmu(orderNos) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
      data: {
        orderNo: orderNos
      },
      success: function(data) {
        let theArr = [];

        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            theArr.push({
              key: i,
              id: thisdata.id,
              orderNo: thisdata.orderNo, //订单编号
              commodityId: thisdata.commodityId, //项目ID
              commodityName: thisdata.commodityName, //项目名称
              cname: thisdata.cname, //项目类别
              commodityPrice: thisdata.commodityPrice, //项目价格
              commodityQuantity: thisdata.commodityQuantity, //项目数量
              main: thisdata.main, //是否为主要任务
              taskComment: thisdata.taskComment, //任务说明
              contacts: thisdata.contacts, //联系人
              contactsMobile: thisdata.contactsMobile, //联系人电话
              taskStatus: thisdata.taskStatus //是否分配
            });
          }
        }
        this.setState({
          dataSourceX: theArr
        });
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  //关闭详情
  visitCancel() {
    this.setState({
      visible: false
    });
    this.reset();
  },
  visitOk() {
    this.setState({
      visible: false
    });
    this.reset();
  },
  closeDesc(e, s) {
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.page);
    }
  },
  closeAssign(e, s) {
    this.state.roleName = "";
    this.state.assignVisible = e;
    if (s) {
      this.loadData(this.state.page);
    }
  },
  nextCancel() {
    this.setState({
      addnextVisible: false
    });
  },
  //点击打卡项目详情
  tableRowClickX(record) {
    this.setState({
      jid: record.id, //项目ID
      kid: record.commodityId, //商品ID
      commodityName: record.commodityName, //金额
      commodityPrice: record.commodityPrice, //金额
      commodityQuantity: record.commodityQuantity, //数量
      taskComment: record.taskComment, //备注
      main: record.main.toString(), //是否为主要
      addnextVisible: true,
      addState: 0
    });
  },
  search() {
    this.loadData();
  },
  reset() {
    this.state.nameSearch = "";
    this.state.releaseDate = [];
    this.state.orderNoSearch = "";
    this.state.taskNoSearch = "";
    this.state.departmenttSearch = undefined;
    this.state.distribution = undefined;
    this.loadData(this.state.page);
  },
  searchSwitch() {
    this.setState({
      searchMore: !this.state.searchMore
    });
  },
  //部门
  departmentList() {
    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
            });
          });
        }
        this.setState({
          departmentArr: theArr
        });
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1)
        });
      }
    };
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 }
    };
    let departmentArr = this.state.departmentArr || [];
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} />
        <div className="content-title">
          <span>任务派单</span>
        </div>
        <div className="user-search">
          <Input
            placeholder="客户名称"
            value={this.state.nameSearch}
            onChange={e => {
              this.setState({ nameSearch: e.target.value });
            }}
          />
          <Input
            placeholder="订单编号"
            value={this.state.orderNoSearch}
            onChange={e => {
              this.setState({ orderNoSearch: e.target.value });
            }}
          />
          <Input
            placeholder="任务编号"
            value={this.state.taskNoSearch}
            onChange={e => {
              this.setState({ taskNoSearch: e.target.value });
            }}
          />
          <Select
            placeholder="选择部门"
            style={{ width: 150, marginRight: "10px" }}
            value={this.state.departmenttSearch}
            onChange={e => {
              this.setState({ departmenttSearch: e });
            }}
          >
            {departmentArr.map(function(item) {
              return <Select.Option key={item.id}>{item.name}</Select.Option>;
            })}
          </Select>
          <Button type="primary" onClick={this.search}>
            搜索
          </Button>
          <Button onClick={this.reset}>重置</Button>
          {/* <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch.bind(this)} /></span>
                    <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
                        <span>订单时间 :</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 }); }} />
                    </div> */}
        </div>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              columns={this.state.columns}
              dataSource={this.state.dataSource}
              rowSelection={rowSelection}
              pagination={this.state.pagination}
              onRowClick={this.tableRowClick.bind(this)}
              bordered
              size="small"
            />
          </Spin>
        </div>
        <Assign
          title="任务"
          selApi={"/api/admin/orderProject/projectDistribution"}
          data={this.state.assignData}
          showDesc={this.state.assignVisible}
          closeDesc={this.closeAssign.bind(this)}
          fenpaiData={8}
          specially={this.state.nub == "咨询师经理" ? 1 : 0}
          // 判断是转交按钮还是分配任务按钮
          // chooseBtn={this.state.nub == "咨询师经理" ? true : false}
          roleName={this.state.nub}
          requestMethod={"post"}
        />
        <Modal
          className="customeDetails"
          footer=""
          title="任务详情"
          width="900px"
          visible={this.state.visible}
          onOk={this.visitOk}
          onCancel={this.visitCancel}
        >
          <Form
            layout="horizontal"
            onSubmit={this.handleSubmit}
            id="demand-form"
            style={{ paddingBottom: "40px" }}
          >
            <Spin spinning={this.state.loading}>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="订单编号"
                >
                  <span>{this.state.orderNo}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="合同编号"
                >
                  <span>{this.state.contractNo}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="客户名称"
                >
                  <span>{this.state.userName}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="合同签订时间"
                >
                  <span>{this.state.signDate}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="流程状态"
                >
                  <span>{getProcessStatus(this.state.processStatus)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="结算状态"
                >
                  <span>
                    {getLiquidationStatus(this.state.liquidationStatus)}
                  </span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="企业联系人"
                >
                  <span>{this.state.contacts}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="联系人电话"
                >
                  <span>{this.state.contactMobile}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="企业法人"
                >
                  <span>{this.state.legalPerson}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="法人电话"
                >
                  <span>{this.state.legalPersonTel}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="签单金额(万元)"
                >
                  <span>{this.state.totalAmount}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="首付金额(万元)"
                >
                  <span>{this.state.firstAmount}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="特批立项"
                >
                  <span>{getApprovedState(this.state.approval)}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="已收款项(万元)"
                >
                  <span>{this.state.settlementAmount}</span>
                </FormItem>
                <div className="clearfix">
                  <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    label="订单留言"
                  >
                    <p style={{ width: 500, wordWrap: "break-word" }}>
                      {this.state.orderRemarks}
                    </p>
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    label="订单负责人"
                  >
                    <span>{this.state.salesmanName}</span>
                  </FormItem>
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    label="订单负责人电话"
                  >
                    <span>{this.state.salesmanMobile}</span>
                  </FormItem>
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    label="订单部门"
                  >
                    <span>{this.state.depName}</span>
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    label="当前财务负责人"
                  >
                    <span>{this.state.nowFinance}</span>
                  </FormItem>
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    label="当前财务负责人电话"
                  >
                    <span>{this.state.nowFinanceMobile}</span>
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    style={{ opacity: ".5" }}
                    label="原订单负责人"
                  >
                    <span>{this.state.oldSalesmanName}</span>
                  </FormItem>
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    style={{ opacity: ".5" }}
                    label="原订单负责人电话"
                  >
                    <span>{this.state.oldSalesmanMobile}</span>
                  </FormItem>
                </div>
                <div className="clearfix">
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    style={{ opacity: ".5" }}
                    label="实际财务操作人"
                  >
                    <span>{this.state.financeName}</span>
                  </FormItem>
                  <FormItem
                    className="half-item"
                    {...formItemLayout}
                    style={{ opacity: ".5" }}
                    label="实际财务操作人电话"
                  >
                    <span>{this.state.financeMobile}</span>
                  </FormItem>
                </div>
                <div>
                  <span style={{ marginLeft: "50px", fontSize: "20px" }}>
                    项目业务
                  </span>
                  {this.state.processStatus == 0 ? (
                    <Button
                      type="primary"
                      onClick={this.addDetailed}
                      style={{
                        float: "right",
                        marginRight: "50px",
                        marginBottom: "15px"
                      }}
                    >
                      添加项目明细
                    </Button>
                  ) : (
                    ""
                  )}
                </div>
                <div className="patent-table">
                  <Spin spinning={this.state.loading}>
                    <Table
                      columns={this.state.columnsX}
                      dataSource={this.state.dataSourceX}
                      pagination={this.state.paginations}
                      onRowClick={this.tableRowClickX}
                    />
                  </Spin>
                </div>
              </div>
            </Spin>
          </Form>
        </Modal>
        <Modal
          maskClosable={false}
          visible={this.state.addnextVisible}
          onOk={this.nextCancel}
          onCancel={this.nextCancel}
          width="800px"
          title="项目任务详情"
          footer=""
          className="admin-desc-content"
        >
          <Form layout="horizontal" onSubmit={this.nextSubmit} id="demand-form">
            <Spin spinning={this.state.loading}>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="项目名称"
                >
                  <span>{this.state.commodityName}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="项目数量"
                >
                  <span>{this.state.commodityQuantity}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="金额(万元)"
                >
                  <span>{this.state.commodityPrice}</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="主要项目"
                >
                  <span>{getboutique(this.state.main)}</span>
                </FormItem>
                <div className="clearfix">
                  <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    label="服务说明"
                  >
                    <span>{this.state.taskComment}</span>
                  </FormItem>
                </div>
              </div>
            </Spin>
          </Form>
        </Modal>
      </div>
    );
  }
});

export default Task;