<template>
  <div class="app-container">
    <!-- 顶部搜索 -->
    <el-row>
      <search-fold-form ref="searchForm" :model="searchForm" @search="searchClick">
        <!-- <el-form-item label="菜单编号：" prop="name">
          <el-input
            v-model.trim="searchForm.code"
            placeholder="请输入菜单编号"
            clearable
            size="small"
          />
        </el-form-item> -->
        <el-form-item label="菜单名称：" prop="name">
          <el-input
            v-model.trim="searchForm.name"
            placeholder="请输入菜单名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="版本：" prop="versionName">
          <el-input
            v-model.trim="searchForm.versionName"
            placeholder="请输入版本"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="菜单类型：" prop="type">
          <el-select
            v-model.trim="searchForm.type"
            placeholder="请选择菜单类型"
            clearable
            size="small"
          >
            <el-option value="" label="全部" />
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="系统类型：" prop="platform" v-if="page=='kehu'">
          <el-select
            v-model.trim="searchForm.platform"
            placeholder="请选择系统类型"
            clearable
            size="small"
          >
            <el-option
              v-for="item in systemType"
              :key="item.mycode"
              :label="item.myname"
              :value="item.mycode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select
            v-model.trim="searchForm.status"
            placeholder="请选择菜单状态"
            clearable
            size="small"
          >
            <el-option value="" label="全部" />
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="searchClick">查询</el-button>
          <el-button :loading="loading" @click="resetClick">重置</el-button>
        </el-form-item>
      </search-fold-form>
    </el-row>

    <!-- 新增按钮 -->
    <el-row class="mb-20">
      <span class="list-title">菜单列表</span>
      <el-button :loading="loading" @click="handleexpand(!isExpand)">
        <span v-if="isExpand">全部收起</span>
        <span v-else>全部展开</span>
      </el-button>
      <el-button :loading="loading" type="primary" v-if="page=='kehu'?filterButton('kehumenu_add'):filterButton('menu_add')" @click="addMenu">新增</el-button>
      <el-button v-if="page=='kehu'?filterButton('kehumenu_export'):filterButton('menu_export')" @click="handleExport">导出</el-button>
      <el-button v-if="page=='kehu'?filterButton('kehumenu_import'):filterButton('menu_import')" @click="handleLeadIn">导入</el-button>
    </el-row>
    <!-- 内容展示区 -->
    <elm-table
      ref="menuTable"
      :table-data="listCopy"
      :colum-obj="columObj"
      :loading="loading"
      :max-show="0"
      v-bind="$attrs"
      :tree-props="{children: 'children',hasChildren:'isHavechildren'}"
      :row-class-name="tableRowClassName"
      :default-expand-all="isExpand"
      v-on="$listeners"
      @rowOperation="rowOperation"
      column-type="1"
    >
      <template slot="icon" slot-scope="{row}">
        <svg-icon v-if="row.icon" :icon-class="row.icon" />
        <span v-else>--</span>
      </template>
      <template slot="operation" slot-scope="{row,index}">
        <el-button v-if="page=='kehu'?filterButton('kehumenu_edit'):filterButton('menu_edit')" type="text" @click="rowOperation(row, index, 'edit')">编辑</el-button>
        <el-button v-if="page=='kehu'?filterButton('kehumenu_top'):filterButton('menu_top')" type="text" @click="rowOperation(row, index, 'up')">上移</el-button>
        <el-button v-if="page=='kehu'?filterButton('kehumenu_bot'):filterButton('menu_bot')" type="text" @click="rowOperation(row, index, 'down')">下移</el-button>
        <el-button v-if="page=='kehu'?filterButton('kehumenu_status'):filterButton('menu_status')"  type="text" @click="rowOperation(row, index, 'status')"> {{ row.status == 1 ? '停用' : '启用' }}</el-button>
        <el-button v-if="page=='kehu'?filterButton('kehumenu_del'):filterButton('menu_del')"  type="text" @click="rowOperation(row, index, 'del')">删除</el-button>
        <!-- <el-button v-if="filterButton('roleManage_edit')" type="text" @click="handleDelete(row)">删除</el-button> -->
      </template>
    </elm-table>
    <!-- 新增/编辑弹出框 -->
    <el-dialog
      :title="dialogType=='add'?'新增菜单':'编辑菜单'"
      width="580px"
      :visible="menuDialogShow"
      :close-on-click-modal="false"
      class="formDialog"
      @close="formClose"
    >
      <el-form ref="form" :model="form" label-width="140px" label-suffix="：" :rules="rules">
        <!-- <el-form-item label="系统类型" prop="systemType">
          <el-select ref="systemType" v-model.trim="form.systemType" filterable placeholder="请选择系统类型" @change="systemTypeChange(form.systemType)">
            <el-option
              v-for="item in systemType"
              :key="item.id"
              :label="item.myname"
              :value="item.mycode"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="上级节点" prop="parentId">
          <el-select
            ref="parentId"
            v-model.trim="form.parentId"
            placeholder="请选择上级节点"
            :filter-method="filterCloud"
            filterable
            @focus="filterCloud()"
          >
            <el-option
              hidden
              :label="parentSelect.parentSelectName"
              :value="parentSelect.parentSelectId"
              style="height: auto"
            />
            <el-tree
              ref="typeTree"
              :data="cascaderListSelect"
              empty-text="暂无数据"
              :props="{children:'children', label:'name', value:'id'}"
              accordion
              node-key="id"
              :filter-node-method="filterNode"
              :check-on-click-node="true"
              @node-click="handleNodeClick"
            />
          </el-select>
        </el-form-item>
         <el-form-item label="系统类型" prop="platform" v-if="page=='kehu'">
          <el-select ref="platform" @change="changeplatform" v-model.trim="form.platform" :disabled="dialogType=='edit'" placeholder="请选择系统类型">
            <el-option
              v-for="item in systemType"
              :key="item.mycode"
              :label="item.myname"
              :value="item.mycode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" prop="type">
          <el-select ref="type" v-model.trim="form.type" placeholder="请选择菜单类型">
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item prop="url">
          <el-input v-model.trim="form.url" placeholder="请输入菜单内容" />
          <template slot="label">
            菜单内容
            <el-tooltip effect="light" placement="right">
              <i class="el-icon-question" />
              <div slot="content">
                用来输入前端所需的按钮对应的标识，及页面对应的路径
              </div>
            </el-tooltip>：
          </template>
        </el-form-item>
        <el-form-item label="版本" prop="versionName">
          <el-input v-model.trim="form.versionName" maxlength="20" placeholder="请输入版本" />
        </el-form-item>
        <el-form-item label="接口路径" prop="codeUrl">
          <el-input v-model.trim="form.codeUrl" maxlength="200" placeholder="请输入接口路径" />
        </el-form-item>
        <el-form-item label="接口方法" prop="codeMethod">
          <el-select ref="type" v-model.trim="form.codeMethod" placeholder="请选择菜单类型">
            <el-option
              v-for="item in method"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
          <el-form-item label="角色" prop="roleIds">
          <el-select multiple  v-model.trim="form.roleIds" placeholder="请选择角色">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-popover
            placement="bottom-start"
            width="800"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect ref="iconSelect" clearable @selected="selected" />
            <el-input
              slot="reference"
              v-model.trim="form.icon"
              :class="{'iconInput': form.icon}"
              placeholder="请选择菜单图标"
              clearable
            >
              <svg-icon
                v-if="form.icon"
                slot="prefix"
                :icon-class="form.icon"
                class="icon"
              />
            </el-input>
          </el-popover>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formClose">取消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="submit"
        >确定</el-button>
      </span>
    </el-dialog>

    <!-- 导入对话框 -->
    <exportBox
      :loading="importloading"
      :disimport="disimport"
      :open-lead-in.sync="openLeadIn"
      :on-change-func="onChange"
      :import-link-func="userImportTemplate"
      :notemplate="false"
      @importLink="importLink"
      @submitFormLeadIn="submitFormLeadIn"
      @importResult="importResult"
      accept=".xlsx, .xls"
      isExcel
      fileSize="1"
    />
  </div>
