<template>
  <div :class="tdClass">
    <span
      class="before-line"
      v-if="root !== 0 && nodes !== 1"
      :style="{ left: model.bLeft + 'px' }"
    ></span>
    <table>
      <tr>
        <td :colspan="colSpan">
          <table>
            <tr class="leve" :class="levelClass">
              <td class="td1">{{ model.id }}</td>
              <td class="td2">
                <div class="td-title" @dblclick="handlerExpand(model)">
                  <span
                    v-if="model.childrens.length > 0"
                    class="tree-close"
                    :class="{ 'tree-open': model.isExpand }"
                    @click="handlerExpand(model)"
                  ></span>
                  <a class="ellipsis">
                    <i class="t-icon m-dep"></i>
                    <span :title="model.org_name">{{
                      model.org_name
                    }}</span>
                  </a>
                </div>
              </td>
              <td class="td3">{{ model.create_time }}</td>
              <td class="td4">
                <span :title="model.modify_time" class="ellipsis">{{
                  model.modify_time
                }}</span>
              </td>
              <td class="td6">
                <a class="reset" href="javascript:;" @click="actionFunc(model)"
                  >编辑</a
                >
                <i class="line"></i>
                <a class="delete" href="javascript:;" @click="deleteFunc(model)"
                  >删除</a
                >
                <i class="line"></i>
                <a
                  class="addr"
                  href="javascript:;"
                  @click="addOrganizationFunc(model)"
                  >添加下级组织</a
                >
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    <!-- 暂无数据 -->

    <div v-show="model.isExpand" class="other-node" :class="otherNodeClass">
      <tree-item
        v-for="(m, i) in model.childrens"
        :key="String('child_node' + i)"
        :num="i"
        :root="1"
        @actionFunc="actionFunc"
        @deleteFunc="deleteFunc"
        @addOrganization="addOrganizationFunc"
        @handlerExpand="handlerExpand"
        :nodes.sync="model.childrens.length"
        :trees.sync="trees"
        :model.sync="m"
      >
      </tree-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "treeItem",
  props: ["model", "num", "nodes", "root", "trees"],
  data() {
    return {
      parentNodeModel: null,
    };
  },
  computed: {
    colSpan() {
      return this.root === 0 ? "" : 6;
    },
    tdClass() {
      return this.root === 0 ? "td-border" : "not-border";
    },
    levelClass() {
      return this.model ? "leve-" + this.model.level : "";
    },
    childNodeClass() {
      return this.root === 0 ? "" : "child-node";
    },
    otherNodeClass() {
      return this.model ? "other-node-" + this.model.level : "";
    },
  },
  watch: {
    // 'model': {
    // 	handler() {
    // 		console.log('对象变化', this.model.isExpand)
    // 	},
    // 	deep: true
    // }
  },
  methods: {
    getParentNode(m) {
      // 查找点击的子节点
      var recurFunc = (data, list) => {
        data.forEach((l) => {
          if (l.id === m.id) this.parentNodeModel = list;
          if (l.childrens) {
            recurFunc(l.childrens, l);
          }
        });
      };
      recurFunc(this.trees, this.trees);
    },

    handlerExpand(m) {
      // console.log(m)
      // console.log('-------------------')
      this.$emit("handlerExpand", m);
    },

    // 删除
    deleteFunc(m) {
      this.$emit("deleteFunc", m);
    },

    // 编辑
    actionFunc(m) {
      this.$emit("actionFunc", m);
    },

    // 添加下级组织
    addOrganizationFunc(m) {
      this.$emit("addOrganization", m);
    },
  },
  filters: {
    formatDate: function (date) {
      // 后期自己格式化
      return date; //Utility.formatDate(date, 'yyyy/MM/dd')
    },
  },
};
</script>
