<template>
  <el-card>
    <div slot="header"
      class="el-card__header">
      <span>
        常用菜单
      </span>
      <el-button class="custom"
        type="primary"
        link
        @click="visible = true">
        自定义
      </el-button>
    </div>
    <div class="el-card__body">
      <div v-for="o in commonMenuList"
        class="item">
        <el-button type="primary"
          plain
          @click="$router.push(o.path)">
          {{ o.label }}
        </el-button>
      </div>
      <div v-if="commonMenuList.length === 0">
        <p class="none">
          暂无常用菜单，立即
          <a @click.prevent="visible = true">
            自定义
          </a>
        </p>
      </div>
    </div>
    <el-dialog title="编辑常用菜单"
      v-model="visible">
      <el-transfer ref="myTransfer"
        v-model="selectList"
        :data="menuList"
        filterable
        filter-placeholder="菜单名称"
        @left-check-change="leftChange"
        @right-check-change="rightChange"></el-transfer>
    </el-dialog>
  </el-card>
</template>

<script setup>
import usePermissionStore from '@/store/modules/permission'
import { routesFlat } from '@/utils'
const { proxy } = getCurrentInstance();

const visible = ref(false)

// 左侧菜单
const menuList = computed(() => {
  return routesFlat(usePermissionStore().routes).map(obj => {
    return {
      key: obj.path,
      path: obj.path,
      label: obj.title.join('/')
    }
  })
})
// 右侧菜单
const selectList = ref(proxy.$cache.local.getJSONArray('common_ment'))
// 展示常用菜单
const commonMenuList = computed(() => menuList.value.filter((o) => {
  return selectList.value.find(path => o.key === path)
}))

// 监听选中菜单改变
watch(selectList, (val) => {
  proxy.$cache.local.setJSON('common_ment', val)
}, {
  deep: true
})

const leftChange = (val) => {
  selectList.value.push(...val)
}
const rightChange = (val) => {
  selectList.value.splice(selectList.value.findIndex(o => o === val[0]), 1)
}
</script>

<style scoped
  lang="scss">
  .el-card__header {
    .custom {
      float: right;
      padding: 3px 0;
    }
  }

  .el-card__body {
    padding-left: 15px !important;

    .item {
      display: inline-block;
      margin-right: 20px;
    }
  }

  .none {
    font-size: 14px;

    a {
      color: #337ab7;
    }
  }

  /* 穿梭框样式重写 */
  ::v-deep(.el-dialog__body) {
    display: flex;
    justify-content: center;

    /* 隐藏头部列表数量统计 */
    .el-transfer-panel__header {
      display: none;
    }

    .el-transfer {
      display: flex;
      align-items: center;
      gap: 50px;
      width: 100%;

      /* 隐藏中间按钮 */
      .el-transfer__buttons {
        display: none;
      }

      .el-transfer-panel {
        flex: 1;

        .el-transfer-panel__body {
          height: 500px;
          display: flex;
          flex-direction: column;

          .el-transfer-panel__list {
            flex: 1;
          }
        }
      }

      .el-transfer-panel:nth-last-of-type(1) {
        .el-checkbox__inner {
          background-color: #409eff;
        }

        .el-checkbox__inner::after {
          transform: rotate(45deg) scaleY(1);
          height: 6px;
          width: 3px;
          left: 4px;
          box-sizing: content-box;
          content: "";
          border: 1px solid #fff;
          border-left: 0;
          border-top: 0;
          position: absolute;
          top: 1px;
          transition: transform .15s ease-in .05s;
          transform-origin: center;
        }
      }

      .el-transfer-panel {
        width: 100%;
      }
    }
  }

  /* 小屏幕样式 */
  @media (max-width: 768px) {
    ::v-deep(.el-dialog) {
      width: 100%;
    }
    ::v-deep(.el-transfer){
      flex-direction: column;
    }
  }
</style>
