<!--周任务数统计-->
<template>
  <a-card title="出入库业务任务汇总">
    <a-row :gutter="10">
      <!--  <a-col :span="12">
        <a-card>
          <a-statistic title="Feedback" :value="20.18" :precision="2" suffix="%" :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px">
            <template v-slot:prefix>
              <arrow-up-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-statistic title="Idle" :value="12.3" :precision="2" suffix="%" class="demo-class"
            :value-style="{ color: '#cf1322' }">
            <template v-slot:prefix>
              <arrow-down-outlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      -->
      <a-col span="24">
        <a-table :columns="columns" :data-source="dataSource"  />
      </a-col>
    </a-row>
  </a-card>
</template>
<script>
  import {
    ArrowUpOutlined,
    ArrowDownOutlined
  } from "@ant-design/icons-vue";
    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    list
  } from "@/api/wms/warehouse";
  import {
    getReport
  } from "@/api/wms/report";
  import {
    defineComponent,
    onMounted,
    ref,
    watch,
    reactive,
    onUnmounted,
    computed
  } from "vue";
  import {
    useStore
  } from 'vuex';

  export default defineComponent({
    props: {
      houseCode: {
        type: String,
      }
    },
    components: {},
    setup(props) {
      //监听
      // watch(houseInfo, (newValue, oldValue) => {
      //   console.log("newValue", newValue)
      //   console.log("oldValue", oldValue)
      // })
      console.log("TaskStatistics setup props.houseCode", props.houseCode)
      const {
        getters,
        commit
      } = useStore();
      const store = useStore()
      const color = computed(() => store.getters.color);
      console.log("1 TaskStatistics")
      //当前仓库的信息汇总

      const columns = [
      {
          title: "日期",
          dataIndex: "dayTime",
          key: "dayTime",
          width: 120
        },
        {
          title: "业务类型",
          dataIndex: "taskType",
          key: "taskType",
          width: 120
        },
        {
          title: "方向标志",
          dataIndex: "directFlag",
          key: "directFlag",
          width: 120
        },
        {
          title: "总数",
          dataIndex: "total",
          key: "total",
          width: 100
        }
      ];
      const dataSource = ref([]);

      console.log("2 TaskStatistics")
      //获取指定报仓库报表对应的数据
      const queryReportInfo = async (reportCode, param) => {
        console.log("queryReportInfo")
        var response = await getReport({
          "reportCode": reportCode,
          "params": param
        });
        console.log("response", response)
        return response.data;
      };
      console.log("3 TaskStatistics")
      //指定仓库货位统计结果初始化
      const tableDataInit = async (houseCode) => {
        let tableData = await queryLocReport("taskTypeStatistics", houseCode);
        dataSource.value = [...tableData];
        console.log("tableDataInit taskTypeStatistics", tableData)
      };

      console.log("4 TaskStatistics")
      watch(props, (props) => {
        console.log("5 TaskStatistics")
        console.log("watch props", props)

      })
      console.log("6 TaskStatistics")
      //调用指定仓库初始化
      //warehouseInit()
      //胡我诶数据的统一查询方式
      const queryLocReport = async (reportCode, houseCode) => {
        var response = await getReport({
          "reportCode": reportCode,
          "params": {
            "houseCode": houseCode,
          }
        });
        console.log("7 TaskStatistics")
        console.log("7 response")
        return response.data;
      };
      console.log("8 TaskStatistics")
      //step中从山至下的执行，当step执行玩不后才执行onMounted
      onMounted(() => {
        //查询所有的仓库节点信息
        console.log("houseCode 9 TaskStatistics", props.houseCode)
        tableDataInit(props.houseCode)
      });
      onUnmounted(() => {

      });
      return {
        columns,
        dataSource,
        color,
        queryReportInfo,
        queryLocReport,
      };
    }
  });
</script>
<style lang="less" scoped>
  .ant-divider-horizontal {
    margin-bottom: 10px !important;
  }

  .card-left {
    display: inline;
  }

  .card-right {
    float: right;
  }
</style>
