/*
  * 工资单模板设置
  * 薪资项目查看
  * @Author:    黎永顺
  * @Date:      2024/11/12
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { toJS } from "mobx";
import { WeaLocaleProvider, WeaSortable } from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;

class SalaryItems extends Component {
  render() {
    const { dataSource } = this.props;
    const dataList = _.map(toJS(dataSource), item => ({ ...item, id: item.groupId }));
    return (
      <div className="salaryItemSettingWrapper">
        <WeaSortable datas={dataList} draggableType="icon"
                     renderNodeItem={(item) => {
                       return <div className="salaryItemWrapper">
                         <div className="salaryItemHeader">
                <span className="titleWrapper">
                  <span className="salaryClassTitle">{item.groupName}</span>
                  <span className="iconWrapper"/>
                </span>
                         </div>
                         <div className="salaryItemContent">
                           {
                             !_.isEmpty(item.items) ?
                               <WeaSortable
                                 datas={item.items} draggableType="icon"
                                 renderNodeItem={(filed) => {
                                   return <div className="salaryItemList">
                                     <div className="salaryItem" title={filed.name}>
                                       <div className="salaryItemName"> {filed.name} </div>
                                     </div>
                                   </div>;
                                 }}
                                 className="wea-sortable-salary-item"
                               /> :
                               <div className="empty">暂无数据</div>
                           }
                         </div>
                       </div>;
                     }}
                     className="wea-sortable-salary-item"
        />
      </div>
    );
  }
}

export default SalaryItems;