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

// 创建“el-option”
function createOptionHtml(select) {
  let optionHtml = ''
  const slot = select.__slot__
  if (slot && slot.options && slot.options.length) {
    // optionHtml = `<el-option v-for="(item, index) in ${select.__vModel__}Options" :key="index" :label="item.label" :value="item.value"></el-option>`
    slot.options.forEach(option => {
      optionHtml += `<el-option key="${option.value}" label="${option.label}" value="${option.value}"></el-option>\n`
    })
  }
  return optionHtml
}

// 创建“el-option”
function createOptionHtmlForTable(select) {
  const options = []
  select.__slot__.options.forEach(option => {
    options.push(`<el-option key="${option.value}" label="${option.label}" value="${option.value}"></el-option>`)
  })
  return options.join('\n')
}

// 创建“el-select”
function createSelectHtml(formJson, select, parent) {
  const vModel = getVModelHtml(formJson, select, parent)
  const placeholder = select.placeholder ? `placeholder="${select.placeholder}"` : ''
  const width = select.style && select.style.width ? ':style="{width: \'100%\'}"' : ''
  const disabled = select.disabled ? ':disabled=\'true\'' : ''
  const filterable = select.filterable ? 'filterable' : ''
  const multiple = select.multiple ? 'multiple' : ''

  // 创建“el-option”
  let optionHtml = select.inTable ? createOptionHtmlForTable(select) : createOptionHtml(select)

  // 换行
  if (optionHtml) optionHtml = `\n${optionHtml}\n`

  return `<el-select ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${width}>${optionHtml}</el-select>`
}

/**
 * 获取下拉选择HTML
 * @param formJson 表单结构
 * @param select 下拉选择组件
 * @param parent 父组件（dialog, table...）
 * @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
 * @returns {string} 下拉选择HTML
 */
export default function getSelectHtml(formJson, select, parent, isSomeSpanUnequal24) {
  // 创建“el-select”
  const selectHtml = createSelectHtml(formJson, select, parent)

  // 用“el-form-item”包裹“el-select”
  let formItemHtml = formItemWrapper(formJson, select, selectHtml)

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

  return formItemHtml
}