import React from "react";
import $ from "jquery/src/ajax";
import "./public.less";
import "./shouKuan.less";
import { AutoComplete, Button, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, Modal } from "antd";
import OrderDesc from "../orderDetail/orderDesc";
import ResolutionDetail from "@/resolutionDetail";
import { ChooseList } from "../../order/orderNew/chooseList"
import ReactToPrint from "react-to-print";
import OrderItemStatus from "../../../common/orderItemStatus";
const { TabPane } = Tabs;

const ProjectVip = React.createClass({

  //
  getInitialState() {
    return {
      dvisible: false,
      pageNo: 1,
      totalPage: 0,
      searchValues: {
        status: "1"
      },//查询条件
      loading: false,
      changeList: undefined,// 子组件改变的表格title数组
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.setState({
            pageNo: page,
          });
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        // {
        //   title: "销售类型",
        //   dataIndex: "salesType",
        //   key: "salesType",
        //   render: (text, record) => {
        //     return (
        //       <Tooltip
        //         title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "，" + record.other) : "")}
        //       >
        //         <span>
        //           {salesList[text]}
        //         </span>
        //       </Tooltip>
        //     );
        //   },
        // },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          width: 160,
          render: (text, record) => {
            return (
              <Tooltip
                title={
                  <Button
                    type="primary"
                    onClick={(e) => {
                      e.stopPropagation();
                      let input = document.getElementById("copyText");
                      input.value = text;
                      input.select();
                      document.execCommand("copy");
                      message.success("复制成功");
                    }}
                  >
                    复制
                  </Button>
                }
              >
                <div>
                  {text}
                  <div style={{ display: "flex" }}>
                    {/* <OrderItemStatus deleteSign={record.deleteSign} /> */}
                    {
                      record.approval == 1
                        ? <Tag color="#faa755">特批待审</Tag> :
                        record.approval == 2 && <Tag color="#ff0000">特批通过</Tag>
                    }
                  </div>
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 200,
          render: text => {
            return (
              <Tooltip title={text}>
                <div>{text}</div>
              </Tooltip>
            )
          }
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
          width: 140,
          render: (text, record) => {
            return (
              <Tooltip
                title={
                  <Button
                    type="primary"
                    onClick={(e) => {
                      e.stopPropagation();
                      let input = document.getElementById("copyText");
                      input.value = text;
                      input.select();
                      document.execCommand("copy");
                      message.success("复制成功");
                    }}
                  >
                    复制
                  </Button>
                }
              >
                <div>
                  {text}
                  <div>
                    {record.signTotalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>}
                    {record.projectType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>}
                  </div>
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName",
          className: "title-table",
        },
        {
          title: "订单负责人",
          dataIndex: "salesmanName",
          key: "salesmanName",
          className: "title-table",
        },
        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
          className: "title-table",
        },
        {
          title: "会员项目",
          dataIndex: "projectName",
          key: "projectName",
          className: "title-table",
        },
        {
          title: "项目说明",
          dataIndex: "projectComment",
          key: "projectComment",
          className: "title-table",
          width: 200,
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          className: "title-table",
          render: (text) => {
            return (
              <div>
                {["", "财务审核", "特批审核", "通过", "驳回"][text]}
              </div>
            );
          }
        },
        {
          title: "操作",
          dataIndex: "caozuo",
          key: "caouzo",
          className: "title-table",
          width: 150,
          render: (text, recard) => {
            return (
              <div>
                {
                  recard.status == 1 &&
                  <Button
                    type="primary"
                    onClick={(e) => {
                      e.stopPropagation(),
                        this.checkRemark(recard, 1);
                    }}
                  >
                    通过
                  </Button>
                }
                {
                  recard.status == 1 &&
                  <Button
                    type="danger"
                    style={{ marginLeft: "5px", }}
                    onClick={(e) => {
                      e.stopPropagation(),
                        this.checkRemark(recard, 0);
                    }}
                  >
                    驳回
                  </Button>
                }
              </div>
            );
          },
        },
      ],
      dataSource: [],
      fjlist: [],// 营销员列表
      checkOrderNo: "",//操作订单编号
      checkData: "",//操作描述
      checkVisible: "",//审核弹窗开关
      checkId: "",//会员项目编号
      result: -1,//1同意 0驳回
    };
  },

  componentWillMount() {
    this.loadData();
    this.departmentList();
  },
  // 获取订单部门
  departmentList() {
    $.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);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            });
          });
        }
        this.setState({
          departmentArr: theArr,
        });
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  },
  // 列表数据
  loadData(pageNo, pageSize) {
    const { searchValues, pagination } = this.state
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pageSize || 10,
      shiroType: 2, //财务审核
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/memberList",
      data: datas,
      success: function (data) {
        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,
              totalPage: data.data.totalPage,
            });
          } 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)
    );
  },
  // 点击行
  tableRowClick(record) {
    this.state.RowData = record;
    this.setState({
      showDesc: true,
    });
  },
  // 关闭
  closeDesc(e, s) {
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.page);
    }
  },
  // 搜索
  search() {
    this.setState({
      selectedRowKeys: []
    })
    this.loadData();
  },
  // 重置
  reset() {
    this.setState({
      searchValues: JSON.parse(JSON.stringify({})),
    }, () => {
      this.loadData();
    })
  },
  // 点击审核
  checkRemark(record, nmb) {
    this.setState({
      checkVisible: true,
      checkId: record.id,
      result: nmb
    });
  },
  // 审核
  toExamine() {
    if (!this.state.content) {
      message.warning("请填写审核说明~");
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/examineMemberProject",
      data: {
        id: this.state.checkId,
        remarks: this.state.content,
        result: this.state.result, //1同意 0驳回
        type: 0, //0财务审核  1特批审核
      },
    }).done(
      function (data) {
        if (!data.error.length) {
          message.success("审核成功！");
          this.setState({
            loading: false,
          });
          this.loadData()
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  },
  // 更改表格显示数据
  changeList(arr) {
    const newArr = [];
    this.state.columns.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 = {
      shiroType: 2, //财务审核
    };
    let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
    data = Object.assign(data, obj1);
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/orderProject/memberList/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)
    );
  },
  // 打印
  printAll() {
    this.setState({
      dvisible: true,
    });
    this.loadData(1, 9999999);
  },
  // 下载
  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  },
  // 查询订单负责人列表
  followUp(e) {
    const { searchValues } = this.state;
    this.setState({
      searchValues: Object.assign(searchValues, {
        aname: e,
      }),
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          fjlist: thedata,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  // 选中订单负责人
  selectF(value) {
    const { searchValues, fjlist } = this.state;
    const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
    this.setState({
      searchValues: Object.assign(searchValues, {
        salesmanId: newdataSources.find((item) => item.name == value).id,
      }),
    });
  },
  // 失去焦点
  blurChange(e) {
    let theType = "";
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  },
  // 删除数组最后一项（删除操作列）
  truncate(arr) {
    return arr.filter(function (v, i, ar) {
      return i !== ar.length - 1
    })
  },

  render() {
    const { TextArea } = Input
    const { searchValues, departmentArr = [] } = this.state
    const dataSources = this.state.fjlist || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    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={searchValues["orderNo"]
                  ? searchValues["orderNo"]
                  : ""}
                onChange={(e) => {
                  searchValues["orderNo"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Input
                placeholder="客户名称"
                value={searchValues["userName"]
                  ? searchValues["userName"]
                  : ""}
                onChange={(e) => {
                  searchValues["userName"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Select
                placeholder="订单部门"
                style={{ width: 190, marginRight: 10 }}
                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>
              <Input
                placeholder="合同编号"
                value={searchValues["contractNo"]
                  ? searchValues["contractNo"]
                  : ""}
                onChange={(e) => {
                  searchValues["contractNo"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <AutoComplete
                className="certain-category-search"
                dropdownClassName="certain-category-search-dropdown"
                dropdownMatchSelectWidth={false}
                style={{ width: "120px" }}
                dataSource={options}
                placeholder="订单负责人"
                value={searchValues.aname || undefined}
                onChange={this.followUp.bind(this)}
                filterOption={true}
                onSelect={this.selectF.bind(this)}
              >
                <Input />
              </AutoComplete>
              <Input
                placeholder="项目名称"
                value={searchValues["projectName"]
                  ? searchValues["projectName"]
                  : ""}
                onChange={(e) => {
                  searchValues["projectName"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Select
                style={{ width: 120 }}
                placeholder="签单金额"
                value={searchValues["amountStatus"]
                  ? searchValues["amountStatus"]
                  : undefined}
                onChange={(e) => {
                  searchValues["amountStatus"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <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>
              <Select
                style={{ width: 120 }}
                placeholder="特批状态"
                value={searchValues["approval"]
                  ? searchValues["approval"]
                  : undefined}
                onChange={(e) => {
                  searchValues["approval"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <Option value="0">非特批</Option>
                <Option value="1">特批待审</Option>
                <Option value="2">特批通过</Option>
                <Option value="4">全部特批</Option>
              </Select>
              <Select
                style={{ width: 120 }}
                placeholder="审核状态"
                value={searchValues["status"]
                  ? searchValues["status"]
                  : undefined}
                onChange={(e) => {
                  searchValues["status"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                <Option value="1">财务审核</Option>
                <Option value="2">特批审核</Option>
                <Option value="3">通过</Option>
                <Option value="4">全部</Option>
              </Select>
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
                disabled={this.state.loading ? true : false}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <TabPane tab="打印" key="3">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={this.printAll}
            >
              打印当前列表
            </Button>
          </TabPane>
          <TabPane tab="导出Excel" key="4">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={this.exportAll}
            >
              导出当前列表
            </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}
              pagination={this.state.pagination}
              onRowDoubleClick={this.tableRowClick.bind(this)}
              size="small"
            />
          </Spin>
        </div>
        {/* 订单详情 */}
        <OrderDesc
          data={this.state.RowData}
          showDesc={this.state.showDesc}
          closeDesc={this.closeDesc.bind(this)}
        />
        {
          //打印预览
          this.state.dvisible &&
          <Modal
            visible={this.state.dvisible}
            footer=""
            title="所有列表信息"
            className="admin-desc-content"
            width="1300px"
            onCancel={() => {
              this.loadData();
              this.setState({
                dvisible: false,
              });
            }}
          >
            <Spin spinning={this.state.loading}>
              <div
                className="patent-table"
                style={{
                  padding: "25px 0 30px 30px",
                }}
                ref={(e) => {
                  this.refs.all = e;
                }}
              >
                <Table
                  columns={this.truncate(this.state.columns)}
                  dataSource={this.state.dataSource}
                  pagination={false}
                  bordered
                  size="small"
                />
              </div>
            </Spin>

            <ReactToPrint
              trigger={() => (
                <Button
                  type="primary"
                  style={{
                    float: "right",
                    marginTop: 10,
                    position: "absolute",
                    top: 0,
                    right: 30,
                  }}
                >
                  打印
                </Button>
              )}
              content={() => this.refs.all}
            />
          </Modal>
        }
        {
          //审核弹窗
          this.state.checkVisible &&
          <Modal
            maskClosable={false}
            title="审核订单"
            confirmLoading={this.state.loading}
            visible={this.state.checkVisible}
            onOk={this.toExamine}
            okText={this.state.result == 1 ? "通过" : this.state.result == 0 && "驳回"}
            onCancel={() => {
              this.loadData()
              this.setState({
                checkVisible: false,
                checkData: '',
              })
            }}
          >
            <TextArea
              value={this.state.checkData}
              onChange={(e) => {
                this.setState({
                  checkData: e.target.value,
                })
              }}
              placeholder="请填写审核内容"
            />
          </Modal>
        }
      </div>
    );
  },
});

export default ProjectVip;