</template>
<script>
import lodash from 'lodash'
import SearchFoldForm from '@/components/SearchFoldForm/index.vue'
import {
  menuDetail,
  getMenuList,
  getMenuTree,
  addOneMenu,
  updateOneMenu,
  // getOneMenu,
  disableMenu,
  enable,
  // getAllParentMenu,
  // getAllViewRole,
  delOneMenu,
  down,
  up,
  // moveMenuSort,
  importMenu,
   exportMenu
} from '@/apiV2/menuManage'
import {

  roleList
} from '@/apiV2/rolemanage'
import {getIntDictByTypeCode} from '@/apiV2/common'
import IconSelect from '@/components/IconSelect'
import exportBox from '@/components/exportbox'
import ElmTable from '@/components/ElmTable/index.vue'
import {genNameValidator, genUserNameValidator} from '@/utils/validator'

export default {
  name: '菜单管理',
  components: { IconSelect, exportBox, ElmTable, SearchFoldForm },
  inject: ['reload'],
  props: {
    customer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const systemType = [
        {
          id: 1,
          name: '总部'
        },
        {
          id: 2,
          name: '客户端'
        },
        {
          id: 3,
          name: '商户端'
        },
        // {
        //   id: '4',
        //   name: '金服'
        // },
        // {
        //   id: '5',
        //   name: '云坐席'
        // },
        // {
        //   id: '8',
        //   name: '物联网'
        // }
      ]
    return {
      //1总部端 2客户端 3商户端 4金服 5云坐席 8物联网
      platform: 1,
      list: [],
      listCopy: [],
      // 是否默认展开
      isExpand: false,
      // 级联选择器数据存储
      cascaderList: [],
      cascaderListSelect: [],
      // 用来存储所有菜单给新增用
      // cascaderListSave: [],
      name: '',
      loading: false,
      menuDialogShow: false,
      form: {
        parentId: '',
        name: '',
        type: '',
        icon: '',
        url: '',
        platform:1,
        codeMethod:"",
        versionName:""
      },
      // 可视角色
      viewRole: [],
      viewRoleSelect: [],
      // 存储当前编辑的id
      editId: '',
      roles: [],
      // 导入
      openLeadIn: false,
      importloading: false,
      disimport: false,
      fileInfo: null,
      // upload_name: '',
      fileData: '',
      // 新增、编辑表单验证
      rules: {
        platform: [
          { required: true, message: '请选择系统类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { validator: genNameValidator([2, 50]), trigger: 'blur' }
        ],
        versionName: [{ validator: genUserNameValidator([0, 20], '.'), trigger: 'blur' }],
        type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
        url: [
          { required: true, message: '菜单内容不能为空', trigger: 'blur' },
          { min: 1, max: 200, message: '仅支持1-200个字符', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择上级节点', trigger: 'change' }
        ],
        roles: [
          { required: true, message: '请选择默认可视角色', trigger: 'change' }
        ]
      },
      searchForm: {
        // code:'',
        name: '',
        type: '',
        // systemType: '1',
        status: '',
        platform: 1,
        size:1000,
        versionName: ''
      },
      addFileList: [],
      addPicUrl: '',
      // 启用禁用
      status: '0',
      // 菜单状态List
      statusList: [
        {
          id: '0',
          name: '禁用'
        },
        {
          id: '1',
          name: '启用'
        }
      ],
      // 菜单类型
      type: [
        {
          id: 1,
          name: '页面'
        },
        {
          id: 2,
          name: '操作'
        }
      ],
      method:["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS","TRACE"],
      // 系统类型
      systemType: systemType,
      parentSelect: {
        parentSelectName: '',
        parentSelectId: ''
      },
      columObj: {
        lazy: 'true',
        columnData: [
          { text: true, prop: 'name', label: '菜单名称', minwidth: '180' },
          // { text: true, prop: 'code', label: '菜单编号', minwidth: '100' },
          { ownDefined: true, prop: 'type', label: '菜单类型', minwidth: '100', ownDefinedReturn: row => this.type[row.type - 1].name },
          { ownDefined: true, prop: 'systemType', label: '系统类型', minwidth: '100', ownDefinedReturn: row => (systemType.find(item=>item.id==row.platform)?.name) || '--' },
          { text: true, prop: 'url', label: '菜单内容', minwidth: '140' },
          { ownDefined: true, prop: 'versionName', label: '版本', minwidth: '140', ownDefinedReturn: row => row.versionName || '--' },
          { ownDefined: true, prop: 'parentName', label: '上级节点', minwidth: '140', ownDefinedReturn: row => row.parentId == 0 ? '--' : row.parentName },
           { ownSlot: true, prop: 'icon', label: '菜单图标', minwidth: '100' },
          // { ownDefined: true, prop: 'defaultPerssion', label: '默认权限', minwidth: '80', ownDefinedReturn: row => row.defaultPerssion ? '是' : '否' },
          { ownDefined: true, prop: 'status', label: '状态', minwidth: '60', ownClassName: row => row.status === 0 ? 'disabled' : '', ownDefinedReturn: row => row.status === 1 ? '启用' : row.status === 0 ? '禁用' : '--' },
          {
            ownSlot: true, prop: 'operation', label: '操作', minwidth: '200', fixed: 'right'
          }
        ]
      },
      roleList:[],
      page:"",
      defaultForm:{
        parentId: '',
        name: '',
        type: '',
        icon: '',
        url: '',
        versionName: '',
        platform:1,
        codeMethod:"",
        versionName:""
      }
    }
  },
  watch: {
    menuDialogShow(newValue) {
      if (newValue) {
        this.$nextTick(() => {
          const _this = this
          const ele = document.querySelector('.formDialog')
          ele.querySelector('.el-dialog__body').addEventListener('scroll', function() {
            _this.$refs.systemType.blur()
            _this.$refs.parentId.blur()
            _this.$refs.type.blur()
            _this.$refs.roles.blur()
          }, true)
        })
      }
    }
  },
  created() {
    this.page = this.$route.query.page //'kehu客户运营的菜单管理，否则则是系统管理'
    if (this.customer) this.page = 'kehu'
    if(this.page == 'kehu'){
      this.searchForm.platform = 2
      this.defaultForm.platform = 2
      this.form.platform = 2
      getIntDictByTypeCode("menuType").then(res=>{
        //去掉总部端
      this.systemType=res.data.filter(item=>item.mycode!='1')

      })
    }

    this.getList()
  },
  methods: {
    changeplatform(){
      roleList({platform:this.form.platform,size:1000}).then(res=>{
        this.roleList = res.data.records
      })
      this.getParentMenu()
      this.form.parentId=""

    },
    filterCloud(e) {
      this.$refs.typeTree.filter(e)
    },
    // 获取所有菜单
    getParentMenu() {
      getMenuTree({
        platform:this.form.platform,
        type:1
      }).then(res => {
        if(res.success){
           let obj={};
            obj.children = []
            obj.name = '作为一级菜单'
            obj.id = 0
            this.cascaderList = lodash.cloneDeep(res.data)
            this.cascaderListSelect=[obj,...this.cascaderList]
            // this.cascaderListSave = lodash.cloneDeep(res.data)
            console.log("this.cascaderListSelect",this.cascaderListSelect)

        }



      })
    },
    // 赋予css
    tableRowClassName(scope) {
      if (scope.row.level == 1 || scope.row.level == 3 || scope.row.level == 5) {
        return 'rowbg'
      }
    },
    // 选择图标 - start
    selected(name) {
      this.form.icon = name
    },
    changePic(file, fileList) {
      this.addPicUrl = ''
      if (fileList.length > 0) {
        this.addFileList = [fileList[fileList.length - 1]]
      }
      this.addPicUrl = file.url
    },
    // 选择图标 - end
    // 编辑
    async edit(row) {
      console.log(row)
      this.dialogType = 'edit'
      this.editId = row.id
      let res = await menuDetail(row.id)
      this.form = lodash.cloneDeep(res.data)
      this.changeplatform()
      if(row.parentId == 0){
        this.parentSelect.parentSelectId = row.parentId
        this.parentSelect.parentSelectName = '作为一级菜单'
      }else{
        this.parentSelect.parentSelectId = row.parentId
        this.parentSelect.parentSelectName = row.parentName

      }
      //上面的changeplatform会把parentId置为“”，所以重新赋值一遍
      this.form.parentId = row.parentId
      this.$set(this.form, 'icon', row.icon)
      this.menuDialogShow = true

    },
    submit() {
      // console.log('this.$storethis.$store', this.$store.dispatch('user/getInfo'))
      this.loading = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.dialogType == 'add') {
            addOneMenu(this.form).then(res => {
              if (res.success) {
                this.getList() // 刷新表单
                // this.getParentMenu()
                // this.$store.commit('user/SET_OPERATION')
                this.formClose()
              }
            })
          } else if (this.dialogType == 'edit') {
            updateOneMenu(this.form).then(res => {
              if (res.success) {
                this.getList() // 刷新表单
                // this.getParentMenu()
                this.formClose()
              }
            })
          }
        }
      })
      this.loading = false
    },
    // 获取列表数据
    async getList() {
      this.loading = true
      let res;
      // if(this.searchForm.status || this.searchForm.type || this.searchForm.name || this.searchForm.code || this.searchForm.versionName){
        res=await getMenuTree(this.searchForm)
      // }else{
      //   res=await getMenuTree({platform:this.searchForm.platform})
      // }
      if (res.success) {
        this.listCopy = lodash.cloneDeep(res.data)
        this.loading = false
      } else {
        this.loading = false
      }

    },
    /**
     * 初始化表格展示一级类目
     */
    handleFirstList() {
      const list = lodash.cloneDeep(this.listCopy)
      list.map(item => {
        item.isHavechildren = item.children.length > 0
        item.levelIdList = [item.id]
        delete item.children
        this.list.push(item)
      })
    },
    // 加载子节点
    loadChildren(row, treeNode, resolve) {
      // 层级关系备份
      const idCopy = JSON.parse(JSON.stringify(row.levelIdList))
      // 查找下一层数据
      let resolveArr = this.listCopy
      let id
      // eslint-disable-next-line
      while (id = row.levelIdList.shift()) {
        const tarItem = resolveArr.find(item => item.id === id)
        tarItem.loadedChildren = true
        resolveArr = tarItem.children
      }

      // 处理下一层数据的属性
      resolveArr = JSON.parse(JSON.stringify(resolveArr))
      resolveArr.forEach(item => {
        item.isHavechildren = item.children && item.children.length > 0
        item.children = null
        // 此处需要深拷贝，以防各个item的levelIdList混乱
        item.levelIdList = JSON.parse(JSON.stringify(idCopy))
        item.levelIdList.push(item.id)
      })

      // 标识已经加载子节点
      row.loadedChildren = true
      // 渲染子节点
      resolve(resolveArr)
    },
    // 关闭事件
    formClose() {
      this.menuDialogShow = false // 关闭新增弹框
      this.dialogType = 'add'
      this.editId = ''
      this.form = lodash.cloneDeep(this.defaultForm)
      this.parentSelect.parentSelectName = ''
      this.parentSelect.parentSelectId = ''
      this.loading = false
      this.$refs['form'].resetFields()
    },
    // 禁用按钮
    stateManage(row) {
      this.form = lodash.cloneDeep(row)
      if (row.status == 1) {
        this.statusText = '停用'
        this.form.status = '0'
      } else {
        this.statusText = '启用'
        this.form.status = '1'
      }
      var txt = `<p class="text-center">您确定要${this.statusText}【${row.name}】吗？</p>`
      this.$confirm(txt, '温馨提示', {
        dangerouslyUseHTMLString: true,
        type: 'none'
      })
        .then(async()=> {
          let res;
          console.log("1111")
          if(row.status == 1){
            res = await disableMenu({id:row.id})
            console.log("222")
          }else{
            console.log("333")
            res = await enable({id:row.id})
          }
          if (res.success) {
              this.loading = false
              this.getList()
              this.form = lodash.cloneDeep(this.defaultForm)
            }

        })
        .catch(() => {
          this.form = lodash.cloneDeep(this.defaultForm)
        })
    },
    // 点击新增按钮
    addMenu() {
      // this.cascaderList = lodash.cloneDeep(this.cascaderListSave)
      this.editId = ''
      this.menuDialogShow = true
      this.dialogType = 'add'
      this.changeplatform()
    },
    // 搜索、重置按钮
    searchClick() {
      this.loading = true
      this.getList()
    },
    // 重置按钮
    resetClick() {
      this.searchForm = {
        name: '',
        type: '',
        platform: this.page === 'kehu' ? 2 : 1,
        status: ''
      }
      this.getList()
    },
    // 选择下拉树形节点时触发的事件
    handleNodeClick(node) {
      console.log(this.form)
      this.parentSelect.parentSelectId = node.id
      this.parentSelect.parentSelectName = node.name
      this.form.parentId = node.id
      if (this.form.parentSelectId == '0') {
        this.parentSelect.parentSelectName = '作为一级菜单'
      }
      this.$refs.form.validateField('parentSelect')
      this.$refs.parentId.blur()
    },
    // 选择器的树节点
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 系统类型切换事件
    async systemTypeChange(val) {
      /**
       * 1. 切换时清除默认可视角色和上级节点
       * 2. 新增和编辑时获取到上级节点 - 新增：过滤；编辑：接口获取当前菜单的角色和上级节点
       * 3. 制造作为一级菜单
       */
      // 清除默认可视角色和上级节点
      this.form.roles = []
      this.form.parentId = ''
      this.parentSelect.parentSelectName = ''
      this.parentSelect.parentSelectId = ''
      // 可选的菜单
      // this.cascaderListSelect = lodash.cloneDeep(this.cascaderListSave)
      // 编辑时获取上级节点内容 - 根据val过滤
      if (this.editId != '') {
        const res = await getOneMenu(this.editId)
        this.roles = res.data.roles
        this.cascaderListSelect = res.data.parentMenuDTOs
      }
      // arr1 为所有默认可视角色；arr2为所有菜单；obj用于制造「作为一级菜单」
      const arr1 = [...this.viewRole]
      const arr2 = [...this.cascaderList]
      const obj = lodash.cloneDeep(arr2[0])
      obj.children = []
      obj.name = '作为一级菜单'
      obj.id = '0'
      // 过滤出默认可视角色
      if (val == 12) {
        this.viewRoleSelect = arr1.filter(item => item.systemtype == val || (item.systemtype == 2 && item.name == '企业管理员'))
      } else {
        this.viewRoleSelect = arr1.filter(item => item.systemtype == val)
      }
      // 对于新增 - 金服和物联网操作略有不同 - 7.29旧版
      // if (this.editId == '') {
      //   if (val == '4' || val == '8') {
      //     this.cascaderListSelect = arr2.filter(item => item.type == val)
      // 金服的角色取的是总部端的; 大数据取1
      if (val == '4' || val == '11') {
        this.viewRoleSelect = arr1.filter(item => item.systemtype == '1')
      }
      //   } else {
      // 若有值
      if (arr2.filter(item => item.type == val).length > 0) {
        // this.cascaderListSelect = arr2.filter(item => item.type == val)[0].children
        this.cascaderListSelect = arr2.filter(item => item.type == val)
      } else {
        this.cascaderListSelect = []
        obj.type = val
        this.cascaderListSelect.unshift(obj)
      }
      //   }
      // }
      // 添加作为一级菜单
      if (this.cascaderListSelect || this.cascaderListSelect[0].name !== '作为一级菜单') {
        obj.type = val
        this.cascaderListSelect.unshift(obj)
      }
    },
    handleDelete(row) {
      console.log('row', row)
      var txt = `<p class="text-center">您确定要删除【${row.name}】吗？</p>`
      this.$confirm(txt, '温馨提示', {
        dangerouslyUseHTMLString: true,
        type: 'none'
      })
        .then(() => {
          delOneMenu({
            id:row.id
          }).then(res => {
            if (res.success) {
              window.location.reload()
            }
          })
        })
        .catch(() => {})
    },
    // 菜单排序
    moveMenu(row, count) {
      moveMenuSort({ id: row.id, operate: count }).then(() => {
        this.getList()
      })
    },
    // 全部展开或折叠
    handleexpand(val) {
      this.loading = true
      setTimeout(() => {
        // this.list = lodash.cloneDeep(this.listCopy)
        this.isexpendall(this.listCopy, val)
        this.loading = false
        this.isExpand = !this.isExpand
      }, 200)
    },
    isexpendall(data, val) {
      data.forEach(ele => {
        this.$refs.menuTable.toggleRowExpansion(ele, val)
        if (ele.children && ele.children.length != 0) {
          this.isexpendall(ele.children, val)
        }
      })
      return true
    },
    // 导入按钮
    handleLeadIn() {
      this.openLeadIn = true
      // this.upload_name = ''
    },
    // 导入添加文件
    onChange(file) {
      this.fileInfo = file
      this.fileData = new FormData()
      this.fileData.append('file', file.raw)
      // this.upload_name = this.fileInfo.name
    },
    // 导入确定按钮
    submitFormLeadIn() {
      if (this.fileData) {
        this.importloading = true
        this.disimport = true
        importMenu(this.fileData)
          .then(res => {
            if (res.success) {
              this.getList()
              this.fileData = ''
              this.openLeadIn = false

              // this.exportnotify(res.success)
            } else {
              this.openLeadIn = false
              this.exportnotify(res.success,res)
            }
            this.importloading = false
            this.disimport = false
          })
          .catch(() => {
            this.importloading = false
            this.disimport = false
          })
      } else {
        this.$message({
          message: '请选择导入文件',
          offset: 60,
          type: 'warning'
        })
        this.importloading = false
      }
    },
    // 导入取消事件
    cancelFormLeadIn() {
      this.openLeadIn = false
      this.fileData = ''
    },
    // 导出
    handleExport() {
      exportMenu(this.searchForm).then(res => {
        console.log("res",res)
        if (res.success) {
          this.downloadExcel(res)
        }
      })
    },
    rowOperation(row, $index, event) {
      switch (event) {
        case 'edit' :
          this.edit(row)
          break
        case 'up' :
          // this.moveMenu(row, 'up')
          up({
            ID:row.id
          }).then(res=>{
            if(res.success){
              this.getList();
            }
          })
          break
        case 'down' :
          down({
            ID:row.id
          }).then(res=>{
            if(res.success){
              this.getList();
            }
          })
          break
        case 'status' :
          this.stateManage(row)
          break
        case 'del':
          this.handleDelete(row)

          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.menuManage {
  .el-table {
    .el-table__row {
      .el-table_1_column_1 {
        text-align: left;
      }
    }
  }
}
/deep/.menuName.menuName.menuName.menuName {
  text-align: left;
}
/deep/.disabled {
  color: #b9b8b8;
}
.iconSelect{
  .el-input--prefix .el-input__inner{
    padding-left: 45px;
  }
}
.iconInput{
  /deep/.el-input__inner {
    padding-left: 36px;
  }
}
.icon {
  height: 36px;
  width: 25px;
  line-height: 36px;
  padding-left: 10px;
}
</style>
