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

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const AccountReview = React.createClass({

  getInitialState() {
    return {
      searchValues: {}, // 列表筛选条件
      loading: 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: "type",
          key: "type",
          render: (text, record) => {
            return (
              <span>
                {accountType.find(item => item.value === text).label}
              </span>
            );
          },
        },
        {
          title: "报销金额",
          dataIndex: "totalAmount",
          key: "totalAmount",
        },
        {
          title: "报销至订单",
          dataIndex: "orderName",
          key: "orderName",
          render: (text, record) => {
            return (
              <div>
                <div>{text || ""}</div>
                <div>{record.contractNo || ""}</div>
              </div>
            );
          },
        },
        {
          title: "报销至部门",
          dataIndex: "appDepName",
          key: "appDepName",
        },
        {
          title: "报销人",
          dataIndex: "aname",
          key: "aname",
        },

        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            return (
              <span style={{ color: accountStatus[text].color }}>
                {accountStatus[text].label}
              </span>
            );
          },
        },
        {
          title: "报销公司/支付公司",
          dataIndex: "payDepName",
          key: "payDepName",
          render: (text, record) => {
            return (
              <div>
                <div>{record.appDepName || ""}</div>
                <div>{text || ""}</div>
              </div>
            );
          },
        },
        {
          title: "报销时间",
          dataIndex: "createTimeStr",
          key: "createTimeStr",
        },
      ],
    };
  },

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

  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
      processStatus: 1,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/pageList",
      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)
    );
  },

  // 搜索
  search() {
    this.loadData();
  },

  // 重置
  reset() {
    this.setState({
      searchValues: JSON.parse(JSON.stringify({})),
    }, () => {
      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,
    });
  },


  render() {
    const { searchValues } = this.state
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>报销审核</span>
        </div>

        <Tabs defaultActiveKey="2" className="test">
          <TabPane tab="搜索" key="2">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Select
                style={{ width: 120 }}
                placeholder="审核状态"
                value={this.state.approval}
                onChange={(e) => {
                  this.setState({
                    approval: e,
                  });
                }}
              >
                <Option value="1">审核中</Option>
                <Option value="2">审核通过</Option>
                <Option value="4">已驳回</Option>
              </Select>
              <span>报销时间：</span>
              <RangePicker
                style={{ width: 300 }}
                value={[
                  searchValues.startTime ? moment(searchValues.startTime) : null,
                  searchValues.endTime ? moment(searchValues.endTime) : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({
                    searchValues: Object.assign(searchValues, {
                      startTime: dataString[0],
                      endTime: dataString[1],
                    }),
                  });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <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>
        </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}
              // onRowDoubleClick={this.tableRowClick.bind(this)}
              size="small"
            />
          </Spin>
          <p
            style={{ display: "inline-block", fontSize: "14px", color: "red" }}
          >
            {
              <span style={{ marginRight: 10 }}>
                {`金额总计(万元):${"0"}`}
              </span>
            }
          </p>
        </div>

        {/* 驳回备注 */}
        <Modal
          visible={this.state.boHuiVisible}
          width="400px"
          title="驳回备注"
          footer=""
          onOk={this.boHuiOk}
          onCancel={this.boHuiCancel}
        >
          <Form layout="horizontal" onSubmit={this.boHuiSubmit}>
            <Spin spinning={this.state.loading}>
              <FormItem
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 16 }}
                label={
                  <span>
                    <strong style={{ color: "#f00" }}>*</strong>驳回原因
                  </span>
                }
              >
                <Input
                  type="textarea"
                  rows={4}
                  placeholder="请输入驳回原因"
                  value={this.state.content}
                  onChange={(e) => {
                    this.setState({ content: e.target.value });
                  }}
                />
              </FormItem>
              <FormItem wrapperCol={{ span: 12, offset: 5 }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ marginRight: 20 }}
                >
                  驳回
                </Button>
                <Button
                  type="default"
                  onClick={() => {
                    this.boHuiCancel();
                  }}
                >
                  取消
                </Button>
              </FormItem>
            </Spin>
          </Form>
        </Modal>

        <textarea id="copyText" style={{ opacity: 0 }} />
      </div>
    );
  },
});

export default AccountReview;
