import React, { Component } from "react";
import { WeaRightMenu, WeaTableEdit, WeaTop } from "ecCom";
import { Button } from "antd";
import { i18n } from "../../public/i18n";

class ColumnPermission extends Component {
  getTopMenuBtns = () => {
    return [
      <Button type="primary">调整</Button>
    ];
  };
  getDropMenuDatas = () => {
    return [
      {
        key: "add",
        icon: <i className="icon-search"/>,
        content: "调整"
      }
    ];
  };

  render() {
    const columns = [
      {
        title: "栏目",
        dataIndex: "column",
        key: "column",
        com: [
          { label: "", type: "TEXT", viewAttr: 1, key: "column" }
        ]
      },
      {
        title: "是否启用",
        dataIndex: "isused",
        key: "isused",
        com: [
          {
            type: "CHECKBOX",
            key: "isused",
            viewAttr: 1,
          }
        ]
      },
      {
        title: "所有人可见",
        dataIndex: "all",
        key: "all",
        com: [
          {
            type: "CHECKBOX",
            key: "all"
          }
        ]
      },
      {
        title: "上级可见",
        dataIndex: "highVisible",
        key: "highVisible",
        com: [
          {
            type: "CHECKBOX",
            key: "highVisible"
          }
        ]
      },
      {
        title: "所有上级可见",
        dataIndex: "allVisible",
        key: "allVisible",
        com: [
          {
            type: "CHECKBOX",
            key: "allVisible"
          }
        ]
      },
      {
        title: "查看自定义",
        dataIndex: "customRole",
        key: "customRole",
        com: [
          { label: "", type: "TEXT", viewAttr: 1, key: "customRole" }
        ]
      }
    ];
    const datas = [
      {
        id: "1",
        column: "基本信息",
        isused: false,
        all: false,
        highVisible: true,
        allVisible: false,
        customRole: "角色1",
      }
    ];
    return (
      <div style={{ height: "100%" }}>
        <WeaRightMenu
          ecId={`${this && this.props && this.props.ecId || ""}_WeaRightMenu@k6oc4u`}
          datas={[]}
          onClick={key => console.log(key)}
        >
          <WeaTop
            ecId={`${this && this.props && this.props.ecId || ""}_WeaTop@bj98s7`}
            title={i18n.label.cardView()}
            icon={<i className="icon-coms-hrm"/>}
            iconBgcolor="#217346"
            loading={true}
            buttons={this.getTopMenuBtns()}
            showDropIcon={true}
            dropMenuDatas={this.getDropMenuDatas()}
            onDropMenuClick={(e) => console.log(e)}
          />
          <WeaTableEdit
            columns={columns}
            datas={datas}
            showAdd={false}
            showCopy={false}
            showDelete={false}
            showTitle={false}
          />
        </WeaRightMenu>
      </div>
    );
  }
}

export default ColumnPermission;