import {Block, Page, Panel, Toolbar} from '@bizComponents';
import {Loader, FormEL, EditableDataTable, UdcSelect, Suggest, SuggestSelect} from '@components';
import {dataUtils, enums, formUtils} from '@utils';
import {Card, DatePicker, Input, message} from 'antd';
import {connect} from 'dva';
import {routerRedux} from 'dva/router';
import React from 'react';
const {TextArea} = Input;

const BidGroupDetail = ({bidGroupDetail, dispatch, loading}) => {
  const {mode, formData, list, itemC3Id, saveBtnHidden, readOnly, saveBtnFlag} = bidGroupDetail;
  const domain = 'bidGroupDetail';
  const domainCN = '评标小组';

  let showFlagButton = false;

  if (mode == 'create' || mode == 'update') {
    showFlagButton = true;
  }else if (mode == 'view'){
  }

  const basic = [{
    title: '小组名称',
    dataIndex: 'groupName',
    tag: <Input placeholder="小组名称"/>,
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
  }, {
    title: '物料品类',
    dataIndex: 'itemC3Id',
    tag: <SuggestSelect apiName="c3" params={{ mode }} />,
    options: {
      rules: [
        {
          required: true,
          message: '必填',
        },
      ],
    },
  }, {
    title: '小组说明',
    dataIndex: 'memo',
    tag: <TextArea placeholder="" autosize={{minRows: 2, maxRows: 15}}/>,
  }]

  const handleEmpChange = (index, newValue) => {
    dispatch({type: `${domain}/updateEmp`, payload: {index, empId: newValue}});
  };


  // 小组成员
  const tableProps = {
    rowKey: 'id',
    scroll: {
      x: 100,
    },
    domain,
    dispatch,
    loading, 
    enableSelection: showFlagButton,
    dataSource: list,
    showAdd: showFlagButton,
    showDelete: showFlagButton,
    showCopy: false,
    size: 'small',
    columns: [{
      title: '员工姓名',
      dataIndex: 'empName',
      width: 150,
      className: 'alignLeft',
      required: true,
      render: (value, row, index) => {
        return (
          <SuggestSelect apiName="empsByDataPower"
                         size="small"
                         showCode={true}
                         params={{ itemC3Id }}
                         value={value}
                         disabled={mode === 'view' || mode === 'approval' ? true : false}
                         onChange={(inputValue) => handleEmpChange(index, inputValue)}
          />);
      },
    }, {
      title: '员工编号',
      dataIndex: 'empCode',
      width: 100,
      className: 'noWrap',
      render: (value, row, index) => {
        return (<Input disabled={true} size="small" value={value}/>);
      },
    }, {
      title: '所属公司',
      dataIndex: 'ouName',
      width: 100,
      className: 'alignLeft',
      render: (value, row, index) => {
        return (<Input disabled={true} size="small" value={value}/>);
      },
    }, {
      title: '所属部门',
      dataIndex: 'orgName',
      width: 100,
      className: 'rogName',
      render: (value, row, index) => {
        return (<Input disabled={true} size="small" value={value}/>);
      },
    }, {
      title: '系统角色',
      dataIndex: 'roleNames',
      width: 100,
      render: (value, row, index) => {
        return (<Input disabled={true} size="small" value={value}/>);
      },
    }, {
      title: '联系电话',
      dataIndex: 'mobile',
      width: 100,
      className: 'alignLeft',
      render: (value, row, index) => {
        return (<Input disabled={true} size="small" value={value}/>);
      },
    },],
  };

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];
    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

  const handleSave = () => {
    if (list.length === 0) {
      message.error('请至少选择一个员工', 3);
      return 0;
    }
    formUtils.validateForm([...basic], Object.assign(formData), () => {
      dispatch({ type: `${domain}/save`});
    });
  };
  const handleCancel = () => {
    dispatch({type: `${domain}/cancel`});
  };

  const buttons = [
    {
      id: 'save',
      text: '保存',
      type: 'primary',
      hidden: saveBtnFlag?(!saveBtnHidden):true,
      onClick: () => {
        handleSave();
      },
    },
  ];
  return (
    <div style={{height: '100%'}}>

      <Toolbar
        buttons={buttons}
        handleCancel={handleCancel}
        loading={loading}
        mode='view'
        record={formData}
      />
      <Card
        id="basic"
        title='基本信息'
        loading={loading.effects[`${domain}/query`]}
      >
        <FormEL
          items={basic}
          record={formData}
          readOnly={readOnly}
          onFieldsChange={handleFormChange}
        />
      </Card>
      <Card title="小组成员">
        <EditableDataTable {...tableProps} />
      </Card>

    </div>);
};

export default connect(({bidGroupDetail, loading}) => ({
  bidGroupDetail,
  loading,
}))(BidGroupDetail);
