<template>
  <div class="my-right-content border-box">
    <div class="right-content-top border-box">
      <el-tabs v-model="activeName" @tab-click="handleTabClick" class="data-log-tab">
        <el-tab-pane label="排队中" name="first"></el-tab-pane>
        <el-tab-pane label="重跑完成" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <log-table :activeTab="activeName"></log-table>
  </div>
</template>
<script>
/* eslint-disable */
import logTable from '@/components/dataLog/log-table.vue'
import { getRequest, postRequest } from '@/api/api';

export default {
  name: 'version',
  props: {
    // 左侧菜单选中 id
    activeSelTab: {
      type: [String, Number],
      default() {
        return 'platform_data_runing_log';
      }
    }
  },
  data() {
    return {
      requestProject: 'data-monitor',
      activeName: 'first',
      activeTab: '',
      activeMenuTab: this.activeSelTab, // 左侧选中的菜单 id
      // 排队数据
      queueTableData: [],
      finishTableData: []
    };
  },
  mounted() {
    let that = this;
    that.activeMenuTab = that.activeSelTab;
    if (that.$route.query.activeTab && that.$route.query.activeTab !='undefined') {
      that.activeTab = that.$route.query.activeTab;
    }else {
      that.activeTab = 'first'
    }
    that.$emit('showTab', 'platform_data_runing_log');
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /**
     * 切换 tab
     *
     */
    /* eslint-disable */
    handleTabClick(tab, event) {
      console.log(tab, event);
    }
  },
  watch: {
    activeSelTab: function(newData, oldData) {
      let that = this;
      that.activeMenuTab = newData;
    },
  },
  components: {
    logTable
  }
};
</script>
<style lang="less" scoped>
.my-right-content {
  padding: 0 0 24px 0;

  .right-content-top {
    padding: 0 24px;
    border-bottom: 1px solid #ebeef5;

    .right-top-wrap_left {
      li {
        cursor: pointer;
        .right-top-title {
          font-size: 14px;
          color: #606266;
          height: 100%;
        }

        &.active-li {
          .right-top-title {
            color: #303133;
            border-bottom: 2px solid #303133;
          }
        }
      }

    }
    .right-top-wrap_right {
      padding: 12px 0;
    }
  }
  .create-btn {
    text-align: right;
    padding-bottom: 24px;
  }
}
.menu-name-wrap {
  display: inline-block;
  // padding-left: 16px;
  span {
    font-size: 12px;
    padding: 4px 6px;
    color: #909399;
    border-radius: 4px;
    margin: 0 5px;
    border: 1px dashed #c0c4cc;
    cursor: pointer;
  }
  .num-input-wrap {
    width: 34px;
    margin: 0 10px 0 5px;
    /deep/ .el-input__inner {
      padding: 0 3px;
      text-align: center;
      font-size: 12px;
    }
  }
}
.my-no-data-wrap {
  text-align: center;
  padding-top: 120px;
  i {
    color: #7db6ff;
    font-size: 80px;
    padding-left: 15px;
  }
  h3 {
    padding: 17px 0 23px;
    color: #909399;
    font-size: 14px;
    line-height: 20px;
  }
  /deep/ span {
    letter-spacing: 2px;
  }
  /deep/ .el-button {
    padding: 8px 20px;
  }
}
// .table-no-line-wrap /deep/ .el-table__expand-icon {
//   position: absolute;
// }
</style>
