<!--表单查看页面-->
<template>
  <div class="form-viewer">
    <el-row :gutter="formConf.gutter">
      <el-form
        :ref="formConf.formModel"
        :size="formConf.size"
        :model="form"
        :label-position="formConf.labelPosition"
        :disabled="formConf.disabled"
      >
        <template v-for="(element, index) in itemList">
          <preview-row-item
            v-if="element.compType === 'row'"
            :key="'row-' + index"
            :model="element"
          >
            <el-col
              v-for="column in element.columns"
              :key="column.index"
              :span="column.span"
            >
              <form-view-item
                v-for="item in column.list"
                :key="item.id"
                :model="item"
                v-model="form[item.id]"
              />
            </el-col>
          </preview-row-item>
          <fancy-dynamic-view-table
            v-else-if="element.compType === 'dynamicTable'"
            :key="'dynamic-' + index"
            :data="form[element.id]"
            :ref="element.id"
            :conf="element"
          >
            <template v-slot:item="{ rowScope, item }">
              <fancy-dynamic-table-view-item
                :model="item"
                :ref="item.id + rowScope.$index"
                :parent="element"
                :key="'tableIndex-' + rowScope.$index"
                :index="rowScope.$index"
                v-model="rowScope.row[item.id]"
              />
            </template>
          </fancy-dynamic-view-table>
          <fancy-edit-table
            v-else-if="element.compType === 'table'"
            :key="'table_type' + index"
            :layoutArray="element.layoutArray"
            :tdStyle="element.tdStyle"
            :width="element.width"
            :height="element.height"
          >
            <template v-slot="{ td }">
              <form-view-item
                v-for="item in td.columns"
                :key="item.id"
                :model="item"
                v-model="form[item.id]"
              />
            </template>
          </fancy-edit-table>
          <!--item-->
          <el-col
            class="drag-col-wrapper"
            :key="index"
            :span="element.span"
            v-else
          >
            <form-view-item :model="element" v-model="form[element.id]" />
          </el-col>
        </template>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import formViewItem from "./formViewItem";
