<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="12vh"
    width="1040px"
    @close="closeModel"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
  >
  <el-card>
      <el-row :gutter="10">
        <el-col :span="24">
          <div
            v-if="
              left &&
              left.header &&
              left.header.length > 0 &&
              right &&
              right.header &&
              right.header.length > 0
            "
          >
            <div class="list-table clearfix">
              <div class="left" :style="{ width: lang }">
                <div class="header">
                  <div
                    class="header-item"
                    v-for="(lhead, lhi) in left.header"
                    :key="'lhead' + lhi"
                  >
                    {{ lhead.spec_name }}
                  </div>
                </div>
                <div
                  class="header-body"
                  v-if="left.spec && left.spec.length > 0"
                >
                  <div
                    class="header-body-row"
                    v-for="(lhr, lhri) in left.spec"
                    :key="'lheadrow' + lhri"
                  >
                    <div
                      class="heder-body-col"
                      v-for="(lhc, lhci) in lhr"
                      :key="'lheadcol' + lhci"
                    >
                      {{ lhc.spec_value }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="right" :style="{ paddingLeft: lang }">
                <div class="header">
                  <div
                    class="header-col clearfix"
                    v-for="(lhr, lhri) in right.header"
                    :key="'lheadr' + lhri"
                  >
                    <div class="header-col-jieti clearfix">
                      <div class="header-col-jieti-title tc clearfix">
                        阶梯{{ lhri + 1 }}
                      </div>
                      <div class="header-col-jieti-main clearfix">
                        <div class="header-col-item fl tc">{{ lhr.num }}</div>
                        <div class="header-col-item fl tc">{{ lhr.price }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="right-body"
                  v-if="right.spec && right.spec.length > 0"
                >
                  <div
                    class="right-body-col"
                    v-for="(lbr, lbri) in right.spec"
                    :key="'lbodyr' + lbri"
                  >
                    <div
                      class="right-body-col-item clearfix"
                      v-for="(lbritem, lbritemi) in lbr.limit"
                      :key="'lbritem' + lbritemi"
                    >
                      <div class="right-body-col-item-div fl tc">
                        {{ lbritem.begin_num }}
                      </div>
                      <div class="right-body-col-item-div fl tc">
                        {{ lbritem.shop_price }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="tc">
            <el-tag type="warning">暂无阶梯价！</el-tag>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
   <script>
export default {
  name: "active",
  props: ["showModel", "left", "right", "lang"],
  data() {
    return {
      loading: true,
      title: "商品阶梯价格",
       showModelThis: this.showModel,
    };
  },
  methods: {
    closeModel(e) {
      console.log(e);
      this.showModelThis = false;
    },
    async initForm() {
      this.loading = false;
    },
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.active {
  $gBC: #dfe6ec;
  .list-table {
    position: relative;
    width: 100%;
    border-top: 1px solid $gBC;
    border-left: 1px solid $gBC;
    .left {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: #fff;
      .header {
        width: 100%;
        display: flex;
        .header-item {
          width: 100px;
          flex: 1;
          padding: 0 10px;
          height: 64px;
          line-height: 64px;
          border-right: 1px solid $gBC;
          border-bottom: 1px solid $gBC;
        }
      }
      .header-body {
        width: 100%;
        position: relative;
        .header-body-row {
          width: 100%;
          display: flex;
          .heder-body-col {
            flex: 1;
            padding: 0 10px;
            height: 38px;
            border-right: 1px solid $gBC;
            border-bottom: 1px solid $gBC;
            line-height: 38px;
          }
        }
      }
    }
    .right {
      position: relative;
      width: 100%;
      display: block;
      overflow-x: scroll;
      .header {
        width: 100%;
        display: flex;
        .header-col {
          min-width: 220px;
          flex: 1;
          height: 64px;
          line-height: 64px;

          // position: relative;
          .header-col-jieti {
            height: 64px;
            line-height: 64px;
            // position: relative;
            width: 100%;
            .header-col-jieti-title {
              // position: relative;
              width: 100%;
              line-height: 32px;
              border-right: 1px solid $gBC;
              border-bottom: 1px solid $gBC;
              height: 32px;
            }
            .header-col-jieti-main {
              // position: relative;
              width: 100%;
              .header-col-item {
                // position: relative;
                height: 32px;
                line-height: 32px;
                width: 50%;
                border-right: 1px solid $gBC;
                border-bottom: 1px solid $gBC;
              }
            }
          }
        }
      }
      .right-body {
        position: relative;
        .right-body-col {
          position: relative;
          width: 100%;
          display: flex;
          .right-body-col-item {
            min-width: 220px;
            flex: 1;

            position: relative;
            overflow: hidden;
            .right-body-col-item-div {
              position: relative;
              height: 38px;
              line-height: 38px;
              width: 50%;
              padding: 0 10px;
              border-right: 1px solid $gBC;
              border-bottom: 1px solid $gBC;
            }
          }
        }
      }
    }
  }
}
</style>
   