<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="publicPageTree">
    <div class="publicPageTree_search">
      <el-input size="small" placeholder="输入关键字进行过滤" clearable v-model="filterText"></el-input>
    </div>
    <div class="publicPageTree_tree">
      <el-scrollbar style="height: 100%" :horizontal="false">
        <el-tree class="filter-tree" :expand-on-click-node="false" :data="data" :props="defaultProps" :node-key="nodeKey" :default-expanded-keys="defaultKeys" :highlight-current="true" :filter-node-method="filterNode" ref="tree" @node-click="treeNodeClick" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { Query } from "@/api/webApi"
import { listToTree } from '@/utils/validate'

export default {
  name: 'PublicPageTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeMap: {
      type: Object,
      default: () => new Object()
    },
    depMath: {
      type: Number | String,
      default: 0
    }
  },
  data () {
    return {
      loading: false,
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'pagename'
      },
      defaultKeys: [-1],
      nodeKey: 'pageconfigurationid',
      msgCaps: [],
      dataKey: 'pagename'
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    },
    treeData: {
      handler (arr) {
        this.msgCaps = arr
        this.pageInit(arr)
      },
      deep: true,
      immediate: true
    },
    treeMap: {
      handler (row) {
        const { nodeKey, nodeValue } = row
        if (nodeKey) this.nodeKey = nodeKey
        if (nodeValue) {
          this.defaultProps.label = nodeValue
          this.dataKey = nodeValue
        }
      },
      deep: true,
      immediate: true
    },
    depMath: {
      handler (arr) {
        this.pageInit(arr)
      },
      deep: true
    }
  },
  methods: {
    //格式化传递参数数据
    formatDefault (item) {
      if (typeof item != 'string') return {}
      const filterItem = {}
      const parameters = item.replace('{', '').replace('}', '')
      const parametersSplit = parameters?.split(',')
      parametersSplit.map(item => {
        const [key, val] = item?.split(':')
        filterItem[key] = val
      })
      return filterItem
    },
    filterNode (value, data) {
      if (!value) return true;
      return data[this.dataKey].indexOf(value) !== -1;
    },
    pageInit (arr) {
      if (typeof arr == 'object') {
        if (arr?.length) {
          const { defaultparameters, serviceid, pagename } = arr[0]
          const defaultparametersTag = defaultparameters ? this.formatDefault(defaultparameters) : { 1: 1 }
          this.queryTreeData(defaultparametersTag, serviceid, pagename)
        }
      } else {
        const { defaultparameters, serviceid, pagename } = this.msgCaps[0]
        const defaultparametersTag = defaultparameters ? this.formatDefault(defaultparameters) : { 1: 1 }
        this.queryTreeData(defaultparametersTag, serviceid, pagename)
      }
    },
    treeNodeClick (data) {
      this.$emit('treeNodeClick', data)
    },
    async queryTreeData (defaultparameters, serviceid, pagename) {
      this.loading = true;
      const datacontent = { filter: defaultparameters }
      const { nodeKey, nodeValue } = this.treeMap
      try {
        const { code, returnData } = await Query({
          page: 1,
          size: 9999,
          serviceid,
          datacontent,
          event: '0'
        });
        if (code == 0 && returnData?.length) {
          const name = '全部'
          const treeMenu = listToTree(returnData, 'superiorid', nodeKey)
          const treeObj = { serviceid: name, superiorid: name, children: treeMenu }
          treeObj[nodeValue] = name
          treeObj[nodeKey] = -1
          const treeMenuAll = [treeObj]
          this.defaultKeys = [-1]
          this.data = treeMenuAll
        } else {
          this.$message.error(`获取${pagename}数据失败`);
        }
      } catch (error) {
        this.$message.error(`获取${pagename}数据失败`);
      }
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.publicPageTree {
  background-color: #fff;
  padding: 20px;
  height: 100%;
  width: 100%;
  ::v-deep &_tree {
    margin-top: 20px;
    height: calc(100% - 52px);
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .is-horizontal {
      display: none;
    }
  }
}
</style>