import previewRowItem from "./previewRowItem";
import fancyDynamicViewTable from "./dynamic/fancyDynamicViewTable";
import fancyDynamicTableViewItem from "./dynamic/fancyDynamicTableViewItem";
import fancyEditTable from "./table/fancyEditTable";
export default {
  name: "formViewer",
  data() {
    return {
      // 表单配置
      dataForm: {
        // 配置
        config: {
          version: "1.10",
          formRef: "elForm",
          formModel: "form",
          rules: "rules",
          size: "medium",
          labelPosition: "right",
          labelWidth: 80,
          formRules: "rules",
          gutter: 30,
          disabled: false,
          dynamicTableAllowed: false,
        },
        // 组件
        list: [
          {
            id: "table_1664257854891",
            _id: "table_1664257854891",
            compType: "table",
            ele: "fancy-table",
            compName: "表格布局",
            compIcon: "table_layout",
            layout: "tableItem",
            config: true,
            layoutArray: [
              [
                {
                  id: 1664257854901,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#F6F6F6",
                    width: 15,
                  },
                  columns: [
                    {
                      id: "fd_1664257870473",
                      _id: "fd_1664257870473",
                      compType: "text",
                      ele: "fancy-text",
                      compName: "文本",
                      compIcon: "text",
                      viewType: "component",
                      config: true,
                      form: false,
                      show: true,
                      text: "姓名",
                      align: "left",
                      color: "#000000",
                      size: 14,
                      bold: 400,
                      showLabel: false,
                      labelWidth: "0",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  id: 1664257854911,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#FFFFFF",
                    width: 35,
                  },
                  columns: [
                    {
                      id: "fd_1664257875601",
                      _id: "fd_1664257875601",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: false,
                      label: "单行文本",
                      labelWidth: 1,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      value: "65465",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  id: 1663654709247,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#F6F6F6",
                    width: 15,
                  },
                  columns: [
                    {
                      id: "fd_1664257907242",
                      _id: "fd_1664257907242",
                      compType: "text",
                      ele: "fancy-text",
                      compName: "文本",
                      compIcon: "text",
                      viewType: "component",
                      config: true,
                      form: false,
                      show: true,
                      text: "文本",
                      align: "left",
                      color: "#000000",
                      size: 14,
                      bold: 400,
                      showLabel: false,
                      labelWidth: "0",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  id: 1663654709267,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#FFFFFF",
                    width: 35,
                  },
                  columns: [
                    {
                      id: "fd_1664257878981",
                      _id: "fd_1664257878981",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: false,
                      label: "单行文本",
                      labelWidth: 1,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      value: "而已",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
              ],
              [
                {
                  id: 1664257854921,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#F6F6F6",
                    width: 15,
                  },
                  columns: [
                    {
                      id: "fd_1664257872938",
                      _id: "fd_1664257872938",
                      compType: "text",
                      ele: "fancy-text",
                      compName: "文本",
                      compIcon: "text",
                      viewType: "component",
                      config: true,
                      form: false,
                      show: true,
                      text: "文本",
                      align: "left",
                      color: "#000000",
                      size: 14,
                      bold: 400,
                      showLabel: false,
                      labelWidth: "0",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  id: 1664257854931,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#FFFFFF",
                    width: 35,
                  },
                  columns: [
                    {
                      id: "fd_1664257877363",
                      _id: "fd_1664257877363",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: false,
                      label: "单行文本",
                      labelWidth: 1,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      value: "太容易",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  id: 1663654709327,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#F6F6F6",
                    width: 15,
                  },
                  columns: [
                    {
                      id: "fd_1664257909094",
                      _id: "fd_1664257909094",
                      compType: "text",
                      ele: "fancy-text",
                      compName: "文本",
                      compIcon: "text",
                      viewType: "component",
                      config: true,
                      form: false,
                      show: true,
                      text: "文本",
                      align: "left",
                      color: "#000000",
                      size: 14,
                      bold: 400,
                      showLabel: false,
                      labelWidth: "0",
                      layout: "colItem",
                    },
                  ],
                },
                {
                  id: 1663654709347,
                  col: 1,
                  row: 1,
                  hide: false,
                  compType: "tdItem",
                  style: {
                    background: "#FFFFFF",
                    width: 35,
                  },
                  columns: [
                    {
                      id: "fd_1664257880668",
                      _id: "fd_1664257880668",
                      compType: "input",
                      ele: "el-input",
                      compName: "单行文本",
                      compIcon: "input",
                      viewType: "text",
                      config: true,
                      showLabel: false,
                      label: "单行文本",
                      labelWidth: 1,
                      placeholder: "请输入文本",
                      required: false,
                      maxLength: 50,
                      gutter: 15,
                      span: 24,
                      width: "100%",
                      clearable: true,
                      disabled: false,
                      readonly: false,
                      status: "normal",
                      "prefix-icon": "",
                      "suffix-icon": "",
                      value: "绕太阳",
                      rules: [],
                      rulesType: "default",
                      prepend: "",
                      append: "",
                      layout: "colItem",
                    },
                  ],
                },
              ],
            ],
            tdStyle: "",
            width: 100,
            height: 50,
          },
        ],
      },
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    buildData: {
      type: String,
      default: "",
    },
  },
  components: {
    formViewItem,
    previewRowItem,
    fancyDynamicViewTable,
    fancyDynamicTableViewItem,
    fancyEditTable,
  },
  mounted() {
    this.$nextTick(() => {});
  },
  computed: {
    itemList() {
      if (this.buildData !== "") {
        const buildData = JSON.parse(this.buildData);
        return buildData.list;
      } else {
        return [];
      }
    },
    form() {
      //转换成json的值
      if (this.value !== "") {
        const value = JSON.parse(this.value);
        return value;
      } else {
        return {};
      }
    },
    formConf() {
      if (this.buildData !== "") {
        const buildData = JSON.parse(this.buildData);
        buildData.config.disabled = this.disabled;
        return buildData.config;
      } else {
        return {};
      }
    },
  },
};
</script>

<style scoped>
.preview-board {
  border: 1px dashed #ccc;
}
/* .form-viewer {
  padding: 20px;
  border: 1px solid #dcdfe6;
} */
.el-form-item {
  margin-left: 10px;
  margin-right: 10px;
}
</style>