<!-- 清单选项:  close 删除函数 若完成了清单的选择操作,则会返回选择的相应数据 -->
<template enter-class="selectUsedlist">
  <!--uni-app-->
  <tui-modal :show="modal"
             custom
             @cancel="hideModal"
             :width="'90%'">
    <view class="tui-modal-custom">
      <!-- <image src="/static/images/chat/fail.png"
               class="tui-tips-img"></image> -->
      <view class="tui-modal-custom-text">
        <view class="selectBlank">
          <!-- <view class="search_input">
            <tui-input v-model="search.name"
                       placeholder="请输入工号名称检索"
                       clearable
                       isFillet
                       confirm-type="search"
                       @confirm="doSearch">
              <template #left>
                <tui-icon name="search"
                          :size="20"
                          margin="0 15px 0 0"></tui-icon>
              </template>
            </tui-input>
          </view> -->
          <view class="selections">
            <view v-for="(item, index) in selections"
                  class="select_title"
                  :key="index"
                  @click="clickBackSelections(item, index)">
              <text>{{ item.name }}</text>
              <view v-if="index !== selections.length - 1"
                    class="divider"></view>
            </view>
            <view class="divider"></view>
            <text class="pleaseChoose">请选择</text>
          </view>
          <infiniteScroll ref="infiniteScroll"
                          :fetchItems="getUsedlistChildren"
                          :hasMore="hasMore">
            <view class="card"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="doSelect(item)">
              <tui-tag v-if="isLeaf"
                       padding="8rpx"
                       size="24rpx">核</tui-tag>
              <text>{{ !!item.name?item.name:item.usedlist_account_name }}</text>
            </view>
          </infiniteScroll>
        </view>
      </view>
    </view>
  </tui-modal>
</template>
<script>
import infiniteScroll from "../../../components/infiniteScroll/infiniteScroll.vue";
export default {
  components: { infiniteScroll },
  props: [""],
  data() {
    return {
      isLeaf: false, //判断使用 get 叶子节点接口
      modal: false,
      list: [],
      hasMore: true,
      pageSize: 20,
      search: {
        name: "",
        parent_name: "",
        id: 0,
      },
      selections: [],
      // currentItem: null,
    };
  },
  created() {
    this.modal = true;
    // this.reload();
  },
  methods: {
    reload() {
      this.hasMore = true;
      this.list = [];
      this.getUsedlistChildren();
    },
    async getUsedlistChildren() {
      try {
        const { data } = await this.$request.get(`common/UsePart/getChildren`, {
          params: {
            ...this.search,
            page: Math.ceil(this.list.length / this.pageSize) + 1,
            limit: this.pageSize,
          },
        });
        if (data.length == 0) {
          this.isLeaf = true; //再次点击列表时会返回
          this.getLeaf(this.selections[this.selections.length - 1]);
          return;
        } else {
          this.isLeaf = false;
        }
        this.list = [...this.list, ...data];
        if (data.length < this.pageSize) {
          this.hasMore = false;
        }
      } catch (error) {}
      console.log("@@@list:", this.list);
    },
    async getLeaf(item) {
      try {
        const { data } = await this.$request.get(
          `common/UsePart/getUsedListDetail`,
          {
            params: {
              usedlist_wbs: item.usedlist_wbs,
              ...this.search,
              page: Math.ceil(this.list.length / this.pageSize) + 1,
              limit: this.pageSize,
            },
          }
        );
        // if (data.length == 0) {
        //   this.retUseDlist();
        //   return;
        // }
        this.list = [...this.list, ...data.data];
        if (data.length < this.pageSize) {
          this.hasMore = false;
        }
      } catch (error) {}
    },
    //部位的点击操作
    doSelect(item) {
      this.search.name = ""; //点击操作时清搜索内容
      // console.log("我在点击:", item.is_leaf);
      this.hasMore = true;
      this.selections.push(item);
      this.search.parent_name = item.name;
      this.search.id = item?.usedlist_wbs; //上级id
      if (this.isLeaf) {
        //当搜索叶子数据后点击叶子会进入此操作
        this.retUseDlist();
        return;
      }
      this.reload(); //重新搜索
      //是叶子  返回数据操作
      console.log("叶子结点,返回数据:", item);
      // this.currentItem = item;
    },
    //点击路径返回相应的操作
    clickBackSelections(item, index) {
      console.log("路径返回!");
      if (this.selections.length == index + 1) return;
      this.hasMore = true;
      this.selections = this.selections.slice(0, index + 1);
      this.search.parent_name = item.name;
      this.search.id = item?.usedlist_wbs; //上级id
      this.reload();
    },
    /**叶子节点放回数据返回数据 */
    retUseDlist() {
      console.log("返回数据中:");
      // console.log("this.item:", this.currentItem);
      console.log("selections: []", this.selections);
      this.$emit("close", this.selections);
    },
    //调用此方法显示组件
    showModal() {
      this.modal = true;
    },
    //隐藏组件
    hideModal() {
      this.$emit("close");
      this.modal = false;
    },
    handleClick(e) {
      let index = e.index;
      if (index === 0) {
        this.tui.toast("你点击了取消按钮");
      } else {
        this.tui.toast("你点击了确定按钮");
      }
      this.hideModal();
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  display: flex;
  background-color: #fff;
  border-radius: 5px;
  align-items: center;
  padding: 7px 10px;
  gap: 10px;
}
.selections {
  background-color: #fff;
  padding: 10px;
  font-size: 12px;
  display: flex;
  .select_title {
    display: flex;
  }
  .divider {
    width: 4px;
    background-color: blue;
    margin: 0 10px;
    border-radius: 999px;
  }
  .pleaseChoose {
    color: red;
    padding-bottom: 1px;
    border-bottom: 2px solid red;
  }
}
.selectBlank {
  height: 80vh;
  // width: 85vw;
  overflow: scroll;
  .search_input {
    padding: 15rpx;
    background-color: rgb(81, 121, 239);
  }
  .card {
    margin: 20rpx !important;
  }
  .footer {
    font-size: 16rpx;
    color: #999;
    padding: 22rpx;
  }
}
</style>
