<template>
  <div v-if="permission != 'n'" class="ht-data-lists">
    <div class="column-content">
      <el-tabs
        v-if="tabPaneList.length > 1"
        v-model="activeName"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          v-for="item in visibleTabPaneList"
          :key="item.dataTemplateKey"
          :name="item.dataTemplateKey"
        >
          <span slot="label">{{ item.name }}</span>
        </el-tab-pane>
      </el-tabs>
      <div
        v-if="visibleTabPaneList && visibleTabPaneList.length == 1 && showTitle == 1"
        class="ht-data-lists-title"
      >
        {{ visibleTabPaneList[0].name }}
      </div>
      <div class="table-wrap" :class="{ 'no-tabs': visibleTabPaneList.length <= 1 }">
        <HtCustomDialogView
          v-if="viewType === 'customDialog'"
          :key="viewId"
          :sql-view-id="viewId"
          :query-bind-options="currentTabPanel.bindOptions"
          :alias="currentTabPanel.alias"
          :table-max-height="tableMaxHeight"
        ></HtCustomDialogView>
        <ht-query-sql-preview
          v-else
          :key="viewId"
          :view-id="viewId"
          :prop-sql-alias="sqlAlias"
          :prop-alias="alias"
          :query-view-options="queryViewOptions"
          :show-query-view-name="false"
          :autofocus="autofocus"
          :table-max-height="tableMaxHeight"
          @visibility-change="handleVisibilityChange"
        ></ht-query-sql-preview>
      </div>
    </div>
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import utils from '@/utils'
  export default {
    name: 'HtDataLists',
    mixins: [permission],
    props: {
      pageSize: {
        type: Number,
        default: 10,
      },
      options: {
        type: String,
      },
      // 在表单中的控件不自动聚焦
      autofocus: {
        type: Boolean,
        default: true,
      },
      showTitle: {
        type: Number,
        default: 1,
      },

      tableMaxHeight: {
        type: [Number, String],
        default: '',
      },
    },
    data() {
      return {
        tabPaneList: [],
        activeName: '',
        viewId: '',
        alias: '',
        sqlAlias: '',
        queryViewOptions: {},
        viewType: '',
        currentTabPanel: {},
        tabVisibilityMap: {}, // 用于存储每个tab的可见性状态
      }
    },
    computed: {
      // 计算可见的tab列表
      visibleTabPaneList() {
        return this.tabPaneList.filter(item => {
          // 如果是自定义对话框视图，总是可见
          if (item.viewType === 'customDialog') {
            return true;
          }
          
          // 对于查询SQL预览视图，检查其可见性状态
          // 如果没有状态记录，默认可见（向后兼容）
          return this.tabVisibilityMap[item.alias] !== false;
        });
      }
    },
    watch: {
      options: {
        handler(val) {
          if (val) {
            this.tabPaneList = JSON.parse(val)
            this.currentTabPanel = this.tabPaneList[0]
            this.activeName = this.tabPaneList[0].dataTemplateKey
            this.viewType = this.tabPaneList[0].viewType
            this.viewId = this.tabPaneList[0].dataTemplateId
            this.sqlAlias = this.tabPaneList[0].sqlAlias
            this.alias = this.tabPaneList[0].alias
            this.queryViewOptions = this.tabPaneList[0].bindOptions

            // 初始化可见性状态
            this.$nextTick(function () { 
              this.initTabVisibilityMap();
            })
          }
        },
        immediate: true,
        deep: true,
      },
      // 监听可见tab列表变化，如果当前激活的tab被隐藏，则切换到第一个可见tab
      visibleTabPaneList: {
        handler(val) {
          if (val && val.length > 0) {
            // 检查当前激活的tab是否还在可见列表中
            const currentTabExists = val.some(item => item.dataTemplateKey === this.activeName);
            if (!currentTabExists) {
              // 如果当前tab不可见，切换到第一个可见tab
              this.activeName = val[0].dataTemplateKey;
              this.handleTabClick();
            }
          }
        },
        immediate: true
      }
    },
    methods: {
      // 处理来自子组件的可见性变化事件
      handleVisibilityChange({ alias, visible }) {
        // 更新对应alias的可见性状态
        this.$set(this.tabVisibilityMap, alias, visible);
      },
      // 初始化tab可见性映射
      initTabVisibilityMap() {
        // 默认所有tab都是可见的
        const visibilityMap = {};
        this.tabPaneList.forEach(item => {
          // 只为查询SQL预览类型的tab设置初始状态
          if (item.viewType !== 'customDialog') {
            var visible = this.getDataViewVisibility(item.alias);
            visibilityMap[item.alias] = visible
          }
        });
        this.tabVisibilityMap = visibilityMap;
      },
      getDataViewVisibility(alias) {
        const pInst = utils.getOnlineFormInstance(this)
        if (
          pInst.permission &&
          pInst.permission.table &&
          pInst.permission.table[alias + '[dataView]'] &&
          pInst.permission.table[alias + '[dataView]'].hidden
        ) {
          return false
        }
        return true
      },
      handleTabClick() {
        let data = this.tabPaneList.filter((item) => {
          return item.dataTemplateKey === this.activeName
        })
        this.currentTabPanel = data[0]
        this.viewType = data[0].viewType
        this.viewId = data[0].dataTemplateId
        this.queryViewOptions = data[0].bindOptions
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ht-data-lists {
    .el-tabs {
      padding: 0 0 8px;
      .el-tabs__content {
        padding: 0;
      }
    }
    .el-tabs__header {
      margin: 0;
      .el-tabs__nav-wrap::after {
        height: 0px;
        background: #eeeeee;
      }
      .el-tabs__item {
        font-size: 14px;
      }
    }
    ::v-deep .el-tabs__content {
      padding: 0;
    }
    .no-tabs {
      padding: 8px 0 0px;
    }
    ::v-deep .el-tabs__header {
      margin: 0;
    }
    ::v-deep .is-vertical {
      border: none !important;
    }
    .ht-data-lists-title {
      font-size: 16px;
      font-weight: 550;
      color: #262626;
      margin-top: 16px;
    }
  }
</style>
<style>
  .ht-tabs .el-tabs .el-tabs__content .ht-data-lists .ht-data-lists-title {
    margin-top: 10px;
  }
</style>
