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

const WeaTable = WeaTableNew.WeaTable;

@inject("columnSetting")
@observer
class PermissionItem extends Component {
  componentDidMount() {
    this.init();
  }

  init = () => {
    const { columnSetting } = this.props;
    columnSetting.loadTabOneRelatedData();
  };
  changeSaveParams = (record, value, dataIndex) => {
    const { columnSetting } = this.props;
    const list = _.isEmpty(columnSetting.columnsPermissionData) ? toJS(columnSetting.tableStore.datas) : columnSetting.columnsPermissionData;
    const dataSource = _.map([...list], it => {
      if (record.id === it.id) {
        return {
          ...it,
          [dataIndex]: value
        };
      }
      return { ...it };
    });
    columnSetting.setColumnsPermissionData(dataSource);
  };
  renderRenderColumns = columns => {
    columns.forEach((c, index) => {
      if (c.dataIndex === "status" || c.dataIndex === "all_people" ||
        c.dataIndex === "superior" || c.dataIndex === "all_superior") {
        c.render = (text, record) => {
          return (
            <WeaCheckbox
              value={record[c.dataIndex]}
              onChange={value => {
                this.changeSaveParams(record, value, c.dataIndex);
              }}
            />
          );
        };
      } else if (c.dataIndex === "custom") {
        c.render = (text, record) => {
          const custom = record[c.dataIndex].split(",");
          const customspan = record[`${c.dataIndex}span`].split(",");
          const replaceDatas = _.map(custom, (item, index) => ({ id: custom[index], name: customspan[index] }));
          return (
            <WeaBrowser
              inputStyle={{ width: 200 }}
              type={65}
              isSingle={false}
              title="多角色"
              linkUrl="/spa/hrm/engine.html#/hrmengine/roleInfo/info?id="
              replaceDatas={replaceDatas}
              onChange={value => {
                this.changeSaveParams(record, value, c.dataIndex);
              }}
            />
          );
        };
      }
    });
  };

  render() {
    const { columnSetting } = this.props, { tableStore } = columnSetting;
    return (
      <div>
        <WeaTable
          ecId={`${(this && this.props && this.props.ecId) || ""}_WeaTable@b43a4c`}
          comsWeaTableStore={tableStore}
          hasOrder={true}
          needScroll={true}
          getColumns={c => this.renderRenderColumns(c)}
          onOperatesClick={(record, index, operate) =>
            this.onOperatesClick(record, index, operate)}
        />
      </div>
    );
  }
}

export default PermissionItem;