<template>
  <div class="page-view overflow-h">
    <!--    el-icon-circle-plus-->
    <app-tabs ref="appTab" :tab-list="tabList" :tools="tabTools" class="" @tab-add="addTab" @tab-remove="delTab">
      <template #tabPane="{ item }">
        <source-pane :db-type-list="dbTypeList" :sys-data-source="sysDataSourceDefs" />
      </template>
    </app-tabs>

    <ht-load-data context="portal" url="/sys/sysDataSourceDef/v1/getAll" @after-load-data="afterLoadSourcesettingData" />
    <!-- 加载数据 用作编辑数据源和查看数据源-->
    <!-- <ht-load-data
      :url="loadDataUrl"
      context="portal"
      @after-load-data="afterLoadData"
    ></ht-load-data> -->
  </div>
</template>

<script>
import SourcePane from './Source.vue';

export default {
  components: { SourcePane },
  data() {
    return {
      dataSourceDisabled: false,
      dbTypeList: [
        {
          value: 'Mysql',
          driverName: 'com.mysql.cj.jdbc.Driver',
          url: 'jdbc:mysql://主机:3306/数据库名?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull',
          validationquery: 'select 1 from dual',
        },
        {
          value: 'Oracle',
          driverName: 'oracle.jdbc.OracleDriver',
          url: 'jdbc:oracle:thin:@主机:1521:数据库实例',
          validationquery: 'select 1 from dual',
        },

        {
          value: 'PgSql',
          driverName: 'org.postgresql.Driver',
          url: 'jdbc:postgresql://主机:5432/数据库名',
          validationquery: 'select 1',
        },
      ],
      sysDataSourceDefs: [],
      tabList: [],
      tabTools: [
        {
          icon: 'el-icon-close',
          hidden: ({ tab, tabIndex }) => {
            // 控制显隐
            return tabIndex <= 0;
          },
          onClick: (tab) => {
            // 点击事件
            this.delTab(tab.name);
          },
        },
        {
          icon: 'el-icon-circle-plus',
          hidden: ({ tab, tabIndex }) => {
            return tabIndex >= this.dbTypeList.length - 1 || tabIndex < this.tabList.length - 1;
          },
          onClick: (tab) => {
            this.addTab();
          },
        },
      ],
      activeName: 'Mysql',
    };
  },
  created() {
    const item = this.dbTypeList[0];
    this.tabList = [
      {
        label: item.value,
        name: item.value,
        // closable: false,
      },
    ];
  },
  methods: {
    addTab() {
      const tabs = this.dbTypeList.filter((item) => {
        const names = this.tabList.map((o) => o.name);
        return !names.includes(item.value);
      });

      const item = tabs[0];

      this.tabList.push({
        label: item.value,
        name: item.value,
        // closable: true,
      });
      this.$refs.appTab.setActive(item.value);
    },
    delTab(act) {
      const index = this.tabList.findIndex((tab) => tab.name === act);
      this.tabList.splice(index, 1);
      // this.$nextTick(() => {
      //   setTimeout(() => {
      this.$refs.appTab.setActive(this.tabList[this.tabList.length - 1].name);
      //   });
      // });

      // this.activeName = this.tabList[this.tabList.length - 1].value;
    },

    afterLoadSourcesettingData(data) {
      this.sysDataSourceDefs = data;
      // if (this.sysDataSourceRow && this.sysDataSourceRow.id) {
      //   this.loadDataUrl =
      //     `/sys/sysDataSource/v1/getJson?id=` + this.sysDataSourceRow.id
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  position: relative;
}
.line-split {
  height: 80%;
  width: 1px;
  background: #eee;
}
::v-deep {
  .el-form-item__label {
    width: 130px !important;
    overflow: hidden;
    word-break: break-all;
    display: flex;
    align-items: center;
    min-height: 32px;
    text-align: left;
    line-height: normal;
  }

  .el-card__body {
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
  }

  .el-tabs__new-tab {
    background-color: #1890ff;
    // display: inline-block;
    // float: none;
    &:hover {
      background-color: #fff;
      border-color: #1890ff;
    }
  }
}
</style>
