<template>
  <div class="shopInfo">
    <el-row class="order_tab">
      <el-col :span="24">
        <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">
      <el-col :span="24">
        <component v-if="renderComponent" :is="activeName"></component>
      </el-col>
    </el-row>
    <merchant-add ref="merchantAdd" :products="productList"></merchant-add>

  </div>
</template>

<script>
import merchantAdd from "./merchantAdd.vue";
import shopList from "./shopCompoents/shopList";
import storeList from "./shopCompoents/bindTakeOut.vue";
import deliveryList from "./shopCompoents/bindDelivery.vue";
import printerList from "./shopCompoents/bindPrinter.vue";
import bus from "../common/bus.js";
import { getProductList } from "../api/shop.js";
export default {
  name: "HelloWorld",
  components: {
    merchantAdd,
    shopList,
    storeList,
    deliveryList,
    printerList,
  },

  data() {
    return {
      activeName: "shopList",
      tabList: [
        { name: "门店列表", index: 0, activeName: "shopList" },
        { name: "绑定外卖平台", index: 1, activeName: "storeList" },
        { name: "绑定配送平台", index: 2, activeName: "deliveryList" },
        { name: "绑定打印机", index: 3, activeName: "printerList" },
      ],
      tabNum: 0,
      renderComponent: true,
      productList: [],
      memberType: this.$store.state.userInfo.memberType,
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: true,
    },
  },
  created() {
    this.getProductList();
    bus.$on("goPrinter", () => {
      this.changeTabs(3);
    });
    let i = this.$route.params.tabNum;
    if (i) {
      this.changeTabs(Number(i));
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name) {
        vm.$nextTick(() => {
          vm.changeTabs(0);
        });
      }
    });
  },
  mounted() {},
  methods: {
    forceRerender() {
      // 从 DOM 中删除 my-component 组件
      this.renderComponent = false;
      this.$nextTick(() => {
        // 在 DOM 中添加 my-component 组件
        this.renderComponent = true;
      });
    },
    changeTabs(i) {
      if (this.memberType === 1) {
        this.$confirm("您当前还不是商户，请先申请成为商户！", "提示", {
          confirmButtonText: "成为商户",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
          .then(() => {
            this.$refs.merchantAdd.init(0);
          })
          .catch(() => {});
      }
      if (i === this.tabNum) {
        this.forceRerender();
        return;
      }
      this.tabNum = i;
      this.activeName = this.tabList[i].activeName;
    },
    getProductList() {
      getProductList().then((res) => {
        if (res.code === 200) {
          this.productList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</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;
  }
}
</style>
