<template>
  <page-layout>
    <a-row :gutter="[5, 10]">
      <!-- 货位树 -->
      <a-col :span="3">
        <a-card>
          <a-tree showLine :tree-data="state.treeData" v-model:expandedKeys="expandedKeys"
            v-model:selectedKeys="selectedKeys" :replace-fields="replaceFields" @select="onSelect">
          </a-tree>
        </a-card>
      </a-col>
      <!-- 货位列表 -->
      <a-col :span="21">
        <a-card>
          <!-- 查询表单 -->
          <a-card>
            <!--图示区域-->
            <iconArea></iconArea>
          </a-card>
          <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
          <!--堆垛机库货位视图-->
          <template v-if="state.warehouseType==='StackerWarehouse'">
            <stackerWarehouse :nodeInfo='state.nodeInfo' :locsInfo='state.locsInfo'></stackerWarehouse>
          </template>
          <!--密集库货位视图-->
          <template v-else-if="state.warehouseType==='DenseWarehouse' ">
            <denseWarehouse :nodeInfo='state.nodeInfo' :locsInfo='state.locsInfo'></denseWarehouse>
          </template>
          <template>未知的仓库类型</template>
        </a-card>
      </a-col>
    </a-row>
    <changeLocStatus :visible="state.visibleChangeStatus" @close="closeChangeStatus" :record="state.selectedRowKeys">
    </changeLocStatus>
    <changeLocStoreStatus :visible="state.visibleChangeStoreStatus" @close="closeChangeStoreStatus"
      :record="state.selectedRowKeys"></changeLocStoreStatus>
  </page-layout>
</template>

<script>
  import iconArea from './modal/iconArea.vue';
  import changeLocStatus from './modal/locStatusManage.vue';
  import changeLocStoreStatus from './modal/locStoreStatusManage.vue';
  import stackerWarehouse from './modal/StackerWarehouse.vue';
  import denseWarehouse from './modal/DenseWarehouse.vue';
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined,
    CarryOutOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    list,
    remove,
    removeBatch,
    wmsLocDict
  } from "@/api/wms/loc";
  import {
    getNodeByCode
  } from "@/api/wms/warehouse";

  import {
    reactive,
    createVNode,
    watch,
    ref
  } from 'vue';
  import {
    stat
  } from 'fs';

  const removeKey = "remove";
  const removeBatchKey = "removeBatch";

  export default {
    components: {
      iconArea,
      denseWarehouse,
      stackerWarehouse,
      changeLocStatus,
      changeLocStoreStatus,
    },
    setup() {

      const tableRef = ref();

      ///根据节点编号获取节点信息
      const queryNodeInfo = async (param) => {
        console.log("queryNodeInfo:", param)
        var response = await getNodeByCode({
          "nodeCode": param
        });
        console.log("response", response)
        if (response.success) {
          state.nodeInfo = response.data
          console.log("获取到nodeInfo", state.nodeInfo)
        } else {
          console.log("未获取到nodeInfo", state.nodeInfo)
        }
      };

      /// 外置参数
      const state = reactive({
        warehouseType: "",
        nodeInfo: {},
        locsInfo: [],
        selectedRowKeys: [],
        selectedRows: {},
        param: {},
        treeData: [],
        visibleChangeStatus: false,
        visibleChangeStoreStatus: false,
      })

      const searchParam = [{
          key: "locCode",
          type: "input",
          label: "位置编号"
        },
        {
          key: "locStatus",
          type: "select",
          label: "位置状态",
          options: [{
            value: 'Normal',
            text: '正常',
          }, {
            value: 'NoIn',
            text: '禁入',
          }, {
            value: 'NoOut',
            text: '禁出',
          }, {
            value: 'Freeze',
            text: '冻结',
          }]
        },
        {
          key: "storeStatus",
          type: "select",
          label: "存储状态",
          options: [{
            value: 'Free',
            text: '空闲',
          }, {
            value: 'Load',
            text: '载货',
          }, {
            value: 'DoIn',
            text: '预入',
          }, {
            value: 'DoOut',
            text: '预出',
          }, {
            value: 'Fault',
            text: '故障',
          }]
        },
      ]

      //树相关
      const expandedKeys = ref([]);
      const selectedKeys = ref([]);
      const replaceFields = {
        // children: 'children',
        title: 'name',
      };

      watch(expandedKeys, () => {
        console.log('expandedKeys', expandedKeys);
      });
      watch(selectedKeys, () => {
        console.log('selectedKeys', selectedKeys);
      });

      //给树节点赋值
      const getWmsLocDict = async () => {
        var response = await wmsLocDict();
        state.treeData = response.data.children;
        console.log("树节点数据", response.data.children)
      };
      //页面加载时自动调用加载树的方法
      getWmsLocDict();

      //触发表单查询事件
      const onSelect = async (value) => {
        console.log("节点点击事件", value)
        if (selectedKeys.value.length == 0) return; //如果没有值被选中，就跳出当前方法，不做任何操作
        let selectedCode = selectedKeys.value[0].split("_");
        //未选中排或层数据
        if (selectedCode.length < 3) return;
        var nodeInfo = await queryNodeInfo(value[0]);
        let parentCode = selectedCode[0];
        if (selectedCode[2] === "0") {

          let row = selectedCode[1];
          console.log("row", row)
          //查询节点信息
          state.locsInfo = await search({
            parentCode: parentCode,
            row: row,
          })
          //堆垛机库
          state.warehouseType = "StackerWarehouse";
          console.log("state.nodeInfo")
        } else {
          //密集库
          state.warehouseType = "DenseWarehouse";
          let layer = selectedCode[2];
          console.log("layer", layer)
          let a = await search({
            parentCode: parentCode,
            layer: layer,
          })
          console.log("AAAAAAAAAAAAA")
          state.locsInfo = [...a];
          console.log("state.nodeInfo", state.nodeInfo)
          console.log("state.locsInfo", state.locsInfo)
        }
      }

      const search = async (param) => {
        var response = await list(param);
        if (response.success) {
          console.log("response.data", response.data)
          return [...response.data];
        } else {
          return [];
        }
      }

      const closeChangeStatus = function() {
        tableRef.value.reload();
        state.visibleChangeStatus = false
      }

      const closeChangeStoreStatus = function() {
        tableRef.value.reload();
        state.visibleChangeStoreStatus = false
      }

      const onSelectChange = (selectedRowKeys, selectedRows) => {
        state.selectedRowKeys = selectedRowKeys;
        state.selectedRows = selectedRows;
        console.log("selectedRows", selectedRows)
      };

      return {
        state, // 状态共享

        //树相关
        onSelect,
        expandedKeys,
        selectedKeys,
        replaceFields,

        search,
        searchParam, // 查询参数
        queryNodeInfo,


        closeChangeStatus,
        closeChangeStoreStatus,

        onSelectChange,
        tableRef,
      };
    },
  };
</script>
<style lang="less">
  @import "./index.less";

  :deep(#components-a-tooltip-demo-color) .ant-btn {
    margin-right: 18px;
    margin-bottom: 18px;
  }

  /*指定节点下的按钮大小*/
  .wrapper_example .ant-btn {
    width: 10px;
    min-height: 10px;
  }

  .wrapper_example .ant-btn:hover {
    width: 10px;
    color: aliceblue;
    border-color: aliceblue;
  }

  .wrapper_example-2 .ant-btn {
    width: 10px;
    min-height: 10px;
  }

  .wrapper_example-2 .ant-btn:hover {
    width: 10px;
    color: aliceblue;
    border-color: aliceblue;
  }
</style>
