import React, { useEffect, useState, useCallback } from 'react';
import clsx from 'clsx';
import { Input, Radio, Spin, Select } from 'antd';
import { getDeepValue  } from '@/utils'
// import { getPerson } from '@/request/common/api'
import _ from 'lodash';
import styles from './style.module.less'
const { TextArea } = Input
const { Option } = Select

export default function EditTable(props) {
  const { renderFormData, value = [{}], onChange } = props
  // const ss = value || [{}]
  // const [ valueList, setValueList ] = useState(value)
  function onChangeTableValue(idx, key, val) {
    let list = _.clone(value)
    list[idx][key] = val
    onChange(renderFormData.key, list)
  }
  function add(idx) {
    let list = _.clone(value)
    list.splice(idx + 1, 0, {})
    onChange(renderFormData.key, list)
  }
  function del(idx) {
    let list = _.clone(value)
    list.splice(idx, 1)
    onChange(renderFormData.key, list)
  }
  return (
    <div className={styles.EditTable}>
      <table className={styles.table}>
        <thead>
          <tr>
            {
              renderFormData.tableHeaderRender.map(t => (
                <th className={styles.head} key={t.name}>{t.name}</th>
              ))
            }
            {/* <th className=""></th> */}
            {/* <th class="">模块</th>
            <th>模块名</th> */}
          </tr>
        </thead>
        <tbody>
            {
              // map每一行
              value.map((h, idx) => (
                // map每一列
                <tr key={idx} style={{ position: 'relative' }}>
                {renderFormData.tableBodyRender.map(t => (
                  <td className={styles.body} key={`${t.key}_${idx}`}>
                    <Input
                      placeholder={t.placeholder}
                      value={h[t.key] || ''}
                      disabled={renderFormData.disabled}
                      onChange={(e) => onChangeTableValue(idx, t.key, e.target.value)}
                    />
                  </td>
                ))}
                  <td className={styles.btnGroup}>
                    <i
                      className={clsx(styles.iconBtn, 'iconfont icon')}
                      onClick={() => add(idx)}
                    >
                      &#xe609;
                    </i>
                    {value.length > 1
                    &&
                      <i
                        className={clsx(styles.iconBtn, 'iconfont icon')}
                        onClick={() => del(idx)}
                      >
                        &#xe600;
                      </i>
                    }
                  </td>
                </tr>
              ))
            }
        </tbody>
      </table>
    </div>
  );
}
