<template>
  <div>
    <el-dialog
      title="物料分类选择"
      width="500px"
      :close-on-click-modal="false"
      :append-to-body="true"
      v-dialogDrag
      class="userDialog"
      :visible.sync="visible"
    >
      <el-container style="height: 500px">
        <el-container>
          <el-main>
            <el-row :gutter="24" class="content">
              <el-col :span="24">
                <el-input
                  placeholder="输入关键字进行过滤"
                  size="small"
                  v-model="filterText"
                  style="margin-bottom: 16px"
                >
                </el-input>

                <el-tree
                  class="filter-tree"
                  :data="threedata"
                  :props="defaultProps"
                  accordion
                  node-key="id"
                  highlight-current
                  @node-click="clickTree"
                  :filter-node-method="filterNode"
                  ref="tree"
                >
                  <span slot-scope="{ node, data }">
                    {{ data.code }}{{ data.materialType }}
                  </span>
                </el-tree>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="visible = false"
          icon="el-icon-circle-close"
          >关闭</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-check"
          @click="doSubmit()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTree } from "@/api/classify/basic";
export default {
  data() {
    return {
      loading: false,
      visible: false,
      filterText: "",
      threedata: [],
      defaultProps: {
        children: "childrens",
        label: "materialType",
      },
      // 判断是否为最末级节点
      isLast: false,
      // 选中的节点
      choosePoint: {},
    };
  },
  props: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.refreshList();
      });
    },
    // 获取数据列表
    refreshList(data) {
      this.loading = true;
      getTree({ isEnable: "0" }).then((res) => {
        console.log("res", res);
        if (res.code === 200) {
          this.threedata = res.rows.sort((a, b) => a.code - b.code);
        }
        this.loading = false;
      });
    },
    clickTree(data) {
      console.log("树形节点信息：", data);
      if (data.childrens.length == 0) {
        this.isLast = true;
      } else {
        this.isLast = false;
      }
      this.choosePoint = data;
    },
    filterNode(value, data) {
      console.log("value", value);
      console.log("data", data);
      if (!value) return true;
      return data.materialType.indexOf(value) !== -1;
    },
    doSubmit() {
      if (this.isLast == false) {
        this.$message({
          message: "请选择最末级节点",
          type: "warning",
        });
      } else {
        console.log("子组件选择的数据", this.choosePoint);
        this.$emit("doSubmit", this.choosePoint);
        this.visible = false;
      }
    },
    loadNode(node, resolve) {
      console.log("node, resolve", node, resolve);
      // if (!node.data.length)
      //   resolve(node.data.childrens.sort((a, b) => a.code - b.code));
      // else resolve(this.threedata);
    },
  },
};
</script>
<style lang="scss">
.userDialog {
  .el-dialog__body {
    padding: 10px 0px 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  .el-main {
    padding: 20px 20px 5px 20px;
    .el-pagination {
      margin-top: 5px;
    }
  }
}
</style>
