<template>
  <div class='dfmea-page-tabs-content'>
    <a-tabs class="backGroundColorWhite" :activeKey="tabKey" @change="tabChange">
      <a-tab-pane :tab="$t('measure-track.measure-track')" key="measureTrack">
        <MeasureTrack ref="measureTrack" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>

import MeasureTrack from "./components/MeasureTrack";

export default {
  components: {
    MeasureTrack
  },
  data() {
    return {
      /** 默认选项卡 */
      tabKey: "measureTrack",
      contentHeight: window.innerHeight - 104 + 'px'
    };
  },
  mounted() {
    window.onresize = () => {
      this.contentHeight = window.innerHeight - 104 + 'px';
    };
  },
  computed: {},
  methods: {
    /**
     * 选项卡切换事件
     * @param activeKey 选项卡Key
     */
    tabChange(activeKey) {
      let _that = this;
      let measureTrack = this.$refs.measureTrack;
      // 措施追踪是否存在表格数据修改
      if (measureTrack.validateBatchUpdateTableData()) {
        _that.$confirm({
          title: this.$t('global-message.warn'),
          /** 措施追踪表格数据存在修改，是否确认离开？ */
          content: this.$t('global-message.warn.measure-track-from-hash-modified.whether-to-leave'),
          icon: "aaoopqa", //图标，不想用就随便写一个
          okText: this.$t('global-btn.ok'),
          cancelText: this.$t('global-btn.cancel'),
          onCancel() {
          },
          onOk() {
            // 1：清除批量修改表格数据。
            measureTrack.cleanBatchUpdateTableData();
            // 2：刷新表格最初数据。
            measureTrack.refreshTableData();
            _that.tabKey = activeKey;
          },
        });
      } else {
        _that.tabKey = activeKey;
      }
    },
  }
};
</script>

<style lang="less" scoped>

.ant-pro-basicLayout-content {
  margin: 10px;
}

/deep/ .ant-card {
  border-radius: 10px;
}

/deep/ .ant-tabs-bar {
  margin: 0 0 0px 0;
}
</style>
