import {
  addFormVariables, addFunction
} from './script.js';

import {
  addCode
} from './template.js';

import {
  getInputCode
} from './input.js';

import {
  getTableCode
} from './table.js';

const elementEnum = {
  'hw-input': getInputCode, 'hw-table': getTableCode
};

const getFormField = (tier, formData, elementData) => {
  console.log(tier);
  let res = ``;
  if (tier && tier.length > 0) {
    tier.forEach((item, index) => {
      if (index === 0) {
        res += `${item}`;
      } else {
        res += `['${item}']`;
      }
    });
  }
  // if (formData !== '') {
  //   res += `['${formData}']`;
  // }
  console.log(res);
  if (elementData !== '') {
    if (res === '') {
      res += `${elementData}`;
    } else {
      res += `['${elementData}']`;
    }
  }
  return res;
};

const getFormCode = (data) => {
  let code = ``;
  let variablesCode = ``;
  let functionCode = ``;
  let isForm = data.isForm || false;
  let formData = data.elementData || {};
  let tier = data.tier || [];
  let parentData = data.formData || {};
  let formVariables = getFormField(tier, parentData.options ? (parentData.options.key || ('form' + parentData.options.uuid)) : '', formData.options.key || ('form_' + formData.options.uuid));
  addFormVariables(tier, formData.options.key || ('form_' + formData.options.uuid), {});
  if (isForm) {
    // code += `<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`;
    addCode(`<el-form-item label="${formData.options.name || ''}" required="${formData.options.required}">`);
  } else {
    // code += `<div> `;
    addCode(`<div> `);
  }
  // code+ = `<el-form :model="pageForm['${formData.options.key || ('form-' + formData.options.uuid)}']" label-width="${formData.options.labelWidth}" >`;
  addCode(`<el-form :model="${formVariables} " label-width="${formData.options.labelWidth}" >`);

  tier.push(formData.options.key || ('form-' + formData.options.uuid));
  formData.tasks.forEach(task => {
    if (task.type === 'hw-form') {
      getFormCode({
        isForm: true, formData: formData, elementData: task, tier
      });
    } else {
      const noFun = () => {
      };
      (elementEnum[task.type] || noFun)({
        isForm: true, formData: formData, elementData: task, tier
      });
    }
  });

  // code += `</el-form>`;
  addCode(` <el-form-item>
      <el-button type="primary" @click="${(formData.options.key || ('form_' + formData.options.uuid))}Submit">${formData.options.submitBottomName}</el-button>
      <el-button>${formData.options.resetBottomName}</el-button>
    </el-form-item>`);
  addFunction(`
 const ${formData.options.key || ('form_' + formData.options.uuid)}Submit = async ()=>{
    let formData = ${formVariables}.value
    let localData = pageData.value
 ${formData.options.submitFunction}}
  `);
  addCode(`</el-form>`);
  addCode(`
    <pagination v-show="pageData.total > 0"
                v-model:page="${formVariables}['${formData.options.pageNum}']"
                v-model:limit="${formVariables}['${formData.options.pageSize}']"
                :total="pageData.total" @pagination="${(formData.options.key || ('form_' + formData.options.uuid))}Submit" />
  `);
  if (isForm) {
    // code += `</el-form-item>`;
    addCode(`</el-form-item>`);
  } else {
    // code += `</div>`;
    addCode(`</div>`);
  }
  addCode(code);

};

export {
  getFormCode
};
