<template>
  <ht-template-preview
    :templateKey="key"
    :single="single"
    :taskType="taskType"
    :defKey="defKey"
    :dataView="dataView"
    :isJoinFlow="isJoinFlow"
    :table-height="tableHeight"
    :parameterq-querys="querys"
    :isManage="true"
    class="template-preview"
  ></ht-template-preview>
</template>

<script>
export default {
  name: 'TemplatePreview',
  props: {
    templateKey: {type: String},
    parameterqQuerys: String,
    single: String,
    taskType: {
      default: ''
    },
    defKey: String,
    dataView: Object,
    isJoinFlow: {
      default: false
    },
    rkey: String
  },
  data() {
    return {
      key: this.templateKey,
      querys: this.parameterqQuerys
    }
  },
  created() {
    this.init()
  },
  computed: {
    tableHeight() {
      return this.$baseTableHeight(188)
    }
  },
  methods: {
    init() {
      console.log('this.$route.params', this.$route.params)
      if (!this.key && this.$route.params.templateKey) {
        this.key = this.$route.params.templateKey
      }
      if (!this.parameterqQuerys && this.$route.params.parameterqQuerys) {
        this.querys = this.$route.params.parameterqQuerys
      }
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    if (to.fullPath != from.fullPath) {
      this.key = to.params.templateKey
    }
    next()
  }
}
</script>
<style lang="scss">
.summary-table {
  margin: 10px 24px 24px 24px;
  .project-column {
    .cell {
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
  }
  .summary-num {
    .summary-table-field {
      font-size: 18px;
      color: #4ba232;
      font-weight: bold;
    }
  }
}
.custom-summary {
  padding: 10px 24px 24px 24px;
}
.import-log-dialog {
  .ht-table-panel {
    padding: 0 48px 13px 48px;
  }
}
.failure-reason-dialog {
  .el-dialog__body {
    padding: 32px 48px 48px 48px;
    .error-info {
      padding: 16px;
      color: #e55555;
      background: rgba(249, 249, 249, 0.39);
    }
  }
}

.data_view {
  position: relative;
  .table-main {
    flex: unset;
  }
 
  .top_btn_col {
    .data-form-list__top-btn {
      margin-left: 10px;
      margin-bottom: 10px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}
@media print {
  .top_btn_col {
    display: flex;
    align-items: center;
    .el-button {
      margin-right: 10px;
    }
  }
  .dropdown-upload__btn {
    .el-button-group {
      .el-button {
        &:first-child {
          height: 28px !important;
          line-height: 28px;
          span {
            display: flex;
            align-items: center;
            margin-top: -8px;
          }
        }
      }
    }
  }
}
.search-field__container {
  .field-tail__wrap {
    position: static;
    .el-form-item__error {
      min-width: 60px;
    }
  }
}
.search-field__container {
  .search-custom-dialog {
    .field-tail__wrap {
      position: relative !important;
    }
  }
}

  .app-container{
     .left-container {
    height: 100%;
    max-height: fit-content;
    min-height: 717px;
  }
  }

</style>
