<template>
  <div v-if="visible" name="online-form" class="data-preview-container">
    <el-row v-if="showQueryViewName" class="top-title__row">
      <h3 class="top-title">{{ queryView.name ? queryView.name : '' }}</h3>
    </el-row>
    <template v-if="html">
      <ht-querysql-runtime-template
        :sql-alias="sqlAlias"
        :alias="alias"
        :single="single"
        :search-form="searchForm"
        :query-view="queryView"
        :query-view-options="queryViewOptions"
        :autofocus="autofocus"
        class="data-preview-wrap"
        :parameter-querys="parameterQuerys"
        :current-table-height="tableHeight"
        :current-table-max-height="tableMaxHeight"
      />
    </template>
    <div v-if="loadedFail" class="loaded-fail__div">
      {{ alias }}视图不存在...
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import querySqlPreview from '@/mixins/querySqlPreview.js'
  import utils from '@/utils'
  export default {
    name: 'HtQuerySqlPreview',
    props: {
      viewId: {
        type: String,
        default: '',
      },
      propSqlAlias: {
        type: String,
        default: '',
      },
      propAlias: {
        type: String,
        default: '',
      },
      showQueryViewName: {
        type: Boolean,
        default: false,
      },
      queryView: Object,
      queryViewOptions: Object,
      // 在表单中的控件不自动聚焦
      autofocus: {
        type: Boolean,
        default: true,
      },
      parameterQuerys: String,
      tableHeight: {
        type: [Number, String],
        default: '',
      },
      tableMaxHeight: {
        type: [Number, String],
        default: '',
      },
    },
    data() {
      return {
        displayFields: [],
        html: '',
        alarmSettingMap: {},
        summaryTypeMap: {},
        loadedFail: false,
        sqlAlias: '',
        alias: '',
        visible: true, // Add visibility control
      }
    },
    watch: {
      viewId: function (newVal) {
        if (newVal) {
          this.init()
        }
      },
    },
    created() {
      this.init()
    },
    methods: {
      // 根据当前formKey初始化
      init() {
        let _me = this
        this.$requestConfig
          .getQuerySqlView(this.viewId, this.propSqlAlias, this.propAlias)
          .then((result) => {
            if (result) {
              console.log(result, 'formKey')
              _me.$emit('loaded', result)
              _me.queryView = result
              _me.sqlAlias = result.sqlAlias
              _me.alias = result.alias
              _me.html = result.template
              this.customInit()
              _me.handleBindValue()
            } else {
              this.loadedFail = true
            }
          })
          .finally(() => {})
      },
      customInit() {
        Vue.component('ht-querysql-runtime-template', {
          mixins: [querySqlPreview],
          props: {
            single: String,
            sqlAlias: String,
            alias: String,
            queryView: Object,
            queryViewOptions: Object,
            autofocus: Boolean,
            parameterQuerys: String,
            currentTableHeight: [Number, String],
            currentTableMaxHeight: [Number, String],
          },
          data() {
            return {}
          },
          template: this.html,
        })
      },
      handleBindValue() {
        const pInst = utils.getOnlineFormInstance(this.$parent.$parent.$parent)
        if (
          pInst.permission &&
          pInst.permission.table &&
          pInst.permission.table[this.queryView.alias + '[dataView]'] &&
          pInst.permission.table[this.queryView.alias + '[dataView]'].hidden
        ) {
          this.visible = false
        }
      },
    },
  }
</script>

<style lang="scss">
  >>> th.todo-header-row {
    background-color: #fafafa;
    font-size: 13px;
  }

  >>> tr.todo-row {
    font-size: 13px;
  }

  .el-container {
    background-color: #fff;
  }

  .top-title__row {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    .top-title {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20px;
      font-size: 14px;
      // border-bottom: 1px solid #ccc;
    }
  }
  .data-preview-container {
    height: 100%;
    background: #fff;
    .data-preview-wrap {
      height: calc(100% - 30px);
    }
  }

  .el-header {
    border-bottom: 1.5px solid #ededed;
  }
  .sun-div-container > .el-header,
  .sub-div-pc > .el-header {
    border-bottom: 1.5px solid var(--borderColor);
  }
  .i {
    margin-right: 4px;
  }

  .todo-subject {
    cursor: pointer;
  }

  .todo-subject:hover {
  }

  >>> .el-dialog__body {
    padding: 15px 10px;
  }

  >>> .el-checkbox {
    // margin-left: 15px;
  }

  >>> .el-radio {
    margin-left: 15px;
  }

  >>> .el-button {
    margin-left: 0px;
  }
  .loaded-fail__div {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #f56c6c;
  }
  @media print {
    body {
      height: auto !important;
    }

    .notprint {
      display: none;
    }
    .el-table__fixed {
      display: none;
    }
    .el-table_1_column_1 {
      display: none;
    }
    .el-table__body-wrapper {
      overflow: hidden;
      position: relative;
      max-height: fit-content !important;
      height: auto;
      width: 100% !important;
    }

    .ht-table-panel {
      width: 100%;
      max-height: fit-content !important;
      height: auto !important;
    }
    .ht-table-panel {
      padding: 0;
      height: auto;
      overflow: hidden;
    }
    .top_btn_col {
      display: flex;
      align-items: center;
      .el-button {
        margin-right: 10px;
      }
    }

    tr {
      page-break-inside: avoid !important;
    }

    .el-table .cell {
      // white-space: pre-wrap !important;
      text-overflow: unset !important;
      width: 100% !important;
    }
    .el-table thead.is-group th {
      text-align: center;
    }
    tbody > tr > th,
    tbody > tr > td,
    tfoot > tr > td,
    thead > tr > th {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .el-table__header {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .el-table__header > tbody > tr > th,
    .el-table__header > tbody > tr > td,
    .el-table__header > tfoot > tr > td,
    .el-table__header > thead > tr > th {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .el-table__body > tbody > tr > th,
    .el-table__body > tbody > tr > td,
    .el-table__body > tfoot > tr > td,
    .el-table__body > thead > tr > th {
      border: 1px solid rgb(238, 235, 235) !important;
    }

    /*减小单元格间距*/
    .el-table th,
    .el-table td {
      padding: 0 0;
    }
    /*显示底部边框 估计打印时伪元素把border覆盖了 height设为0隐藏伪元素*/
    .el-table::before {
      height: 0;
    }

    /*显示右边框*/
    .el-table--group::after,
    .el-table--border::after {
      width: 0;
    }
    table,
    tbody,
    thead {
      width: 100% !important;
    }

    colgroup {
      position: absolute;
      width: 100% !important;
    }
    table {
      width: 100% !important;
    }
    .cell > span {
      white-space: pre-wrap !important;
    }
    .el-table {
      height: 100% !important;
      max-height: fit-content !important;
      width: 100% !important;
    }
    .el-table__body-wrapper {
      height: 100% !important;
      max-height: fit-content !important;
      width: 100% !important;
    }
    .table_layout_wrap {
      margin: 0 !important;
    }
    // .el-table__fixed,
    // .el-table__fixed-right,
    // .el-table__fixed-right-patch
    // {
    //   display: none !important;
    // }
    .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;
            }
          }
        }
      }
    }
  }
</style>
