<template>
  <!-- 树形表格 -->
  <div class="tree_card">
    <el-table class="tree_table" :data="tableData" row-key="id" style="width: 100%;"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <template v-for="(item,index) in treeData">
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-if="item.field == 'provStore.type'">
          <template slot-scope="scope">
            <div>{{initDictvalue(scope.row,item.options)}}</div>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="item.field == 'menuType' || item.field == 'visible'">
          <template slot-scope="scope">
            <el-tag size="small"
              :type="filterColor(scope.row,item.options,item.field)">{{initDictvalueil(scope.row,item.options,item.field)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :prop="item.field" :label="item.label" :width="item.colWidth" :align="item.align"
          v-else-if="item.field == 'provStore.district' || item.field == 'provTruckEnterprise.city' || item.field == 'provTruckEnterprise.area'">
          <template slot-scope="scope">
            <div>{{cityScreening(scope.row,item.options,item.field)}}</div>
          </template>
        </el-table-column>
        <el-table-column :fixed="suspension ? 'right' : false" :label="item.label" align="center" :width="item.colWidth"
          v-else-if="item.field == 'action'">
          <template slot-scope="scope">
            <div class="btn_tree">
              <div v-for="disk in item.labelButton" :key="disk.type" class="btn_table">
                <el-button :class="disk.modality" :type="disk.style" :icon="disk.icon" size="mini"
                  @click="buttonData(scope.row,disk.type)">
                  {{ disk.label }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :prop="item.field" :label="item.label" :width="item.colWidth"
          :fixed="item.fixed" :align="item.align" v-else>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: "treeTable",
    props: {
      btnType: {
        type: String,
        default: () => '',
      },
      // 表格数据
      treeDataList: {
        type: Array,
        default: () => [],
      },
      // 表格label数据
      treeData: {
        type: Array,
        default: () => [],
      },
      // 当前值数据
      presentValue: {
        type: Object,
        default: () => {},
      },
      // 是否悬浮
      suspension: {
        type: Boolean,
        default: () => false,
      }
    },
    data() {
      return {
        tableData: [],
        attributeTypeList: [{
            title: 'Number(数值)',
            id: 1,
          },
          {
            title: 'Text(字符串)',
            id: 2,
          },
          {
            title: 'Enum(枚举)',
            id: 3,
          },
          {
            title: 'Bool(布尔值)',
            id: 4,
          },
          {
            title: 'Time(时间)',
            id: 8,
          },
          {
            title: 'Object(对象)',
            id: 10,
          },
        ],
      }
    },
    watch: {
      treeDataList: {
        deep: true,
        immediate: true, // 立即触发监听函数
        handler(newVal, oldVal) {
          if (newVal) {
            this.tableData = this.addIdToNodes(newVal)
          }
          // console.log(this.tableData, 23)
        },
      },
    },
    methods: {
      // 文字匹配
      initDictvalue(value, list) {
        let name = ''
        list.forEach(item => {
          if (value.provStore.type === item.value) {
            name = item.label
          }
        })
        return name
      },
      // 普通类型文字匹配
      initDictvalueil(value, list, type) {
        let name = ''
        list.forEach(item => {
          if (value[type] === item.value) {
            name = item.label
          }
        })
        return name
      },
      // tag颜色获取
      filterColor(value, list, type) {
        let color = ''
        list.forEach(item => {
          if (value[type] === item.value) {
            color = item.bgcolor
          }
        })
        return color
      },
      // 城市筛选
      cityScreening(value, list, type) {
        function getChildById(parentArray, id) {
          for (let i = 0; i < parentArray.length; i++) {
            if (parentArray[i].value === id) { // 如果当前元素的ID与目标ID相等，则返回该元素
              return parentArray[i];
            } else if (parentArray[i].children && Array.isArray(parentArray[i].children)) { // 判断当前元素是否有子节点且类型为数组
              const result = getChildById(parentArray[i].children, id); // 对子节点进行递归调用
              if (result !== null) { // 若子节点存在结果，则返回该结果
                return result;
              }
            }
          }
          return null; // 没有找到符合条件的元素时返回null
        }
        var propertyName = type.split(".")
        var name = getChildById(list, value[propertyName[0]][propertyName[1]])
        if (name != null) {
          return name.label
        }
      },
      // 当前值匹配 根据key查询对象嵌套对象符合的一项
      initDictpresent(obj, key) {
        var that = this
        var arr = searchObject(obj, key)
        return arr

        function searchObject(obj, key) {
          for (let prop in obj) {
            if (typeof obj[prop] === 'object') {
              const result = searchObject(obj[prop], key);
              if (result) {
                return result;
              }
            } else if (prop === key) {
              return obj[prop];
            }
          }
          // console.log(key,obj,6)
          return null;
        }
      },
      // id生成
      addIdToNodes(treeData, prefix = "0") {
        function traverseTree(node, prefix) {
          node.newId = prefix;
          if (node.children && node.children.length) {
            node.children.forEach((childNode, index) => {
              // 生成子节点的 id
              const childId = childNode.id + index
              traverseTree(childNode, childId);
            });
          }
        }
        treeData.forEach((node, index) => {
          // 生成根节点的 id
          const rootNodeId = node.id + index
          traverseTree(node, rootNodeId);
        });
        return treeData
      },
      // 操作按钮
      buttonData(row, type) {
        this.$emit("buttonData", row, type);
      },
    },
  }
</script>
<style scoped lang="scss">
  ::v-deep .el-table__body .el-table__row.hover-row td {
    background-color: rgba(255, 255, 255, .2) !important;
  }

  ::v-deep .el-table--border {
    border: 1px solid #0171b9;
    border-right: 1px solid #0171b9
  }

  ::v-deep .el-table--border .el-table__cell {
    border: 1px solid #0171b9;
  }

  .tree_table {
    width: 100%;
    // margin-bottom: 20px;
  }

  ::v-deep .el-table__expand-icon {
    color: #fff !important;
  }

  .btn_tree {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .icon_tree {
    cursor: pointer;
    font-size: 30px;
    margin: 0px 10px;
  }

  .el-button--mini {
    padding: 5px;
    border-color: rgba(102, 177, 255, 1);
    color: #fff;
  }

  .deleteBtn {
    color: #ff6665;
  }

  .el-button:focus,
  .el-button:hover {
    color: #06d5f5;
    background: transparent;
  }

  .title_blue {
    color: #83FF00;
  }

  .title_red {
    color: #FF9494;
  }

  .title_blue1 {
    color: #34d9f4;
  }
</style>
