<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card shadow="never">
        <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"
          draggable overflow>
          <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>
    </el-col>
  </el-row>
</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 {
    margin-top: 20px;
    width: 100%;

    .el-card__header {
      .custom {
        float: right;
        padding: 3px 0;
      }
    }

    .el-card__body {
      padding-left: 15px !important;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 20px;

      .item {
        display: inline-block;
        /* margin: 0 20px 20px 0; */
      }
    }

    .none {
      font-size: 14px;

      a {
        color: #337ab7;
      }
    }
  }


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

    .el-transfer {
      display: flex;
      height: 100%;
      gap: 50px;
      width: 100%;

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

      .el-transfer-panel {
        flex: 1;
        display: flex;
        flex-direction: column;

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

        .el-transfer-panel__body {
          display: flex;
          flex-direction: column;
          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>
