<template>
  <div :class="['service-popup-list']">
    <div class="search-area">
      <div class="search-area-top">
        <el-input
          placeholder="请输入菜单名称"
          v-model="searchVal"
          :clearable="true"
          suffix-icon="el-icon-search"
          size="mediums"
        >
        </el-input>
        <i class="el-icon-close popup-close-icon" @click="closePopup" />
      </div>
    </div>
    <div v-masonry class="menu-area" column-width=".menu-item" gutter="32"
         transition-duration="0.2s">
      <div v-masonry-tile class="menu-box" v-for="(item,index) in filterMenuArr" :key="index">
        <span class="menu-box-title" v-html="brightenKeyword(item.name,searchVal)"></span>
        <div class="menu-box-content">
          <div :title="_item.name"
               :class="['menu-item', routerPath === _item.routerPath ? 'menu-item-active' : '']"
               v-for="_item in item.children" :key="_item.id"
               @click="menuItemClick(_item)">
            <span class="menu-name" v-html="brightenKeyword(_item.name,searchVal)"></span>
            <i
              :class="[
                'collect-icon',
                swiftMenusData.some(i => i.alias === _item.alias) ? 'collect' : 'un-collect'
              ]"
              :title="`${swiftMenusData.some(i => i.alias === _item.alias) ? '取消' : ''}收藏`"
              @click.stop="collect(_item)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import lodash from 'lodash'
import pubSub from 'pubsub-js'

export default {
  name: 'ServicePopupList',
  props: {
    // 是否展示弹层列表
    isShowPopupList: {
      default: false,
      type: Boolean
    },
    // 一级菜单别名
    currentMenu: {
      default: '',
      type: String
    },
    // 当前路由地址
    routerPath: {
      default: '',
      type: String
    },
    // 收藏的菜单
    swiftMenusData: {
      default: _ => [],
      type: Array
    }
  },
  data() {
    return {
      searchVal: '',
      pubDirectory: null // 目录点击pubSub实例
    }
  },
  watch: {
    isShowPopupList(val) {
      if (val) {
        this.open()
      } else {
        this.close()
      }
    }
  },
  computed: {
    ...mapState({
      // 重构菜单信息
      businessMenu(state) {
        return state.menu.frontMenus.find(i => i.alias === 'normal')?.children || []
      }
    }),
    currentMenuArr() {
      return this.businessMenu.find(i => i.alias === this.currentMenu)?.children.filter(i => {
        return Array.isArray(i.children) && i.children.length
      }) || []
    },
    filterMenuArr() {
      if (!this.searchVal) return this.currentMenuArr
      return lodash.cloneDeep(this.currentMenuArr).filter(item => {
        if (item.name.includes(this.searchVal.trim())) {
          return true
        } else {
          item.children = item.children.filter(i => {
            return i.name.includes(this.searchVal.trim())
          })
          return item.children.length
        }
      })
    }
  },
  mounted() {
    //监听是否点击目录（二级菜单）
    this.pubDirectory = pubSub.subscribe('directory-click', (_, state) => {
      this.$nextTick(_ => {
        setTimeout(_ => this.searchVal = state.name, 100)
      })
    })
  },
  methods: {
    // 菜单弹层打开
    open() {
      this.searchVal = ''
    },

    // 菜单弹层关闭
    close() {
    },

    // 关闭弹层调用
    closePopup() {
      this.searchVal = ''
      this.$emit('close-popup')
    },

    // 菜单点击
    menuItemClick(item) {
      this.$router.push(item.routerPath)
      this.closePopup()
    },

    brightenKeyword(val, keyword) {
      const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').trim()
      if (!escapedKeyword) return val

      // 使用正则表达式构造一个动态的查找模式，这里不再需要判断 keyword 包含 val 的情况
      const regex = new RegExp(escapedKeyword, 'gi')

      // 直接高亮所有匹配的keyword
      return val.replace(regex, match => `<span style="color: #f56c6c">${match}</span>`)
    },

    // 收藏功能
    collect(item) {
      this.$emit('change-collect', item)
    }
  },
  beforeDestroy() {
    pubSub.unsubscribe(this.pubDirectory)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

$font-color: $--menu-text;
$icon-color: $--menu-text;
$icon-color-hover: $--system-hover-active-text;

.service-popup-list {
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  background-color: $--system-module-color1;

  .search-area {
    width: 100%;


    .search-area-top {
      width: 100%;
      display: flex;
      align-items: center;
      column-gap: 200px;
      user-select: none;
      padding-left: 8px;
      box-sizing: border-box;

      ::v-deep .el-input {
        .el-input__inner {
          font-size: 14px;

          &::placeholder {
            font-size: 14px;
          }
        }

        .el-input__icon {
          font-size: 18px;

          &:hover {
            color: $icon-color-hover;
          }
        }
      }

      .popup-close-icon {
        color: $--color-white;
        cursor: pointer;

        &::before {
          font-size: 30px !important;
        }

        &:hover {
          color: $icon-color-hover;
        }
      }
    }
  }

  .menu-area {
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
      border-radius: 6px !important;
    }


    .menu-box {
      width: calc((100% - 96PX) / 4 - 5px);
      box-sizing: border-box;
      padding: 0 0 40px 0;
      display: flex;
      flex-direction: column;
      row-gap: 16px;

      .menu-box-title {
        margin: 0 8px;
        font-size: 16px;
        font-weight: 700;
        color: mix($--color-white, $--system-hover-active-text, 60%);
        font-family: Microsoft YaHei, serif;
        box-sizing: border-box;
        user-select: none;

        ::v-deep span {
          font-size: 16px;
        }
      }

      .menu-box-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: 5px;
        box-sizing: border-box;

        .menu-item {
          width: 100%;
          height: 34px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          transition: background-size 0.2s, background-color 0.2s, border-radius 0.2s;
          padding: 0 0 0 8px;
          box-sizing: border-box;
          user-select: none;
          background: linear-gradient(to right, $icon-color-hover, $icon-color-hover) no-repeat calc(100% - 3px) bottom;
          background-size: 0 1px;

          &.menu-item-active {
            background-color: $--system-box-color3;
            border-radius: 2px;
            background-size: 0 0 !important;

            .menu-name {
              color: $icon-color-hover;
            }
          }

          &:hover {
            background-position: 3px bottom;
            background-size: calc(100% - 6px) 1px;

            .menu-name {
              color: $icon-color-hover;
            }

            .collect-icon {
              opacity: 1;
            }
          }

          .menu-name {
            font-size: 14px;
            font-family: Microsoft YaHei, serif;
            font-weight: 400;
            color: $font-color;
            transition: all 0.2s;

            ::v-deep span {
              font-size: 14px;
            }
          }

          .collect-icon {
            width: 34px;
            height: 34px;
            opacity: 0;
            background: url("~@/assets/img/publicLayout/collect1.png") no-repeat 50% 50%;
            transition: all 0.1s;

            &.collect {
              background: url("~@/assets/img/publicLayout/collect1.png") no-repeat 50% 50%;
              background-size: 45% 45%;
              opacity: 1;
            }

            &.un-collect {
              background: url("~@/assets/img/publicLayout/cancel-favorite-icon1.png") no-repeat 50% 50%;
              background-size: 45% 45%;
            }
          }
        }
      }
    }
  }
}


</style>
