<template>
  <div class="detail-wrap">
    <el-form ref="editForm" :model="formInsList">
      <div class="d-header clearfix">
        <div class="fl">
          <i class="el-icon-info"/>
          查看表单实例列表字段定义
        </div>
        <div class="fr">
          <el-button type="primary" plain class="button-sty" @click="$baseReload()" icon="el-icon-refresh-right">{{$t1('重置')}}
          </el-button>
          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">{{$t1('保存')}}</el-button>
        </div>
      </div>
      <baseTabs>
        <baseTabPane :label="$t1('基本信息')">
          <template #default>
            <table class="table-detail">
              <tbody>
              <tr>
                <th>模板编码</th>
                <td>
                  {{ formInsList.formCode }}
                </td>
              </tr>
              <tr>
                <th>
                  脚本
                  <!--                  <scriptDescriptionButton path="static/readme/ExportTemplate.txt"></scriptDescriptionButton>-->
                  <scriptTestButton :script.sync="formInsList.script"></scriptTestButton>
                </th>
                <td colspan="7">
                  <el-form-item prop="script" :rules="[{ required: false, trigger: 'blur' }]">
                    <code-editor mode="java" :readonly="!1" v-model="formInsList.script"
                                 v-if="showCodeEditor"></code-editor>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th>{{ $t1('创建人') }}</th>
                <td>{{ formInsList.createBy }}</td>
                <th>{{ $t1('创建时间') }}</th>
                <td>{{ formInsList.createDate }}</td>
                <th>{{ $t1('更新人') }}</th>
                <td>{{ formInsList.modifyBy }}</td>
                <th>{{ $t1('更新时间') }}</th>
                <td>{{ formInsList.modifyDate }}</td>
              </tr>
              </tbody>
            </table>
          </template>
        </baseTabPane>
        <baseTabPane label="列表信息">
          <template #button>
            <el-button class="button-sty" @click="addItem0()" icon="el-icon-plus">自定义新增</el-button>
            <el-button class="button-sty" @click="addItem0(true)" icon="el-icon-plus">表单列新增</el-button>
          </template>
          <template #default>
            <vxe-grid
              ref="table-m0"
              :data="formInsList.formInsListField0DTOs"
              v-bind="vxeOption0"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            ></vxe-grid>
          </template>
        </baseTabPane>
        <baseTabPane label="查询信息">
          <template #button>
            <el-button class="button-sty" @click="addItem1()" icon="el-icon-plus">自定义新增</el-button>
            <el-button class="button-sty" @click="addItem1(true)" icon="el-icon-plus">表单列新增</el-button>
          </template>
          <template #default>
            <vxe-grid
              ref="table-m1"
              :data="formInsList.formInsListField1DTOs"
              v-bind="vxeOption1"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            ></vxe-grid>
          </template>
        </baseTabPane>
      </baseTabs>
    </el-form>
    <formTemplateFieldDialog v-if="showFormTemplateFieldDialog" :visiable.sync="showFormTemplateFieldDialog"
                             :formCode="formCode"
                             @confirm="confirmFormTemplateFieldDialog"/>
  </div>
</template>

<script>
import formTemplateFieldDialog from "../../../../views/user/form/form_template_field/dialog";


