<template>
  <div class="my-right-content border-box">
    <div class="right-content-top border-box">
      <div class="right-top-wrap flex flex-row flex-space-between flex-pack-center">
        <div class="right-top-wrap_left flex flex-pack-center">
          <ul class="flex flex-row flex-pack-center">
            <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 'android' ? 'active-li' : '']" @click="chooseTab('android')"><span class="flex flex-align-center flex-pack-center right-top-title">安卓配置</span></li>
            <li :class="['flex flex-align-center flex-pack-center p-lr-24', activeTab == 'ios' ? 'active-li' : '']" @click="chooseTab('ios')"><span class="flex flex-align-center flex-pack-center right-top-title">iOS配置</span></li>
          </ul>
        </div>
        <div class="right-top-wrap_right border-box">
          <el-button @click="toAddSet(activeTab)" type="primary">新建{{ activeTab == 'android' ? '安卓' : 'iOS' }}配置</el-button>
        </div>
      </div>
    </div>
    <android-table :activeMenuTab="activeMenuTab" :activeTab="activeTab"></android-table>
  </div>
</template>
<script>
/* eslint-disable */
import androidTable from '@/components/haoban/android-table.vue'
import { getRequest, postRequest } from '@/api/api';

export default {
  name: 'version',
  props: {
    // 左侧菜单选中 id
    activeSelTab: {
      type: [String, Number],
      default() {
        return 'platform_version_haoban';
      }
    }
  },
  data() {
    return {
      requestProject: 'gic-bizdict',
      activeTab: '',
      activeMenuTab: this.activeSelTab // 左侧选中的菜单 id
    };
  },
  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 = 'android'
    }
    that.$emit('showTab', 'platform_version_haoban');
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /*
     * 切换选择 andriod 和 ios
     */
    chooseTab(tag) {
      let that = this;
      that.activeTab = tag;
    },
    /*
     * 新增
     */
    toAddSet() {
      let that = this;
      that.changeRoute(`/addSet?activeTab=${that.activeTab}&name=${that.$route.query.name}&icon=${that.$route.query.icon}&code=${that.$route.query.code}&tabCode=${that.$route.query.tabCode || that.activeMenuTab}`)
    }
  },
  watch: {
    activeSelTab: function(newData, oldData) {
      let that = this;
      that.activeMenuTab = newData;
    },
  },
  components: {
    androidTable
  }
};
</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>
