<template>
  <layout-form>
    <el-row :gutter="50">
      <el-col :span="10">
        <el-card class="box-card">
          <div>
            <el-image style="width: 100%" :src="preViewUrl" lazy></el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card style="width: 100%">
          <!--申请流程初始化表单模块-->

          <parser
            :key="new Date().getTime()"
            :form-conf="variablesData"
            @submit="sumbitForm"
          /> </el-card
      ></el-col>
    </el-row>

    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="50%"
      append-to-body
    >
      <div>
        <el-image style="height: 400" :src="upload.preViewUrl" lazy></el-image>
      </div>
    </el-dialog>
  </layout-form>
</template>

<script>
import Parser from "@/components/parser/Parser";
export default {
  components: { Parser },
  toString: [],
  created() {
    const { docId, templateId } = this.$route.query;
    console.log("docId,templateId", docId, templateId);
    this.templateId = templateId;
    this.loading = true;

    this.$post("/doc/baseinfo/view", { id: [docId] })
      .then((res) => {
        if (res && res.code && res.code == 1) {
          this.preViewUrl = "/m/file/" + res.data.entity.preViewPath;
        }
      })
      .catch((error) => {
        this.$message.error(error.message);
      });

    this.$post("/doc/template/view", { id: [templateId] })
      .then((res) => {
        if (res && res.code && res.code == 1) {
          //console.log(res);
          let json = JSON.parse(res.data.entity.docFormEntity.formContent);

          //构建方法

          json.__methods__={ clickbtn_1_身份证号码() {
            console.log(
              `%c【测试按钮1】点击事件里可以访问当前表单：
                1) formModel='formData', 所以this.formData可以拿到当前表单的model
                2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
              `,
              'color:#409EFF;font-size: 15px'
            )
            console.log('表单的Model：', this.formData)
            console.log('表单的ref：', this.$refs.elForm)
            this.$message.success("触发按钮事件!")
          }}



          this.variablesData = json;
        }
      })
      .catch((error) => {
        this.$message.error(error.message);
      });
  },
  methods: {
    sumbitForm(data) {
      //提交申报数据
      console.log("sumbitForm提交数据：", data);

      let formData = data.formData;

      //遍历
      for (let field of formData.fields) {
        if ("el-checkbox-group" === field.__config__.tag) {
          console.log(field.__slot__.options);


          console.log(field.__slot__.options);
          let options = field.__slot__.options;

          let arrs=options.map(m=>m.label);

          // let ckslabel="";

          // for (let option of options) {
          //   ckslabel+=option.label+","
          //   console.log("label", option.label);
          // }
          console.log("__vModel__",field.__vModel__)
          let label=field.__vModel__+"_label";
          data.valData[label]=arrs.join("-")

         //构建所有复选项。

        }
      }

      this.loading = false;
      let formStr = JSON.stringify(data.valData);
      this.$post("/doc/baseinfo/mergeFormToDocByTemplate", {
        form: formStr,
        templateId: this.templateId,
      })
        .then((res) => {
          this.loadingTimer = setTimeout(() => {
            this.upload.preViewUrl = "/m/file/" + res.preview;

            this.upload.open = true;
          }, 300);
        })
        .catch((error) => {
          this.$message.error(error.message);
        });

      console.log("sumbitForm提交数据：", data);
    },
  },
  data() {
    return {
      upload: {
        // 是否显示弹出层（doc基础信息导入）
        open: false,
        // 弹出层标题（doc基础信息导入）
        title: "预览表单结果",
        preViewUrl: "",
      },
      templateId: "",
      preViewUrl: "",
      variablesData: {}, // 流程变量数据
      // 子表选中数据
      checkedDocTemplate: [],
      // doc模板表格数据
      docTemplateList: [],
      rules: {
        name: [{ trigger: "blur" }],
        samplePath: [{ trigger: "blur" }],
        remark: [{ trigger: "blur" }],
      },
    };
  },
};
</script>