<template>
  <div>
    <div v-for="(child, index) in showTagsList" :key="index">
      <span v-if="child.children.length !== 0">
        <strong>{{ prefix }} - {{ child.names }}</strong>
        <RenderChildren :children="child.children" :prefix="`${prefix}-${child.names}`" :editTag="editTag" :delName="delName"></RenderChildren>
      </span>
      <span v-else>
        <van-tag
          :style="{
            'margin-right': '16px',
            'margin-bottom': '12px',
            'margin-top': '10px',
            cursor: editTag ? 'pointer' : 'default',
          }"
          size="large"
          :type="child.enableFlag == true ? 'primary' : 'default'"
          :closeable="editTag && child.enableFlag == true"
          @click="handleClickTag(child)"
          @close="handleCloseTag(child)"
        >{{ child.names }}</van-tag>
      </span>
      <br/>
    </div>
  </div>
</template>

<script>
import { Button, Field, Tag, Sticky, Toast, Form, Picker } from "vant";
import { editCustTag } from "@/service/api/custome";
export default {
  name: 'RenderChildren',
  props:{
    children: {
      type: Array,
      default: () => [],   
    },
    prefix: {
      type: String,
      default: "",   
    },
    editTag: {
      type: Boolean,
      default: false
    },
    delName: {
      type: String,
      default: ""
    }
  },
  inject: ['onNodeUpdate'],
  components: {
    VanButton: Button,
    VanField: Field,
    VanTag: Tag,
    VanSticky: Sticky,
    VanToast: Toast,
    VanForm: Form,
    VanPicker: Picker
  },
  data() {
    return {
      showTagsList: []
    }
  },
  mounted() {
    this.showTagsList = JSON.parse(JSON.stringify(this.children))
    console.log(this.editTag, this.showTagsList)
  },
  watch: {
    children(val) {
      this.showTagsList = JSON.parse(JSON.stringify(this.children))
    },
    delName(val) {
      console.log(1, this.showTagsList)
      this.updateEnableFlag(this.showTagsList, val)
      console.log(2, this.showTagsList)
    }
  },
  methods: {
    handleClickTag(val) {
        console.log(222, val.enableFlag, this.editTag)
        if (!this.editTag || val.enableFlag == true) return;
        this.showTagsList.filter(
          (item) => item.id === val.id
        )[0].enableFlag = true;
        this.onNodeUpdate('add', val)
        // this.updateListFn(this.showTagsList);
      },
      handleCloseTag(val) {
        this.showTagsList.filter(
          (item) => item.id === val.id
        )[0].enableFlag = false;
        this.onNodeUpdate('del', val)
        // this.updateListFn(this.showTagsList);
      },
      updateEnableFlag(tree, targetName) {
        if(!Array.isArray(tree)) return false
        for (const node of tree) {
          if (node.id === targetName) {
            node.enableFlag = false
            return true
          }
          if (Array.isArray(node.children)) {
            const found = this.updateEnableFlag(node.children, targetName)
            if (found) return true
          }
        }
        return false
      }
  }
}
</script>