<template>
  <div class="divBox">
    <el-card class="box-card">
      <div v-hasPermi="['platform:menu:add']" slot="header">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAddorEdit(null,'add')">新增菜单</el-button>
      </div>
      <el-table v-loading="listLoading" :data="menuList" row-key="id"
        :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }">
        <el-table-column prop="name" label="菜单名称" show-overflow-tooltip width="450"></el-table-column>
        <el-table-column prop="sort" width="180">
          <template slot="header">
            <span>排序</span>
            <img class="explain" src="@/assets/maintain/jieshi.png" @mouseover="showExplain=true" @mouseleave="showExplain=false">
          </template>
        </el-table-column>
        <el-table-column label="关联商品分类">
          <template slot-scope="scope">
            <span v-if="scope.row.childList.length===0">{{scope.row.categoryName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.level<3" v-hasPermi="['platform:menu:add']" size="small" type="text" @click="handleAddorEdit(scope.row,'add')">添加子菜单</el-button>
            <el-button v-hasPermi="['platform:menu:update', 'platform:admin:role:info']" size="small" type="text" @click="handleAddorEdit(scope.row,'edit')">编辑</el-button>
            <el-button v-hasPermi="['platform:menu:delete']" size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改菜单对话框 -->
      <div v-if="showAddMallMenuDialog">
        <addMallMenuDialog ref="amdRef" @refreshList="getList" @cancel="showAddMallMenuDialog=false"></addMallMenuDialog>
      </div>
      <div v-if="showExplain" class="explain-text">该排序为正序规则，一级菜单排序为菜单栏排序，一级对应里面的二/三级菜单排序各自独立</div>
    </el-card>
  </div>
</template>

<script>
  // +---------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +---------------------------------------------------------------------
  // | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
  // +---------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +---------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +---------------------------------------------------------------------
  import { getGoodsMenuListApi, deleteMenuApi } from '@/api/product';
  import { checkPermi } from '@/utils/permission'; // 权限判断函数
  import addMallMenuDialog from './component/addMallMenuDialog';

  export default {
    name: 'mallMenuBar',
    components: { addMallMenuDialog },
    data() {
      return {
        listLoading: false,
        showAddMallMenuDialog: false,
        menuList: [], // 菜单表格树数据
        showExplain: false
      };
    },
    mounted() {
      if (checkPermi(['platform:admin:role:list'])) {
        this.getList();
      }
    },

    methods: {
      checkPermi,
      // 查询菜单列表
      getList() {
        this.listLoading = true;
        getGoodsMenuListApi(0).then((res) => {
          this.menuList = res;
          this.listLoading = false;
        }).catch(() => {
          this.listLoading = false;
        });
      },
      handleAddorEdit(row, type) {
        this.showAddMallMenuDialog = true;
        this.$nextTick(() => {
          if (row) {
            if (type === 'add') {
              this.$refs.amdRef.openDialog({
                id: '',
                categoryId: '',
                categoryName: '',
                level: row.level + 1,
                name: '',
                pid: row.id,
                pname: row.name,
                sort: 0,
                type: 0,
                isHaveChildren: true
              });
            } else if (type === 'edit') {
              if (row.level === 1) {
                this.$refs.amdRef.openDialog({
                  id: row.id,
                  categoryId: row.categoryId,
                  categoryName: row.categoryName,
                  level: row.level,
                  name: row.name,
                  pid: row.pid,
                  pname: '',
                  sort: row.sort,
                  type: row.type,
                  isHaveChildren: row.childList.length === 0 ? true : false
                });
              } else if (row.level === 2) {
                let index = this.menuList.findIndex((item) => {
                  return item.id === row.pid
                })
                if (index !== -1) {
                  this.$refs.amdRef.openDialog({
                    id: row.id,
                    categoryId: row.categoryId,
                    categoryName: row.categoryName,
                    level: row.level,
                    name: row.name,
                    pid: row.pid,
                    pname: this.menuList[index].name,
                    sort: row.sort,
                    type: row.type,
                    isHaveChildren: row.childList.length === 0 ? true : false
                  });
                }
              } else if (row.level === 3) {
                this.menuList.forEach((item) => {
                  let index = item.childList.findIndex((items) => {
                    return items.id === row.pid
                  })
                  if (index !== -1) {
                    this.$refs.amdRef.openDialog({
                      id: row.id,
                      categoryId: row.categoryId,
                      categoryName: row.categoryName,
                      level: row.level,
                      name: row.name,
                      pid: row.pid,
                      pname: item.childList[index].name,
                      sort: row.sort,
                      type: row.type,
                      isHaveChildren: row.childList.length === 0 ? true : false
                    });
                  }
                })
              }
            }
          } else {
            this.$refs.amdRef.openDialog(row);
          }
        });
      },
      // 删除按钮操作
      handleDelete(row) {
        let str = ''
        if (row.level === 1) {
          str = '确定删除该一级菜单的配置吗？删除后不可撤回，请谨慎操作！'
        } else if (row.level === 2) {
          let index = this.menuList.findIndex((item) => {
            return item.id === row.pid
          })
          if (index !== -1) {
            if (this.menuList[index].childList.length === 1) {
              str = '确定删除该二级菜单的配置吗？删除后请及时将对应的一级菜单做商品分类关联，请知悉！'
            } else {
              str = '确定删除该二级菜单的配置吗？删除后不可撤回，请谨慎操作！'
            }
          }
        } else if (row.level === 3) {
          this.menuList.forEach((item) => {
            let index = item.childList.findIndex((items) => {
              return items.id === row.pid
            })
            if (index !== -1) {
              if (item.childList[index].childList.length === 1) {
                str = '确定删除该三级菜单的配置吗？删除后请及时将对应的一级菜单做商品分类关联，请知悉！'
              } else {
                str = '确定删除该三级菜单的配置吗？删除后不可撤回，请谨慎操作！'
              }
            }
          })
        }
        this.$confirm(str, '删除提醒', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMenuApi(row.id).then(() => {
            this.getList();
            this.$message.success('删除成功!');
          });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .explain {
    cursor: pointer;
    width: 15px;
    height: 15px;
  }

  .explain-text {
    position: absolute;
    top: 236px;
    left: 530px;
    padding: 10px;
    width: 250px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
</style>
