<template>
  <div class="shopInfo">
    <el-row class="order_tab">
      <el-col :span="15">
        <div class="tabList">
          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
            <span>{{item.name}}</span>
            <div class="tab_line"></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="content">
      <component v-if="renderComponent" :is="activeName"></component>
    </el-row>
  </div>
</template>

<script>
import merchantAdd from "./merchantAdd.vue";
import wallet from "./accountCompoents/wallet.vue";
import coupon from "./accountCompoents/coupon.vue";
import recharge from "./accountCompoents/recharge.vue";
import consumption from "./accountCompoents/consumption.vue";
export default {
  name: "HelloWorld",
  components: {
    wallet,
    coupon,
    recharge,
    consumption,
  },

  data() {
    return {
      activeName: "wallet",
      tabList: [
        { name: "我的钱包", index: 0, activeName: "wallet" },
        { name: "优惠券", index: 1, activeName: "coupon" },
        { name: "充值明细", index: 2, activeName: "recharge" },
        { name: "消费明细", index: 3, activeName: "consumption" },
      ],
      tabNum: 0,
      renderComponent: true,
    };
  },
  created() {
    this.changeTabs(0);
  },
  methods: {
    forceRerender() {
      // 从 DOM 中删除 my-component 组件
      this.renderComponent = false;
      this.$nextTick(() => {
        // 在 DOM 中添加 my-component 组件
        this.renderComponent = true;
      });
    },
    changeTabs(i) {
      if (i === this.tabNum) {
        this.forceRerender();
        return;
      }
      this.tabNum = i;
      this.activeName = this.tabList[i].activeName;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.shopInfo {
  .order_tab {
    width: 100%;
    height: 74px;
    background: #fff;

    .tabList {
      width: 100%;
      height: 74px;
      padding-top: 20px;
      padding-left: 36px;
      box-sizing: border-box;
      display: flex;

      .tab_item {
        min-width: 58px;
        margin-right: 56px;
        font-size: 16px;
        font-weight: 500;
        color: #b1b1b1;
        position: relative;
        text-align: center;
        cursor: pointer;

        .tab_line {
          width: 58px;
          height: 6px;
          background: #fff;
          border-radius: 3px;
          margin: 15px auto 0;
        }
      }

      .tab_item_ac {
        color: #fc7200;

        .tab_line {
          background: #fc7200;
        }
      }
    }
  }

  .content {
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
  }
}
</style>
