<template>
  <ht-query-sql-preview :viewId="viewId"></ht-query-sql-preview>
</template>

<script>
export default {
  name: 'QuerySqlPreview',
  props: {
    sqlViewId: {type: String}
  },
  data() {
    return {
      viewId: this.sqlViewId
    }
  },
  created() {
    if (!this.viewId && this.$route.params.sqlViewId) {
      this.viewId = this.$route.params.sqlViewId
    }
  },
  mounted() {},
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    if (to.fullPath != from.fullPath) {
      this.viewId = to.params.sqlViewId
    }
    next()
  }
}
</script>
<style lang="scss" scoped>
 ::v-deep {
    .search-field__container {
      .search-item {
        width: 100%;
        .el-select__tags {
          width: calc(100% - 85px) !important;
          max-height: 32px;
          overflow-y: auto;
        }
      }
    }
    .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;
    }
  }
</style>