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

// 创建“el-time-picker”
function createTimePickerHtml(formJson, timePicker, parent) {
  const vModel = getVModelHtml(formJson, timePicker, parent)
  const placeholder = timePicker.placeholder ? `placeholder="${timePicker.placeholder}"` : ''
  const width = timePicker.style && timePicker.style.width ? ':style="{width: \'100%\'}"' : ''
  const disabled = timePicker.disabled ? ':disabled=\'true\'' : ''
  const format = timePicker.format ? `format="${timePicker.format}"` : ''
  const valueFormat = timePicker['value-format'] ? `value-format="${timePicker['value-format']}"` : ''
  const pickerOptions = timePicker['picker-options'] ? `:picker-options='${JSON.stringify(timePicker['picker-options'])}'` : ''

  return `<el-time-picker ${vModel} ${format} ${valueFormat} ${pickerOptions} ${placeholder} ${width} ${disabled}></el-time-picker>`
}

/**
 * 获取“时间选择”HTML
 * @param formJson 表单结构
 * @param timePicker “时间选择”组件
 * @param parent 父组件（dialog, table...）
 * @param isSomeSpanUnequal24 是否有的组件“span”不等于“24”
 * @returns {string} “时间选择”HTML
 */
export default function getTimePickerHtml(formJson, timePicker, parent, isSomeSpanUnequal24) {
  // 创建“el-time-picker”
  const timePickerHtml = createTimePickerHtml(formJson, timePicker, parent)

  // 用“el-form-item”包裹“el-time-picker”
  let formItemHtml = formItemWrapper(formJson, timePicker, timePickerHtml)

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

  return formItemHtml
}