？<template>
  <layout-form>
    <el-dialog
      :title="flowDialog.title"
      :visible.sync="flowDialog.visible"
      width="800px"
      append-to-body
    >
      <!--表单添加-->
      <el-form label-width="80px">
        <div>
          <el-button size="mini" plain type="success" @click="addListRow()"
            >新增办理流程</el-button
          >
          <el-table
            :data="dynamicForm.options"
            border
            style="width: 100%; margin-top: 15px"
          >
            <el-table-column label="内容" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'options.' + scope.$index + '.content'"
                >
                  <el-input
                    type="textarea"
                    v-model="scope.row.content"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="160" 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)"
                    >删除</el-button
                  >
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="flowConfirm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size="small"
      style="width: 100%"
      label-width="120px"
      ref="form"
    >
      <el-row>
        <Field
          label="模板标题"
          prop="title"
          v-model="form.title"
          :span="14"
          placeholder="请输入模板标题"
        />
        <el-col span="12">
          <el-form-item label="办理流程" class="my-form-field">
            <el-button @click.prevent="handEditFlow(form.content)"
              >编辑办理流程</el-button
            >

            <br />

            <span style="white-space: pre-wrap">{{ content }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <form-buttons @submit="submitForm" />
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
export default {
  mixins: [form],
  created() {
    const { basicsId } = this.$route.query;
    this.form.basicsId = basicsId;
  },
  methods: {
    beforeRender(data) {
      if (data.entity.content && data.entity.content.length > 0) {
        this.dynamicForm.options = JSON.parse(data.entity.content);
        this.content = this.formterFlowStr(this.dynamicForm.options);
      }
      return data;
    },

    handTableDelete(index, val) {
      this.dynamicForm.options.splice(index, 1);
    },

    handEditFlow(val) {
      this.flowDialog.visible = true;
    },

    flowConfirm() {
      //确定 组装qa
      this.content = this.formterFlowStr(this.dynamicForm.options);
      this.form.content = JSON.stringify(this.dynamicForm.options);
      this.flowDialog.visible = false;
    },

    formterFlowStr(arrs) {
      let temp = [];
      for (let i = 0; i < arrs.length; i++) {
        let str = "";
        str += i + 1 + ": " + arrs[i].content + "\n";
        temp.push(str);
      }

      return temp.join("");
    },

    cancel() {
      this.flowDialog.visible = false;
    },

    addListRow() {
      this.dynamicForm.options.push({
        content: "",
      });
    },
  },
  data() {
    return {
      flowDialog: {
        visible: false,
        title: "办理流程",
      },
      content: "",

      dynamicForm: {
        options: [],
      },
      rules: {
        title: [{ max: 64, message: "最多只能录入64个字符", trigger: "blur" }],
        content: [
          { required: true, message: "请输入办理流程", trigger: "blur" },
          { max: 65535, message: "最多只能录入65535个字符", trigger: "blur" },
        ]
      },
    };
  },
};
</script>