import getSimpleComponentHtml from './common/simpleComponentHtmlFactory'

// 创建“el-table-column”
function createTableColumnHtmls(dialog) {
  return dialog.__config__.children.map(child => {
    let tableColumnHtml = ''

    if (child.FComponentType === 'oneText' || child.FComponentType === 'datePicker') { // 单行文本、日期选择
      tableColumnHtml = `<el-table-column prop="${child.__vModel__}" label="${child.__config__.label}"></el-table-column>`
    } else if (child.FComponentType === 'select') { // 下拉选择
      let spanHtmls = ''

      child.__slot__.options.forEach((option, index) => {
        if (index === 0) {
          spanHtmls += `<span v-if="scope.row.${child.__vModel__} == '${option.value}'">${option.label}</span>\n`
        } else {
          spanHtmls += `<span v-else-if="scope.row.${child.__vModel__} == '${option.value}'">${option.label}</span>\n`
        }
      })

      tableColumnHtml = `
          <el-table-column prop="${child.__vModel__}" label="${child.__config__.label}">
            <template slot-scope="scope">
              ${spanHtmls}
            </template>
          </el-table-column>
        `
    }

    return tableColumnHtml
  })
}

// 创建“el-table”
function createTableHtml(dialog) {
  // 创建“el-button”
  const buttonHtml = `<el-button size="mini" @click="${dialog.FVisibleParamName} = true" style="margin-bottom: 10px;">新增</el-button>`

  // 创建“el-table-column”
  const tableColumnHtmls = createTableColumnHtmls(dialog)

  // 创建“el-table”
  const tableHtml = `
      <el-table :data="formData.${dialog.__vModel__}" border style="width: 100%; margin-bottom: 20px;">
        ${tableColumnHtmls.join('\n')}
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="dialogTableEdit(scope.row, '${dialog.FVisibleParamName}', '${dialog.FFormDataParamName}', '${dialog.FOperateTypeParamName}')">编辑</el-button>
            <el-button size="mini" type="danger" @click="dialogTableDelete(scope.$index, '${dialog.__vModel__}')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    `

  return buttonHtml + tableHtml
}

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

  return `
    <el-form ref="${dialog.FFormRefParamValue}" :model="${dialog.FFormDataParamName}" :rules="${dialog.FFormRulesParamName}" size="medium" label-width="100px">
      ${formItemHtmls.join('\n')}
    </el-form>
    `
}

// 创建“el-dialog”
function createDialogHtml(dialog, formHtml) {
  return `
      <el-dialog title="${dialog.FTitle}" :visible.sync="${dialog.FVisibleParamName}" width="50%" append-to-body>
        ${formHtml}
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogSubmit('${dialog.__vModel__}', '${dialog.FVisibleParamName}', '${dialog.FFormDataParamName}', '${dialog.FFormRefParamValue}', '${dialog.FOperateTypeParamName}')">确 定</el-button>
          <el-button @click="${dialog.FVisibleParamName} = false">取 消</el-button>
        </span>
      </el-dialog>
    `
}

/**
 * 获取弹框HTML
 * @param formJson 表单结构
 * @param dialog  弹框组件
 * @returns {string} 弹框HTML
 */
export default function getDialogHtml(formJson, dialog) {
  // 创建“el-table”
  const tableHtml = createTableHtml(dialog)

  // 创建“el-form”
  const formHtml = createFormHtml(formJson, dialog)

  // 创建“el-dialog”
  const dialogHtml = createDialogHtml(dialog, formHtml)

  return tableHtml + dialogHtml
}