export default {
  name: 'form_ins_listEdit',
  props: {
    formCode: String
  },
  components: {
    formTemplateFieldDialog
  },
  data() {
    return {
      isEdit: false,
      tabIndex: 'first',
      dataId: '',
      formInsList: {
        formCode: null,
        script: null,
        formInsListField0DTOs: [],
        formInsListField1DTOs: [],
        formInsListFieldDTOs: []
      },
      showCodeEditor: false,
      vxeOption0: {},
      vxeOption1: {},
      showFormTemplateFieldDialog: false,
      operateType: 0
    };
  },
  created() {
    // if (this._dataId) this.dataId = this._dataId;
  },
  mounted() {
    this.getData();
    this.initTable0();
    this.initTable1();
  },
  methods: {
    getData() {
      this.isEdit = true;
      this.$commonHttp({
        url: USER_PREFIX + `/form_ins_list/getByFormCode`,
        method: `post`,
        data: {
          stringOne: this.formCode
        },
        isLoading: true,
        modalStrictly: true,
        success: res => {
          let formInsList = res.objx || {
            formCode: this.formCode,
            script: null
          };
          formInsList.formInsListField0DTOs = [];
          formInsList.formInsListField1DTOs = [];
          formInsList.formInsListFieldDTOs = [];
          this.formInsList = formInsList;
          this.getFields();
          this.showCodeEditor = true;
        }
      });
    },
    getFields() {
      this.$http({
        url: USER_PREFIX + `/form_ins_list/getFields`,
        method: `post`,
        data: {
          stringOne: this.formCode
        },
        isLoading: true,
        modalStrictly: true,
        success: res => {
          let formInsListFieldDTOs = res.objx || [];
          let formInsListField0DTOs = formInsListFieldDTOs.filter(formInsListFieldDTO => formInsListFieldDTO.fieldType == 0);
          let formInsListField1DTOs = formInsListFieldDTOs.filter(formInsListFieldDTO => formInsListFieldDTO.fieldType == 1);

          let formInsList = this.formInsList;
          formInsList.formInsListField0DTOs = formInsListField0DTOs;
          formInsList.formInsListField1DTOs = formInsListField1DTOs;
          formInsList.formInsListFieldDTOs = formInsListField0DTOs.concat(formInsListField1DTOs);
        }
      });
    },
    saveData() {
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            let formInsList = this.$baseLodash.cloneDeep(this.formInsList);
            formInsList.formInsListFieldDTOs = formInsList.formInsListField0DTOs.concat(formInsList.formInsListField1DTOs);
            delete formInsList.formInsListField0DTOs;
            delete formInsList.formInsListField1DTOs;
            var url = USER_PREFIX + `/form_ins_list/save`;
            this.$http({
              url: url,
              method: `post`,
              data: formInsList,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 500,
                  onClose: t => {
                    this.$baseReload();
                  }
                });
              }
            });
          });
        }
      });
    },
    openFormTemplateFieldDialog(fieldType) {
      this.operateType = fieldType;
      this.showFormTemplateFieldDialog = true;
    },
    confirmFormTemplateFieldDialog(rows) {
      if (rows.length) {
        let tableData;
        let operateType = this.operateType;
        if (operateType === 0) {
          tableData = this.formInsList.formInsListField0DTOs;
        } else if (operateType === 1) {
          tableData = this.formInsList.formInsListField1DTOs;
        }
        let fieldNames = tableData.map(item => item.fieldName);
        let items = rows.filter(row => !fieldNames.includes(row.fieldName)).map(row => {
          return {
            fieldName: row.fieldName,
            fieldDesc: row.fieldDesc,
            fieldType: operateType
          }
        });
        tableData.push(...items);
      }
    },
    addItem0(flag) {
      if (flag === true) {
        this.operateType = 0;
        this.showFormTemplateFieldDialog = true;
      } else {
        this.formInsList.formInsListField0DTOs.push({
          formCode: this.formInsList.formCode,
          fieldType: 0,
          fieldName: null,
          fieldDesc: null
        })
      }
    },
    addItem1(flag) {
      if (flag === true) {
        this.operateType = 1;
        this.showFormTemplateFieldDialog = true;
      } else {
        this.formInsList.formInsListField1DTOs.push({
          formCode: this.formInsList.formCode,
          fieldType: 1,
          fieldName: null,
          fieldDesc: null
        })
      }
    },
    initTable0() {
      const tableOption = {
        vue: this,
        tableRef: 'table-m0',
        tableName: 'form-formInsList-edit-m0',
        columns: [
          {type: 'checkbox', fixed: 'left', width: 48, resizable: false},
          {
            title: '字段描述',
            field: 'fieldDesc',
            width: 150,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.fieldDesc'}
                                rules={[{required: true, trigger: ['blur', 'change']}]}>
                    <el-input v-model={row.fieldDesc} clearable/>
                  </el-form-item>
                ];
              }
            }
          },
          {
            title: '字段名',
            field: 'fieldName',
            width: 150,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.fieldName'}
                                rules={[{required: true, trigger: ['blur', 'change']}]}>
                    <el-input v-model={row.fieldName} clearable/>
                  </el-form-item>
                ];
              }
            }
          },
          {
            title: '排序',
            field: 'orders',
            width: 150,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.orders'}
                                rules={[{required: false, trigger: ['blur', 'change']}]}>
                    <base-input-number v-model={row.orders} scale={0}/>
                  </el-form-item>
                ];
              }
            }
          },
          {
            width: 47,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.formInsList.formInsListField0DTOs.splice(rowIndex, 1);
                    }}
                  >
                    <el-tooltip enterable={false} effect="dark" content="删除" placement="top"
                                popper-class="tooltip-skin">
                      <i class="el-icon-delete"/>
                    </el-tooltip>
                  </a>
                ];
              }
            }
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption0 = opts;
      });
    },
    initTable1() {
      const tableOption = {
        vue: this,
        tableRef: 'table-m1',
        tableName: 'form-formInsList-edit-m1',
        columns: [
          {type: 'checkbox', fixed: 'left', width: 48, resizable: false},
          {
            title: '字段描述',
            field: 'fieldDesc',
            width: 150,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <el-form-item prop={'formInsListField1DTOs.' + rowIndex + '.fieldDesc'}
                                rules={[{required: true, trigger: ['blur', 'change']}]}>
                    <el-input v-model={row.fieldDesc} clearable/>
                  </el-form-item>
                ];
              }
            }
          },
          {
            title: '字段名',
            field: 'fieldName',
            width: 150,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <el-form-item prop={'formInsListField1DTOs.' + rowIndex + '.fieldName'}
                                rules={[{required: true, trigger: ['blur', 'change']}]}>
                    <el-input v-model={row.fieldName} clearable/>
                  </el-form-item>
                ];
              }
            }
          },
          {
            title: '排序',
            field: 'orders',
            width: 150,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <el-form-item prop={'formInsListField0DTOs.' + rowIndex + '.orders'}
                                rules={[{required: false, trigger: ['blur', 'change']}]}>
                    <base-input-number v-model={row.orders} scale={0}/>
                  </el-form-item>
                ];
              }
            }
          },
          {
            width: 47,
            fixed: 'right',
            title: '',
            sortable: false,
            slots: {
              default: ({row, rowIndex, $table}) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.formInsList.formInsListField1DTOs.splice(rowIndex, 1);
                    }}
                  >
                    <el-tooltip enterable={false} effect="dark" content="删除" placement="top"
                                popper-class="tooltip-skin">
                      <i class="el-icon-delete"/>
                    </el-tooltip>
                  </a>
                ];
              }
            }
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption1 = opts;
      });
    },
  }
};
</script>
