<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="stockLedgerDialogFlag"
    title="选择发货产品"
    :close-on-click-modal="false"
    width="80%"
    append-to-body
    :before-close="cancel">
    <div id="stockLedger__index">
      <el-card shadow="never">
        <ele-split-layout
          width="256px"
          allow-collapse
          :right-style="{ overflow: 'hidden' }"
        >
          <div class="el-tree_box">
            <div class="ele-border-lighter sys-organization-list">
              <el-tree
                :data="treeList"
                :props="defaultProps"
                ref="treeRef"
                style="height: 400px"
                :default-expanded-keys="current && current.id ? [current.id] : []"
                :highlight-current="true"
                node-key="id"
                @node-click="handleNodeClick"
              ></el-tree>
            </div>
          </div>
          <template v-slot:content>
            <item-list v-if="current.id" ref="itemList" :curRow="curRow" :sendProductDetail="sendProductDetail"
                       :current="current"/>
          </template>
        </ele-split-layout>
      </el-card>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
import itemList from './components/item-list';
import AssetTree from '@/components/AssetTree';
import {getTreeByGroup} from '@/api/bpm/components/wms';

export default {
  components: {itemList, AssetTree},
  props: {
    stockLedgerDialogFlag: Boolean
  },
  data() {
    return {
      treeData: [],
      current: {},
      curRow: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeList: [],
      treeLoading: false,
      sendProductDetail: []
    };
  },

  methods: {
    init(sendProductDetail, row) {
      this.getTreeData();
      this.sendProductDetail = sendProductDetail
      this.curRow = row
    },
    async getTreeData() {
      try {
        this.treeLoading = true;
        const res = await getTreeByGroup({type: 2});
        this.treeLoading = false;
        if (res?.code === '0') {
          this.treeList = res.data;
          this.$nextTick(() => {
            // 默认高亮第一级树节点
            if (this.treeList[0]) {
              this.$refs.treeRef.setCurrentKey(this.treeList[0].id);
              this.current = this.treeList[0];
              console.log(this.current);
            }
          });
          return this.treeList;
        }
      } catch (error) {
        console.log(error);
      }
      this.treeLoading = false;
    },
    handleNodeClick(data, node, el) {
      this.current = data;
    },
    handleSave() {
      this.sendProductDetail = this.$refs.itemList.getSelectionList().map(item => {
        return {
          code: item.no || item.code,
          barcodes: item.barcodes,
          engrave: item.engrave,
          dimension: item.dimension
        }
      })
      this.$emit('getStockLedger', this.sendProductDetail)
      this.cancel()
    },
    cancel() {
      this.$emit('update:stockLedgerDialogFlag', false)
    },
  }
};
</script>
<style lang="scss" scoped>
#stockLedger__index {
  padding: 6px;

  .el-tree_box {
    height: 100%;
  }

  .sys-organization-list {
    height: 550px;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
}

</style>
