<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-divider></el-divider>
        <!--表单添加-->
        <div v-show="form.answer == 0 || form.answer == 1">
        <el-button size="mini" plain type="success" @click="addListRow()">新增选项</el-button>
          <el-table :data="form.options" border style="width:100%;margin-top: 15px;" max-height="270" :header-cell-class-name='addHeaderCellClassName' >

            <el-table-column v-for="(index,item) in cols" :key="index" label="备注" width="255" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                    <el-input type="textarea" v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                 </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                 <el-form-item label-width="0">
                    <el-button  size="mini" type="text" icon="el-icon-delete" @click="handTableDelete(scope.$index,scope.row.optionId)">删除</el-button>
                 </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </div>
      ></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);

          //找到设定的方法名
          let method = {};
          for (let field of json.fields) {
            if (field.__config__.tag === "el-button" && field.on) {
              method[field.on.click] = function () {
                //函数体
                console.log("表单的Model：", this.formData);
                console.log("表单的ref：", this.$refs.elForm);

                this.formData[field.__vModel__] = "callbackclick";

                this.$message.success("触发按钮事件!" + field.on.click);
              };
            }
          }
          json.__methods__ = method;
          this.variablesData = json;
        }
      })
      .catch((error) => {
        this.$message.error(error.message);
      });
  },
  methods: {
    addListRow() {
      this.form.options.push({
        "optionContent":"",
        "optionOrder": 0,
        "remark":""
      });
    },
    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);
          return res;
        })
        .then((res) => {
          this.loadingTimer = setTimeout(() => {
     
     console.log("res:"+res)
            this.upload.open = false;
            window.location.href = res.redirectUrl;


          }, 3000);
        })
        .catch((error) => {
          this.$message.error(error.message);
        });

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