<template>
  <ht-template-form
    class="template-form-front"
    :template-key="templateKey"
    :action="action"
    :is-share="isShare"
    :open-type="openType"
    :data-param="params"
    :is-custom-handle-close="isShortUrl"
    @close="handleClose"
  ></ht-template-form>
</template>
<script>
  export default {
    name: 'TemplateForm',
    props: {
      templateKey: {
        type: String,
        default: '',
      },
      action: {
        type: String,
        default: '',
      },
      isShare: {
        type: Boolean,
      },
      openType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        key: this.templateKey,
        single: true,
        params: null,
      }
    },
    computed: {
      isShortUrl() {
        return this.$route.query.hasOwnProperty('isShortUrl')
      },
    },
    created() {
      if (!this.key && this.$route.meta.templateKey) {
        this.key = this.$route.meta.templateKey
      }
      if (this.$route.query.showModifyRecord) {
        let showModifyRecordId = this.$route.params.data
        this.$requestConfig.boDataModifyRecordById(showModifyRecordId).then((resp) => {
         this.params = Base64.encode(resp.data) 
        }) 
      } else if (this.$route.query.row) {
        this.params = Base64.decode(this.$route.query.row)
      } else if (this.$route.query.data) {
        this.params = this.$route.query.data
      } else {
        this.params = this.$route.params.data
      }
    },
    methods: {
      handleClose() {
        window.location.href = 'about:blank'
        window.close()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .eip-front-wrapper
    .layout-container-vertical
    .app-main
    .app-main-container
    .base-main {
    background: #fff;
    position: relative;
    padding: 0 0 80px 0;
  }
  ::v-deep .base-main_box {
    height: 100% !important;
    .base-main_bottom_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 45px;
      line-height: 45px;
      box-shadow: 0px -2px 6px rgba(149, 149, 149, 0.16);
      position: absolute;
      z-index: 9;
      /*  bottom: 22px; */
      background: #fff;

      // width: calc(100% - 208px - 24px * 2);
      padding-top: 0;
      padding-bottom: 0;
      flex-wrap: wrap;
    }
  }

  .template-form-front {
    ::v-deep .formT_box {
      .xh_table {
        .sub-collapse .el-collapse-item__content .form-table {
          border: none;
          tbody tr td {
            border: none;
          }
        }
      }
    }
    ::v-deep {
      .el-table {
        .file-upload-container {
          display: inline-block;
        }
        .file-list__wrap .file-item {
          width: 100%;
          .file__name {
            text-align: left;
          }
        }
      }
      .form-table_box {
        .inputs.ht-form-inputs__inline {
          .field-tail__wrap {
            margin-top: 16px;
            .el-form-item__error {
              position: absolute;
              top: calc(100% - 16px);
            }
          }
        }
      }
    }
  }
  ::v-deep .online-form-wrap {
    .el-tabs__content {
      padding: 0;
    }
  }
  .app-main-container {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  ::-webkit-scrollbar {
    width: 0 !important;
    background-color: transparent;
  }
</style>
