import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaTableNew } from "comsMobx";

import {
  Button,
  Table,
  DatePicker,
  Dropdown,
  Menu,
  message,
  Modal,
} from "antd";

import {
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaRangePicker,
  WeaTable,
  WeaInputSearch,
  WeaSlideModal,
  WeaCheckbox,
  WeaHelpfulTip,
} from "ecCom";

const WeaTableComx = WeaTableNew.WeaTable;

import { renderNoright, getSearchs } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import ContentWrapper from "../../components/contentWrapper";

import { columns, dataSource } from "./columns";

import ChangeSalaryModal from "./changeSalaryModal"
import EditAgentModal from './editAgentModal';
import SlideModalTitle from '../../components/slideModalTitle'
import SlideSalaryItem from './slideSalaryItem'
import SlideAgent from './slideAgent'
import ImportModal from '../../components/importModal'
import SalaryFileViewSlide from './saralyFileViewSlide'
import CustomPaginationTable from "../../components/customPaginationTable"

const { MonthPicker } = DatePicker;

import "./index.less";
import CustomTable from "../../components/customTable";

@inject("salaryFileStore")
@observer
export default class SalaryFile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      changeSalaryVisible: false,
      editAgentVisible: false,
      selectedTab: 0,
      editSlideVisible: false,
      importType: "",
      isInit: false, //是否是初始化导入
      modalVisiable: false,
      step: 0,
      recordSlideVisible: false,
      selectedRowKeys: [],
      showSearchBar: false,
      importResult: {},
      searchValue: ""
    }
    this.pageInfo = {current: 1, pageSize: 10}
  }

  componentWillMount() {
    const {
      salaryFileStore: { doInit },
    } = this.props;
    doInit();
  }

  // 设置导入步数
  setStep(step) {
    this.setState({ step });
  }

  // 渲染导入模板附加元素
  renderFormComponent() {
    return (
      <div style={{ display: "inline-block" }}>
        <WeaCheckbox id="importData" content="导出现有数据" />
        <WeaHelpfulTip
          width={200}
          title="提示：建议先导出现有最新数据，修改后再导入"
          placement="topLeft"
        />
      </div>
    );
  }

  // 导入预览
  handlePreviewImport(params) {
    const {
      salaryFileStore: { importPreview },
    } = this.props;
    params.importType = this.state.importType;
    importPreview(params);
  }

  // 导入档案
  handleImportFile(params) {
    const {
      salaryFileStore: { importSalaryArchive },
    } = this.props;
    params.importType = this.state.importType;
    importSalaryArchive(params).then((data) => {
      data.errorData = data.errorNotice;
      this.setState({
        importResult: data,
      });
    });
  }

  // 导入完成按钮操作
  handleImportFinish() {
    this.setState({ modalVisiable: false, step: 0 });
  }

  // 导出全部
  handleExportAll() {
    const {
      salaryFileStore: { exportSalaryArchive },
    } = this.props;
    exportSalaryArchive();
  }

  // 定制列
  getColumns() {
    const {
      salaryFileStore: { tableStore },
    } = this.props;
    return tableStore.columns
      .filter((item) => item.display == "true")
      .map((item) => {
        item.width = item.oldWidth;
        if (item.dataIndex == "operate") {
          item.render = (text, record) => (
            <a onClick={() => this.handleEdit(record)}>查看</a>
          );
          item.fixed = "right";
        } else if (item.dataIndex == "username") {
          item.fixed = "left";
        }
        return item;
      });
  }

  // 编辑行
  handleEdit(record) {
    this.setState({ editSlideVisible: true });
    const {
      salaryFileStore: { setCurrentId },
    } = this.props;
    setCurrentId(record.id);
  }

  // 显示调整个税扣缴义务人表单
  handSildeOptionMenuClick(e) {
    const {
      salaryFileStore: { setEditAgentVisible },
    } = this.props;
    setEditAgentVisible(true);
  }

  // 查看 Slide 头部操作按钮
  renderEditSlideOperate() {
    return (
      <div style={{ display: "inline-block" }}>
        <Dropdown.Button
          type="primary"
          overlay={
            <Menu onClick={this.handSildeOptionMenuClick.bind(this)}>
              <Menu.Item key="1">调整个税扣缴义务人</Menu.Item>
            </Menu>
          }
          onClick={() => {
            this.setState({ changeSalaryVisible: true });
          }}>
          调薪
        </Dropdown.Button>
      </div>
    );
  }

  // table选中条目
  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  };

  // 显示影响搜索面板
  handleShowSearchBar = () => {
    this.setState({
      showSearchBar: !this.state.showSearchBar,
    });
  };

  // 页面跳转
  handlePageChange = (value) => {
    const { salaryFileStore: {getTableDatas, form}} = this.props;
    this.pageInfo.current = value;
    getTableDatas(this.pageInfo)
  }

  handleShowSizeChange(pageInfo) {
    const { salaryFileStore: {getTableDatas, form}} = this.props;
    getTableDatas(pageInfo)
  }
  
  // 搜索
  handleSearch(value) {
    const {
      salaryFileStore: { getTableDatas, form },
    } = this.props;
    getTableDatas({ username: value });
  }

  // 初始化导入参数
  handleInitModal() {
    const {
      salaryFileStore: { setPreviewDataSource },
    } = this.props;
    setPreviewDataSource([]);
    this.setState({
      importResult: {},
    });
  }

  showColumn = () => {
    const { salaryFileStore: { tableStore } } = this.props;
    console.log("showColumn:", tableStore.setColSetVisible(true));
    tableStore.setColSetVisible(true);
    tableStore.tableColSet(true);
    console.log("showColumn:")
  }

  render() {
    const { salaryFileStore } = this.props;
    const {
      loading,
      hasRight,
      form,
      condition,
      tableStore,
      showSearchAd,
      getTableDatas,
      doSearch,
      setShowSearchAd,
    } = salaryFileStore;
    const {
      importType,
      previewColumns,
      previewDataSource,
      dataSource,
      currentId,
      editAgentVisible,
      setEditAgentVisible,
      pageInfo,
    } = salaryFileStore;

    const { selectedTab, step, selectedRowKeys } = this.state;
    if (!hasRight && !loading) {
      // 无权限处理
      return renderNoright();
    }

    const rightMenu = [
      // 右键菜单
      {
        key: "BTN_COLUMN",
        icon: <i className="icon-coms-Custom" />,
        content: "显示列定制",
        onClick: this.showColumn,
      },
    ];
    const collectParams = {
      // 收藏功能配置
      favname: "薪资档案",
      favouritetype: 1,
      objid: 0,
      link: "wui/index.html#/ns_demo03/index",
      importantlevel: 1,
    };
    const adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>
        重置
      </Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>
        取消
      </Button>,
    ];

    const topTab = [];

    const renderSearchOperationItem = () => {};

    const handleMenuClick = (e) => {
      const { key } = e;
      if (key === "init") {
        Modal.confirm({
          title: "信息确认",
          content: `若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入，点击确定继续导入`,
          onOk: () => {
            this.setState({ importType: e.key, isInit: true, modalVisiable: true, step: 0 });
          },
          onCancel() {},
        });
      } else {
        this.setState({ importType: e.key, isInit: false, modalVisiable: true, step: 0 });
      }
    };

    const handleMenuClick2 = () => {
      const { electedRowKeys } = this.state;
      if (selectedRowKeys.length == 0) {
        message.warning("未选择条目");
        return;
      }
      const {
        salaryFileStore: { exportSalaryArchive },
      } = this.props;
      exportSalaryArchive(selectedRowKeys.join(","));
    };

    const menu = (
      <Menu onClick={handleMenuClick}>
        {importType.map((item) => (
          <Menu.Item key={item.id}>{item.content}</Menu.Item>
        ))}
      </Menu>
    );


    const menu2 = (
      <Menu onClick={handleMenuClick2}>
        <Menu.Item key="1">导出所选</Menu.Item>
      </Menu>
    );

    const renderRightOperation = () => {
      return (
        <div
          style={{ display: "inline-block", position: "relative" }}
          className="salaryFileTabWrapper">
          <WeaHelpfulTip
            style={{ marginRight: "10px" }}
            width={200}
            title="导入按钮使用场景说明：\n
                  1.档案初始化：\n
                  a.初次使用薪酬模块，全量导入员工的薪资档案数据；\n
                  b.员工入职，导入新入职的员工的薪资档案数据（若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入）；\n
                  c.返聘人员使用调薪功能调整薪资档案值或使用调整个税扣缴；\n
                  2.调薪：档案中已存在的人员批量调整薪资项目值（包括返聘人员的情况）；\n
                  3.调整个税扣缴义务人：档案中已存在的人员批量调整个税扣缴义务人（包括返聘人员的情况）；\n"
            placement="topLeft"
          />
          <Dropdown.Button
            type="primary"
            style={{ marginRight: "10px" }}
            overlay={menu}>
            导入
          </Dropdown.Button>
          <Dropdown.Button
            style={{ marginRight: "10px" }}
            overlay={menu2}
            onClick={() => {
              this.handleExportAll();
            }}>
            导出全部
          </Dropdown.Button>
          <Button
            type="default"
            style={{ marginRight: "10px" }}
            onClick={() => {
              this.setState({ recordSlideVisible: true });
            }}>
            调薪记录
          </Button>
          <WeaInputSearch
            value={this.state.searchValue}
            onChange={(value) => {
              this.setState({
                searchValue: value,
              });
            }}
            onSearch={(value) => {
              this.handleSearch(value);
            }}
          />
          {/* <Button type="default" onClick={() =>{this.handleShowSearchBar()}}>高级搜索</Button> */}
        </div>
      );
    };

    const handleSlideMoreMenuClick = () => {};

    const slideMoreMenu = (
      <Menu onClick={handleSlideMoreMenuClick}>
        <Menu.Item key="1">导出全部</Menu.Item>
      </Menu>
    );

    const renderCustomOperate = () => {
      return (
        <div style={{ display: "inline-block" }}>
          <Dropdown.Button type="primary" overlay={slideMoreMenu}>
            导出
          </Dropdown.Button>
          <Button type="default">自定义列</Button>
        </div>
      );
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
          <WeaTop
            title="薪资档案" // 文字
            icon={<i className="icon-coms-meeting" />} // 左侧图标
            iconBgcolor="#F14A2D" // 左侧图标背景色
            showDropIcon={true} // 是否显示下拉按钮
            dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
            dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
          >
            <CustomTab 
              searchOperationItem={
                  renderRightOperation()
              }
            />
            <WeaTableComx
              style={{display: "none"}}
              comsWeaTableStore={tableStore}
              needScroll={true}
            />

            <CustomPaginationTable
              loading={loading}
              rowSelection={rowSelection}
              columns={this.getColumns()}
              dataSource={dataSource}
              total={pageInfo.total}
              current={pageInfo.pageNum}
              pageSize={this.pageInfo.pageSize}
              scroll={{x: this.getColumns().length ? this.getColumns().length * 150 : 1200}}
              onPageChange={(value) => {
                this.handlePageChange(value)
              }}
              onShowSizeChange={(current, pageSize) => {
                this.pageInfo = {current, pageSize}
                this.handleShowSizeChange(this.pageInfo)
              }}
            />
          </WeaTop>
        </WeaRightMenu>

        {this.state.modalVisiable && (
          <ImportModal
            init={() => {
              this.handleInitModal();
            }}
            isInit={this.state.isInit}
            params={{}}
            columns={previewColumns}
            step={step}
            setStep={this.setStep.bind(this)}
            slideDataSource={previewDataSource}
            importResult={this.state.importResult}
            onFinish={() => {
              this.handleImportFinish();
            }}
            previewImport={(params) => {
              this.handlePreviewImport(params);
            }}
            importFile={(params) => {
              this.handleImportFile(params);
            }}
            templateLink={
              "/api/bs/hrmsalary/salaryArchive/downloadTemplate?importType=" +
              this.state.importType
            }
            renderFormComponent={() => {
              this.renderFormComponent();
            }}
            visiable={this.state.modalVisiable}
            onCancel={() => {
              this.setState({ modalVisiable: false });
            }}
          />
        )}
        {this.state.changeSalaryVisible && (
          <ChangeSalaryModal
            currentId={currentId}
            visible={this.state.changeSalaryVisible}
            onCancel={() => {
              this.setState({ changeSalaryVisible: false });
            }}
          />
        )}

        {editAgentVisible && (
          <EditAgentModal
            currentId={currentId}
            visible={editAgentVisible}
            onCancel={() => {
              setEditAgentVisible(false);
            }}
          />
        )}

        {/* 操作记录 */}
        {this.state.recordSlideVisible && (
          <WeaSlideModal
            visible={this.state.recordSlideVisible}
            top={0}
            width={40}
            height={100}
            direction={"right"}
            measure={"%"}
            title={
              <SlideModalTitle
                subtitle={"操作记录"}
                tabs={[
                  { title: "薪资项目", key: 0 },
                  { title: "个税扣缴义务人", key: 1 },
                ]}
                editable={false}
                selectedTab={selectedTab}
                customOperate={() => {
                  renderCustomOperate();
                }}
                subItemChange={(item) => {
                  this.setState({ selectedTab: item.key });
                }}
              />
            }
            content={
              <div>
                {selectedTab == 0 && <SlideSalaryItem />}
                {selectedTab == 1 && <SlideAgent />}
              </div>
            }
            onClose={() => this.setState({ recordSlideVisible: false })}
            showMask={true}
            closeMaskOnClick={() =>
              this.setState({ recordSlideVisible: false })
            }
          />
        )}

        {this.state.editSlideVisible && (
          <WeaSlideModal
            visible={this.state.editSlideVisible}
            top={0}
            width={40}
            height={100}
            direction={"right"}
            measure={"%"}
            title={
              <SlideModalTitle
                subtitle={"员工薪资档案"}
                editable={false}
                customOperate={this.renderEditSlideOperate()}
              />
            }
            content={<SalaryFileViewSlide id={currentId} />}
            onClose={() => this.setState({ editSlideVisible: false })}
            showMask={true}
            closeMaskOnClick={() => this.setState({ editSlideVisible: false })}
          />
        )}
      </div>
    );
  }
}