<template>
  <el-row>
    <el-col>
      <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-row {
    height: 100%;

    .el-col {
      height: 100%;

      .el-card {
        height: 100%;

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

        /* 内部有个额外的 div */
        ::v-deep(.el-card__body) {
          max-height: 100%;
          display: flex;
          flex-direction: column;
        }

        /* 当前页面的标签样式 */
        .el-card__body {
          padding-left: 15px !important;
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          justify-content: flex-start;
          gap: 20px;
          max-height: 100%;
          overflow-y: auto;

          .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>
