<template>
  <div class="financeReport pagePadding">
    <div v-if="powers.some((i) => i == '001') && currentCompany">
      <el-tabs v-model="activeName">
        <el-tab-pane label="商品基本信息报表" name="table3">
          <table3 v-if="activeName == 'table3'"></table3>
        </el-tab-pane>
        <el-tab-pane label="商品成本信息报表" name="table1">
          <table1 v-if="activeName == 'table1'"></table1>
        </el-tab-pane>
        <el-tab-pane label="商品售价信息报表" name="table2">
          <table2 v-if="activeName == 'table2'"></table2>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="company-error" v-else-if="!currentCompany">
      <i class="el-icon-warning"></i>
      <p>请选择一家业务公司</p>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>

<script>
import companyHelper from "@/mixins/companyHelper";
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
//标签页组件引入
const table1 = () => import("./components/table1");
const table2 = () => import("./components/table2");
const table3 = () => import("./components/table3");
export default {
  mixins: [mixinPage, resToken, companyHelper],
  components: {
    table1,
    table2,
    table3,
  },

  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "businessProductReport") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      activeName: "table3",
    };
  },
  mounted(){
    this.onCompanyChange() //MARK
  },
  methods: {
    //   handleClick(tab, event) {
    //     console.log(tab, event);
    //   }
    onCompanyChange(){ //MARK
      this.isHasCurrentCompany()
    }
  },
};
</script>

<style lang="scss" scoped>
.financeReport {
  position: relative;
  min-height: calc(100vh - 50px);
  .company-error{
    top: 50%;
    left: 50%;
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 10px;
 }
}
</style>
