<template>
  <div id="home">
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card v-if="houseList.length>0 ">
            <a-tabs  >
              <!-- <a-tab-pane key="1" tab="主页">
                <ImageScreen></ImageScreen>
              </a-tab-pane> -->
              <a-tab-pane :key="item.houseCode" :tab="item.houseName" v-for="item in houseList">
                <!--头部的货位数统计界面-->
                <locArea :houseCode="item.houseCode"></locArea>
                <!--底部静态table数据统计-->
                <page-layout>
                  <a-row :gutter="[10, 10]">
                    <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <!--第一个报表:近一周内任务数汇总-->
                      <TaskStatistics :houseCode="item.houseCode"></TaskStatistics>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <!--第二个报表：近一周内不同业务类型的任务汇总-->
                      <TaskTypeStatistics :houseCode="item.houseCode"></TaskTypeStatistics>
                    </a-col>
                  </a-row>
                </page-layout>
                <!-- <TableArea :houseCode="item.houseCode"></TableArea> -->
              </a-tab-pane>
              <template #leftExtra>
                <a-button class="tabs-extra-demo-button">Left Extra Action</a-button>
              </template>
              <template #rightExtra>
                <a-button>Right Extra Action</a-button>
              </template>
            </a-tabs>
          </a-card>
          <a-card v-else>
            <template>
              <a-empty />
            </template>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
    <page-footer></page-footer>
  </div>
</template>
<script>
  import {
    Chart
  } from "@antv/g2";
  // import {
  //   ArrowUpOutlined,
  //   ArrowDownOutlined
  // } from "@ant-design/icons-vue";
  import locArea from './modal/locArea.vue';
  import TaskStatistics from './modal/TaskStatistics.vue';
  import TaskTypeStatistics from './modal/TaskTypeStatistics.vue';
  //import ImageScreen from './modal/ImageScreen.vue';
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    list
  } from "@/api/wms/warehouse";
  import {
    getReport
  } from "@/api/wms/report";
  import {
    onMounted,
    ref,
    watch,
    reactive,
    onUnmounted,
    computed
  } from "vue";
  import {
    useStore
  } from 'vuex';

  export default {
    components: {
      // ArrowUpOutlined,
      // ArrowDownOutlined,
      locArea,
      TaskStatistics,
      TaskTypeStatistics
    },
    setup() {
      //当前打开的tab
      const activeKey = ref('1');
      //仓库结合
      const houseList = ref([]);
      const {
        getters,
        commit
      } = useStore();
      const store = useStore()
      const color = computed(() => store.getters.color);
      const queryWarehouseInfo = async () => {
        var response = await list({
          'nodeType': 'Warehouse'
        });
        console.log("查询仓库信息response", response)
        if (response.success) {
          houseList.value = response.data
          console.log("获取到nodeInfo", houseList.value)
        } else {
          message.error({
            content: "获取参数信息失败，请检查是否仓库信息为定义" + response.msg,
            key: "queryWarehouseInfo",
            duration: 1
          }).then(() => {
            // cancel();
          });
        }
      };
      onMounted(() => {
        //查询所有的仓库节点信息
        queryWarehouseInfo();
      });


      return {
        activeKey,
        houseList

      };
    }
  };
</script>
<style lang="less" scoped>
  .ant-divider-horizontal {
    margin-bottom: 10px !important;
  }

  .card-left {
    display: inline;
  }

  .card-right {
    float: right;
  }

  .tabs-extra-demo-button {
    margin-right: 16px;
  }

  .ant-row-rtl .tabs-extra-demo-button {
    margin-right: 0;
    margin-left: 16px;
  }
</style>
