import { colWrapper } from './common/htmlWrapper'
import getSimpleComponentHtml from './common/simpleComponentHtmlFactory'

// 创建“el-form-item”
function createFormItemHtmls(formJson, row) {
  const formItemHtmls = row.__config__.children.map(
    child => getSimpleComponentHtml(formJson, child, row, false)
  )

  return formItemHtmls.join('\n')
}

// 创建“el-row”
function createRowHtml(row, formItemHtmls) {
  const type = row.type === 'default' ? '' : `type="${row.type}"`
  const justify = row.type === 'default' ? '' : `justify="${row.justify}"`
  const align = row.type === 'default' ? '' : `align="${row.align}"`
  const gutter = row.gutter ? `:gutter="${row.gutter}"` : ''

  return `
    <el-row ${type} ${justify} ${align} ${gutter}>
        ${formItemHtmls}
    </el-row>
    `
}

/**
 * 获取“行容器”HTML
 * @param formJson 表单结构
 * @param row “行容器”组件
 * @param parent 父组件（dialog, table, row...）
 * @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
 * @returns {string} “行容器”HTML
 */
export default function getRowHtml(formJson, row, parent, isSomeSpanUnequal24) {
  // 创建“el-form-item”
  const formItemHtmls = createFormItemHtmls(formJson, row)

  // 创建“el-row”
  let rowHtml = createRowHtml(row, formItemHtmls)

  // span不为24的用“el-col”包裹“el-form-item”
  if (isSomeSpanUnequal24) {
    rowHtml = colWrapper(row, rowHtml)
  }

  return rowHtml
}