// 创建“el-tab-pane”
function createTabPaneHtml(tabs) {
  let tabPaneHtml = ''
  const slot = tabs.__slot__
  if (slot && slot.tabPanes && slot.tabPanes.length) {
    slot.tabPanes.forEach(tabPane => {
      tabPaneHtml += `<el-tab-pane label="${tabPane.label}">${tabPane.label}</el-tab-pane>\n`
    })
  }
  return tabPaneHtml
}

// 创建“el-tabs”
// <el-tabs type="border-card">
//   <el-tab-pane label="标签1">标签1</el-tab-pane>
//   <el-tab-pane label="标签2">标签2</el-tab-pane>
// </el-tabs>
function createTabsHtml(formJson, tabs) {
  const width = tabs.style && tabs.style.width ? ':style="{width: \'100%\'}"' : ''
  const type = tabs.type ? `type="${tabs.type}"` : ''

  // 创建“el-tab-pane”
  const tabPaneHtml = createTabPaneHtml(tabs)

  return `<el-tabs ${type} ${width}>${tabPaneHtml}</el-tabs>`
}

/**
 * 获取“标签页”HTML
 * @param formJson 表单结构
 * @param tabs “标签页”组件
 * @returns {string} “标签页”HTML
 */
export default function getTabsHtml(formJson, tabs) {
  // 创建“el-tabs”
  const tabsHtml = createTabsHtml(formJson, tabs)

  return tabsHtml
}