import { observable, action, toJS } from 'mobx';
import { WeaTools,WeaUpload } from 'ecCom';
import * as API from '../apis/card';
import isEmpty from 'lodash/isEmpty';
import {WeaForm} from 'comsMobx';
import has from 'lodash/has'
import { message } from 'antd';
import forEach from 'lodash/forEach';
import {i18n} from '../public/i18n';

export class HrmPersonal {
  loading = false;
  @observable uploadArr={}
  @observable hrmId = ''
  @observable conditions = []
  @observable tableInfo = []
  @observable tabInfo = []
  @observable isEditor = false
  @observable buttons = {}
  @observable loading = true
  @observable tabkey = '0'
  @observable form = new WeaForm();
  @observable date;
  personalEditTables;
  @observable hasRight = false;

  @observable selectedRowKeys = [];

  @action onRowSelect = (keys) => {
    this.setSelectedRowKeys(keys);
  }

  @action setSelectedRowKeys =(keys)=>{
    this.selectedRowKeys = keys;
  }

  @action
  edit = () => {
    this.isEditor = true;
    this.getData();
    // this.getTabInfo();
    this.tabkey = '0';
  }

  save = () => {
    if(this.loading)
      return;
    this.loading = true;
    this.form.validateForm().then(f => {
      if (f.isValid) {
        if(this.personalEditTables){
          const targetDatas = this.tableInfo[this.tabkey].tabinfo.datas,
           isPass = (targetDatas.length > 0) ? this.personalEditTables.refs.edit.doRequiredCheck().pass : true
           
          if(isPass){
            this.editResource()
          }else{
            this.loading = false;
          }
        }else{
          this.editResource();
        }
      } else {
        f.showErrors();
        this.setDate(new Date());
        this.loading = false;
      }
    })
  }

  editResource = () => {
    let pDatas = this.form.getFormParams();

    API.editResource({ ...{
        operation: 'editpersonalinfo',
        id: this.hrmId
      },
      ...pDatas,
      ...this.getTableEditParams(),
      ...this.uploadArr,
    }).
    then(data => {
      if (data.status == '1') {
        message.success(i18n.message.saveSuccess());
        this.init();
        this.getData();
        this.selectedRowKeys = [];
      } else {
        message.warning(data.message);
      }
      this.loading = false;
    }, error => {
      message.warning(error.message);
      this.loading = false;
    })
  }

  getTableEditParams = () => {
    const params = {};
    this.tableInfo && this.tableInfo.forEach(t => {
      t.tabinfo.datas = t.tabinfo.datas || [];
      params[t.tabinfo.rownum] = t.tabinfo.datas.length;
      t.tabinfo && t.tabinfo.datas && t.tabinfo.datas.forEach((item, index) => {
        !isEmpty(item) && forEach(item, (value, key) => {
         
          let v = toJS(value);
               
          if (Array.isArray(v) && v.length > 0 && v[0].hasOwnProperty('fileid')) {
            v = v.reduce((rs, current) => {
              rs.push(current.fileid);
              return rs;
            }, []).join(',');
          }
          params[`${key}_${index}`] = v;//toJS(value);
          // Object.assign(params,{
          //   [`${key}_${index}`]: value
          // });
        })
      })
    })
    return params
  }

  changeTab = (key) => {
    this.tabkey = key;
  }

  init = () => {
    this.tabkey = '0';
    this.isEditor = false;
    this.form = new WeaForm();
  }

  updateTableInfo = (data) => {
    this.tableInfo = data
  }

  updateTabkey = (key) => {
    this.tabkey = key;
  }

  getTabInfo = () => {
    this.tabInfo = [];
    this.tableInfo && this.tableInfo.forEach((c, idx)=>{
      if(!c.hide){
        this.tabInfo.push({
          key: `${idx}`,
          title: c.tabname,
        })
      }
    })
    if(!isEmpty(this.tabInfo)) this.tabkey = this.tabInfo[0].key;
  }

  getData = (params={}) => {
    this.loading = true;
    params.id=this.hrmId;
    params.viewAttr=this.isEditor?2:1;
    params.is_multilang_set=this.isEditor;
    params.operation = 'getResourcePesonalView';
    API.getResourceCard(params).then((data) => {
      this.hasRight = has(data, 'hasRight') ? data.hasRight : true;

      this.loading = false;
      this.form.initFormFields(data.result.conditions);
      this.conditions = data.result.conditions;
      this.tableInfo = this.handleTable(data.result.tables);
      this.getTabInfo();
      this.buttons = data.result.buttons;
      this.hrmId = data.result.id;

    this.isEditor && this.getSelectedRows();
    })
  }
  uploadChange = (dataIndex, ids,index,record) => {
    const fileId=String(dataIndex)+'_'+String(index)
    this.uploadArr[fileId] =ids
  
  }
  handleTable = (datas) => {
    return datas && datas.filter(d=>!d.hide).map(data => {
      const { tabinfo: { columns } } = data;
      
       
      columns.map(d => {
        d.com.map((b, index) => {
          if (b.type == 'FILEUPLOAD') {
            const url = b.uploadUrl
            d.com[index] = {
              ...d.com[index],
              type: "CUSTOM",
              render: (text, record, index, onEdit) => {
                if(this.isEditor) {
                    return(
                  <WeaUpload
                    // {...b}
                    uploadUrl={url}
                    category="string" 
                    autoUpload={true}
                    type="CUSTOM"
                    datas={[...record[d.dataIndex]]}
                    onChange={(ids,record ) => this.uploadChange(d.dataIndex, ids,index,record)}
                    showClearAll={false}
                    viewAttr={b.viewAttr}
                  >
                  </WeaUpload>)
                } else {
                  return(
                    <WeaUpload
                      // {...b}
                      uploadUrl={url}
                      category="string" 
                      autoUpload={true}
                      type="CUSTOM"
                      datas={[...record[d.dataIndex]]}
                      onChange={(ids,record ) => this.uploadChange(d.dataIndex, ids,index,record)}
                      showClearAll={false}
                      showUpload={false}
                      showOrder={true}
                      showDelete={false}
                      showEditButton={false}
                      sortable={false}
                      viewAttr={b.viewAttr}
                    >
                    </WeaUpload>)
                  }
                
                }
   
              }
            }
          // return d;
        })
      })


      const length = columns.length;
     columns.map(c => {
      c.width = `${95/length}%`
     })
     return data
    })
  }

  getSelectedRows = () => {
    const selectedRows = [];

    this.tableInfo.forEach(t => {
      const singleTableRows = [];

      t.tabinfo.datas.forEach((data, i) => {
        if (data.viewAttr === 1) {
          singleTableRows.push(i);
        }
      });

      selectedRows.push(singleTableRows);
    })

    this.selectedRows = selectedRows;
  }

  setPersonalEditTables = (ref) => {
    this.personalEditTables = ref;
  }
  
  setDate = (date) => {
    this.date = date;
  }
}