<!--头部货位使用状态统计对应区域-->
<template>
  <!--仓库货位统计-->
  <a-card style="background-color: #ececec; padding: 10px">
    <a-row :gutter="4">
      <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <a-card>
          <a-progress :show-info="true" style="margin-top: 16px" :percent="100" size="small"
            :stroke-color="{ '0%': color,'100%': color}" />
          <a-divider />
          <div class="card-left">货位总数</div>
          <div class="card-right">{{currentHouse.allQty}}个</div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <a-card>
          <a-progress style="margin-top: 16px" :percent="currentHouse.freePercentage" size="small" status="active"
            :show-info="true" :stroke-color="{ '0%': color,'100%': color}" />
          <a-divider />
          <div class="card-left">空闲货位数</div>
          <div class="card-right">{{currentHouse.freeQty}}个,{{currentHouse.freePercentage}}%</div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <a-card>
          <a-progress :show-info="true" style="margin-top: 16px" :percent="currentHouse.usedPercentage" size="small"
            :stroke-color="{ '0%': color,'100%': color}" />
          <a-divider />
          <div class="card-left">载货货位数</div>
          <div class="card-right">
            {{currentHouse.usedQty}}个, {{currentHouse.usedPercentage}}%
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>
<script>
    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("setup props.houseCode", props.houseCode)
      const {
        getters,
        commit
      } = useStore();
      const store = useStore()
      const color = computed(() => store.getters.color);
      console.log("1")
      //当前仓库的信息汇总
      const currentHouse = ref({
        houseCode: "", //仓库号
        allQty: 0, //货位总数
        usedQty: 0, //已使用货位总数
        usedPercentage: 0, //已使用货位占比
        freeQty: 0, //空闲货位
        freePercentage: 0, //空闲货位占比
        locCount: 0, //huo
      });
      console.log("2")
      //获取指定报仓库报表对应的数据
      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")
      //指定仓库货位统计结果初始化
      const warehouseInit = async (houseCode) => {
        let data = await queryLocReport("locOccupancyRate", houseCode);
        console.log("warehouseInit", data)
        if (data) {
          currentHouse.value = data;
        }
        console.log("currentHouse.value", currentHouse.value)
      };

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

      });


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

  .card-left {
    display: inline;
  }

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