<template>
  <div class="basic-com">
    <div class="bc-top-search">
      <div class="bc-top-change" v-if="isSidebar" @click="changeSidebar">
        <i class="icon-jczj-toggle"></i>
        切换
      </div>
      <div class="bc-search-in">
        <el-autocomplete ref="autocomplete" value-key="name" :trigger-on-focus="false" placeholder="请输入关键字" @select="gotoMenuTop" :fetch-suggestions="FindMenu" v-model="keyValue" class="smp-normal-input">
        </el-autocomplete>
        <el-button class="bc-sea-btn" icon="el-icon-search" @click="searchItemsLight"></el-button>
        <i class="el-icon-close bc-sea-close" v-show="isShowSeaClose" @click="clearSea"></i>
      </div>

      <div class="bc-search-bread" v-if="searchBreadList.length">
        <i class="el-icon-close" @click="removeSearchBread"></i>
        <el-breadcrumb class="bcsb-crumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item,index) in searchBreadList" :key="index">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="bc-bd">
      <div class="bc-wraper scrollbar-transparent">
      <pubuliu :list="list" ref="pubuliu"></pubuliu>
      </div>
    </div>
  </div>
</template>

<script>
// import cloneDeep from 'lodash/cloneDeep'
import pubuliu from './pubuliu'
export default {
  components: {
    pubuliu
  },
  props: {
    menuData: '',
    isSidebar: false
  },
  data () {
    return {
      isShowSeaClose: false,
      currentSearchItems: [],
      iconIndex: 0,
      sidebarMenuItem: {},
      searchBreadList: [],
      keyValue: '',
      list: [

      ],
      treeArr: [],
      treeObj: {},
      iconArr: ['jczj-icon-wbfx', 'jczj-icon-kshfxtyxt', 'jczj-icon-zhxss', 'jczj-icon-dwjx', 'jczj-icon-sjmf', 'jczj-icon-tysjfw', 'jczj-icon-xtxtgj', 'jczj-icon-znsb', 'jczj-icon-zstp', 'jczj-icon-sjkshfw', 'jczj-icon-lcbdfw', 'jczj-icon-mxgl', 'jczj-icon-znbq', 'jczj-icon-swsjjz', 'jczj-icon-swsjct', 'jczj-icon-swtxmn', 'jczj-icon-bzdlys', 'jczj-icon-bzyxsj', 'jczj-icon-bzslwp', 'jczj-icon-swdxfx', 'jczj-icon-bzdxsj', 'jczj-icon-bzswmx', 'jczj-icon-yhjsgl', 'jczj-icon-yhqxgl', 'jczj-icon-swdcxr', 'jczj-icon-bzqxyx', 'jczj-icon-wmts', 'jczj-icon-wfs', 'jczj-icon-wms', 'jczj-icon-qjdlxx', 'jczj-icon-snwyth', 'jczj-icon-tyyhfw', 'jczj-icon-dddlfw', 'jczj-icon-yhxxrz', 'jczj-icon-zzjgrz', 'jczj-icon-tyqxrz', 'jczj-icon-sjzz', 'jczj-icon-jsmxkj', 'jczj-icon-sslxr', 'jczj-icon-jrclyq', 'jczj-icon-ljskf', 'jczj-icon-fzfw', 'jczj-icon-ryda', 'jczj-icon-clda', 'jczj-icon-qyda', 'jczj-icon-dpda', 'jczj-icon-sjda', 'jczj-icon-dazdy', 'jczj-icon-zxfb', 'jczj-icon-dawh', 'jczj-icon-xxdl', 'jczj-icon-fbsyykf', 'jczj-icon-apiwg', 'jczj-icon-xtrz', 'jczj-icon-yhrz', 'jczj-icon-ycrz', 'jczj-icon-czrz', 'jczj-icon-yzsff', 'jczj-icon-ffdy', 'jczj-icon-sjgd']
    }
  },
  watch: {
    keyValue (val) {
      if (val) {
        this.isShowSeaClose = true
      } else {
        this.isShowSeaClose = false
      }
    }
  },
  mounted () {
    // console.log('basiccom')
    this.chooseEnter()
    this.setTreeToArr()
  },
  methods: {
    ceshi () {
      for (let i = 11; i < 17; i++) {
        this.list.unshift({
          name: 'cs二级导航名' + i,
          id: i,
          style: {}
        })
      }
    },
    removeSearchBread () {
      this.removeSearchBreadLight()
      this.searchBreadList = []
    },
    changeSidebar () {
      this.$parent.gotoNormalSidebar()
    },
    chooseEnter () {
      if (this.isSidebar) {
        this.sidebarMenuItem = this.$store.state.sidebarMenuItem
        this.formatSidebarToList()
        console.log(this.list)
      } else {
        this.getBasicComList()
      }
      this.list.forEach((e) => {
        e.onSearchStatus = false
      })
    },
    getBasicComList () {
      // let dataArr = [
      //   {
      //     name: '智能工具',
      //     children: ['NLP文本分析', '可视化分析推演系统', '智慧新搜索', '多维解析', '数据魔方', '统一时间服务', '系统协同工具', '智能识别', '知识图谱', '数据可视化服务', '流程表单服务'],
      //     icon: ['wbfx', 'kshfxtyxt', 'zhxss', 'dwjx', 'sjmf', 'tysjfw', 'xtxtgj', 'znsb', 'zstp', 'sjkshfw', 'lcbdfw']
      //   },
      //   {
      //     name: '模型工具',
      //     children: ['模型管理', '智能标签'],
      //     icon: ['mxgl', 'znbq']
      //   },
      //   {
      //     name: '时空信息服务',
      //     children: ['三维数据加载', '三维数据出图', '三维特效模拟', '标准地理要素服务', '标准影像数据服务', '标准矢量瓦片服务', '三维地形分析', '标准地形数据服务', '标准三维模型服务', '用户角色管理', '用户权限管理', '三维底层渲染', '标准倾斜影像服务', 'OGCWMTS服务', 'OGCWFS服务', 'OGCWMS服务', '全景地理信息服务', '室内外一体化'],
      //     icon: ['swsjjz', 'swsjct', 'swtxmn', 'bzdlys', 'bzyxsj', 'bzslwp', 'swdxfx', 'bzdxsj', 'bzswmx', 'yhjsgl', 'yhqxgl', 'swdcxr', 'bzqxyx', 'wmts', 'wfs', 'wms', 'qjdlxx', 'snwyth']
      //   },
      //   {
      //     name: '认证服务',
      //     children: ['统一用户服务', '单点登录服务', '用户信息认证', '组织机构认证', '统一权限认证'],
      //     icon: ['tyyhfw', 'dddlfw', 'yhxxrz', 'zzjgrz', 'tyqxrz']
      //   },
      //   {
      //     name: '离线计算服务',
      //     children: ['数据装载', '计算模型框架', '实时流写入'],
      //     icon: ['sjzz', 'jsmxkj', 'sslxr']
      //   },
      //   {
      //     name: '流计算服务',
      //     children: ['加入处理引擎', '流计算开发', '辅助服务'],
      //     icon: ['jrclyq', 'ljskf', 'fzfw']
      //   },
      //   {
      //     name: '全息档案',
      //     children: ['人员档案', '车辆档案', '企业档案', '店铺档案', '事件档案', '档案自定义', '在线发布', '档案维护'],
      //     icon: ['ryda', 'clda', 'qyda', 'dpda', 'sjda', 'dazdy', 'zxfb', 'dawh']
      //   },
      //   {
      //     name: '中间件服务',
      //     children: ['消息队列MQ', '分布式应用开发服务', 'API网关'],
      //     icon: ['xxdl', 'fbsyykf', 'apiwg']
      //   },
      //   {
      //     name: '平台日志服务',
      //     children: ['系统日志', '用户日志', '异常日志', '操作日志'],
      //     icon: ['xtrz', 'yhrz', 'ycrz', 'czrz']
      //   },
      //   {
      //     name: '数据分发服务',
      //     children: ['一站式分发处理', '分发订阅', '数据归档'],
      //     icon: ['yzsff', 'ffdy', 'sjgd']
      //   }
      // ]
      let dataArr = [
        {
          name: '智能工具',
          children: ['NLP文本分析', '可视化分析推演系统', '智慧新搜索', '多维解析'],
          icon: ['wbfx', 'kshfxtyxt', 'zhxss', 'dwjx', 'sjmf', 'tysjfw', 'xtxtgj', 'znsb', 'zstp', 'sjkshfw', 'lcbdfw']
        },
        {
          name: '模型工具',
          children: ['模型管理', '智能标签'],
          icon: ['mxgl', 'znbq']
        },
        {
          name: '模型工具',
          children: ['模型管理', '智能标签'],
          icon: ['mxgl', 'znbq']
        },
        {
          name: '模型工具',
          children: ['模型管理', '智能标签'],
          icon: ['mxgl', 'znbq']
        }
      ]
      let list = []
      let id = 1
      dataArr.forEach((e) => {
        let obj = {
          name: e.name,
          id: id++,
          lv: 0,
          style: {},
          children: []
        }
        obj.children = setChildren(e.children, e.icon, obj.id)
        list.push(obj)
      })
      this.list = list
      // this.list = this.list.concat([])
      // this.$refs.pubuliu.setPosition()
      function setChildren (item, icon, pid) {
        let arr = []
        item.forEach((e, i) => {
          let obj = {
            name: e,
            id: id++,
            pid: pid,
            lv: 1,
            icon: 'jczj-icon-' + icon[i],
            url: 'https://www.baidu.com'
          }
          arr.push(obj)
        })
        return arr
      }
      // let list = [
      //   {
      //     name: '智能工具',
      //     id: 1,
      //     lv: 0,
      //     style: {},
      //     children: [
      //       {
      //         name: 'NLP文本分析',
      //         id: 2,
      //         pid: 1,
      //         lv: 1,
      //         icon: 'jczj-icon-apiwg'
      //       }
      //     ]
      //   }
      // ]
    },
    formatSidebarToList () {
      let currentMenuList = this.sidebarMenuItem.children
      let lv = 0
      if (currentMenuList) {
        this.list = this.addMenu(currentMenuList, lv)
      }
    },
    addMenu (arr, lv) {
      // {
      //     name: '二级导航名',
      //     id: 1,
      //     style: {},
      //     children: [
      //       {
      //         name: '三级导航名2',
      //         id: 2,
      //         pid: 1,
      //         lv: 1,
      //         icon: 'iconName'
      //       },
      let list = []
      let iconArr = this.iconArr
      arr.forEach((e) => {
        if (!e.noMenu) {
          let url = e.path ? ('/' + e.path) : ''
          if (!e.url && lv === 0) {
            url = ''
          }
          let obj = {
            ...e,
            lv: lv,
            id: e.UUID,
            pid: e.parentUUID,
            url: url,
            style: {},
            icon: iconArr[this.iconIndex++]
          }
          if (this.iconIndex === iconArr.length) {
            this.iconIndex = 0
          }
          if (e.children && e.children.length) {
            obj.children = this.addMenu(e.children, (lv + 1))
          }
          list.push(obj)
        }
      })
      return list
    },
    FindMenu (str, cb) {
      let itemArr = this.treeArr.filter((e) => {
        return e.name.indexOf(str) > -1
      })
      console.log(itemArr)
      this.currentSearchItems = itemArr
      cb(itemArr)
    },
    clearSea () {
      // console.log(this.$refs.autocomplete)
      this.keyValue = ''
      this.currentSearchItems.forEach((e) => {
        let root = this.findParent(e)
        window.$('#root' + root.id).removeClass('onLight')
      })
      this.currentSearchItems = []
      this.$refs.autocomplete.getData()
    },
    searchItemsLight () {
      this.currentSearchItems.forEach((e) => {
        let root = this.findParent(e)
        window.$('#root' + root.id).addClass('onLight')
      })
    },
    setSearchBreadLight () {
      let root = this.searchBreadList[0]
      let jqRoot = window.$('#root' + root.id)
      jqRoot.addClass('onLight')
    },
    removeSearchBreadLight () {
      let root = this.searchBreadList[0]
      let jqRoot = window.$('#root' + root.id)
      jqRoot.removeClass('onLight')
    },
    gotoMenuTop (item) {
      let rootParent = this.findParent(item)
      this.searchBreadList = this.findParentChain(item)
      this.setSearchBreadLight()
      // let rootItem = document.querySelector('#root' + rootParent.id)
      let jqRoot = window.$('#root' + rootParent.id).parent()
      let top = jqRoot.position().top
      window.$('.bc-wraper').animate({scrollTop: top}, 300)
    },
    setTreeToArr () {
      this.flatData(this.list)
      // this.treeArr = this.treeArr.map((e) => {
      //   return cloneDeep(e)
      // })
      this.treeArr.forEach((e) => {
        this.treeObj[e.id] = e
      })
      // console.log(this.treeObj)
      // console.log(this.findParent(this.treeArr[2]))
    },
    findParent (item) {
      // console.log(item.id)
      let parent = this.treeObj[item.pid]
      if (parent) {
        return this.findParent(parent)
      } else {
        return item
      }
    },
    findParentChain (item) {
      // console.log(item.id)
      let arr = []
      let parent = this.treeObj[item.pid]
      if (parent) {
        arr = this.findParentChain(parent).concat([item])
      } else {
        arr.unshift(item)
      }
      return arr
    },
    flatData (arr) {
      arr.forEach((e, i) => {
        // let item = Object.assign({}, e)
        this.treeArr.push(e)
        if (e.children && e.children.length > 0) {
          this.flatData(e.children)
        }
        // item.children = ''
        // delete item.children
        // item = cloneDeep(e)
      })
    }
  }
}
</script>
