<template>
  <div class="container-fluid">
    <div class="flex-container">
      <div class="flex-header">
        <NavBar
          :title="$t('lang.BarCodeEdit.barcodeEditor')"
          :is-go-back="true"
        />
        <div class="row m-row">
          <div class="col-md-12">
            <ul class="nav nav-tabs">
              <li
                :class="{'active' : tabIndex == 0}"
                @click="tabIndex = 0"
              >
                <a
                  id="baseTemplate"
                  
                  data-toggle="tab"
                >{{ $t('lang.BarCodeEdit.foundationTemplate') }}
                </a>
              </li>
              <li
                :class="{'active' : tabIndex == 1}"
                @click="tabIndex = 1; tab2Open = true;"
              >
                <a
                  id="customerTemplate"
                  
                  data-toggle="tab"
                >
                  {{ $t('lang.BarCodeEdit.customTemplate') }}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="row m-row">
          <div class="col-md-12">
            <div class="tab-content">
              <div
                class="tab-pane fade in"
                :class="{'active' : tabIndex == 0}"
              >
                <BarCodeEditPanel v-if="tabIndex == 0" />
              </div>
              <div
                class="tab-pane fade in"
                :class="{'active' : tabIndex == 1}"
              >
                <CustomerBarCodeEditPanel v-if="tabIndex == 1" ref="cusBarCode" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-content">
        <div class="flex-main">
          <div
            v-show="tabIndex == 0"
            class="flex-main-item"
          >
            <iframe
              id="mIframe0"
              src="/static/ZPL-Label-Designer-master/label_designer.html"
              width="100%"
              height="100%"
            />
          </div>
          <div
            v-if="tab2Open == true"
            v-show="tabIndex == 1"
            class="flex-main-item"
          >
            <iframe
              id="mIframe1"
              src="/static/ZPL-Label-Designer-master/label_designer.html"
              width="100%"
              height="100%"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';

import BarCodeEditPanel from './BarCodeEditPanel.vue';
import CustomerBarCodeEditPanel from './CustomerBarCodeEditPanel.vue';


export default {
  components: {
    BarCodeEditPanel, CustomerBarCodeEditPanel, 
  },
  data: function () {
    return {
      tabIndex: 0,
      tab2Open: false,
    };
  },
  methods: {

  },
};

</script>

<style scoped>
.m-row {
    margin-bottom: 15px;
}
</style>

<style scoped>
.flex-container {
    display: flex;
    /* 垂直*/
    flex-direction: column;
    width: 100%;
    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
    height: calc(100vh - 100px);
}

.flex-header {
    /*放大缩小比例为0 */
    height: 400px;
    flex: 0 0 100px;
}

.flex-content {
    display: flex;
    flex: 1;
}

.flex-main {
    overflow: auto;
    flex: 1;
    position: relative;
}

.flex-main-item {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
</style>