import { getVModelHtml, formItemWrapper, colWrapper } from './common/htmlWrapper'

// 创建“el-radio”或者“el-radio-button”
function createRadioHtml(radio) {
  let radioHtml = ''

  // 插槽
  const slot = radio.__slot__
  // 配置
  const config = radio.__config__

  // 选项
  if (slot && slot.options && slot.options.length) {
    // 标签
    const tag = config.optionType === 'button' ? 'el-radio-button' : 'el-radio'
    // 边框
    const border = config.border ? 'border' : ''

    radioHtml = `<${tag} v-for="(item, index) in ${radio.__vModel__}Options" :key="index" :label="item.value" ${border}>{{item.label}}</${tag}>`
  }

  return radioHtml
}

// 创建“el-radio-group”
function createRadioGroupHtml(formJson, radio, parent) {
  const vModel = getVModelHtml(formJson, radio, parent)
  const width = radio.style && radio.style.width ? ':style="{width: \'100%\'}"' : ''
  const disabled = radio.disabled ? ':disabled=\'true\'' : ''
  const size = radio.size ? `size="${radio.size}"` : ''

  // 创建“el-radio”或者“el-radio-button”
  const radioHtml = createRadioHtml(radio)

  return `<el-radio-group ${vModel} ${size} ${disabled} ${width}>${radioHtml}</el-radio-group>`
}

/**
 * 获取“单选框组”HTML
 * @param formJson 表单结构
 * @param radio “单选框组”组件
 * @param parent 父组件（dialog, table...）
 * @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
 * @returns {string} “单选框组”HTML
 */
export default function getRadioHtml(formJson, radio, parent, isSomeSpanUnequal24) {
  // 创建“el-radio-group”
  const radioGroupHtml = createRadioGroupHtml(formJson, radio, parent)

  // 用“el-form-item”包裹“el-radio-group”
  let formItemHtml = formItemWrapper(formJson, radio, radioGroupHtml)

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

  return formItemHtml
}