<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import {
  getdata,
  addmenu,
  editmenu,
  deltmenu,
  moveOrderno,
  uploadIcon,
  moveIcon
} from '@/api/menu';
import Sortable from 'sortablejs';
//定义表格数据
import { useUserStore } from '@/store/modules/user';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const tableData: any = ref([]);
function gteTabledata() {
  const params = {
    systemcode: systemcode.value,
    name: '',
  }
  loading.value = true
  getdata(params).then((res) => {
    tableData.value = res
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
const expertInfoRef = ref();
const menuInfoRef = ref();
const btnInfoRef = ref();
const loading = ref(false);
//定义tabbar
const systemcode = ref('1')
const activeIndex = ref('1')
function handleSelect(key: string) {
  if (key == '1') {
    systemcode.value = '1'
  } else if (key == '2') {
    systemcode.value = '2'
  } else if (key == '3') {
    systemcode.value = '3'
  }
  gteTabledata()

}
//定义搜索框文本
const menuname = ref('')
//点击搜索
function search() {
  menuname.value = menuname.value.replace(/\s+/g, "");
  let params = {
    systemcode: systemcode.value,
    name: menuname.value,
    isdisplay: ''
  }
  getdata(params).then((res) => {
    tableData.value = res
  })

}
//目录添加
const title = ref('')
const expertInfo: any = ref({
  name: '',
  type: '0',
  opturl: '',
  permission: '',
  isdisplay: true,
  systemcode: '',
  icon: '',
  code: ''
})
const dialogVisible = ref(false)
function addClick() {
  title.value = '新增目录'
  const orgnamemage = ref({
    name: '',
    type: '3',
    opturl: '',
    permission: '',
    orderno: 1,
    isdisplay: '1',
  })
  expertInfo.value = orgnamemage.value
  dialogVisible.value = true
}
//关闭目录
function handleClose() {
  dialogVisible.value = false;
  btnVisible.value = false;
  menuVisible.value = false;
  if (expertInfoRef.value != null) expertInfoRef.value.resetFields();
  if (menuInfoRef.value != null) menuInfoRef.value.resetFields();
  if (btnInfoRef.value != null) btnInfoRef.value.resetFields();
}
//表格规则定义
const rules = ref({
  name: [
    { required: true, message: '请输入目录名称', trigger: 'blur' }, { validator: stringlength, trigger: 'blur' }
  ],
  opturl: [
    { required: true, message: '请输入操作URL', trigger: 'blur' }
  ],
  permission: [
    { required: true, message: '请输入目录权限标识', trigger: 'blur' }
  ]
})
//区域名称长度
function stringlength(rule: any, value: any, callback: any) {
  if (value.length > 100) {
    return callback(new Error('字符最大长度不超过100'))
  }
  callback()
}
//添加子目录
const parentID = ref('')
function addchilder(row: any) {
  title.value = '新增子目录'

  const orgnamemage = ref({
    name: '',
    type: '3',
    opturl: '',
    permission: '',
    orderno: 1,
    isdisplay: '1',
  })
  parentID.value = row.id
  expertInfo.value = orgnamemage.value
  dialogVisible.value = true
  iconall.value = ''
  getid.value = row.id
}
//新增目录-确认按钮
function expertsubmit() {
  if (expertInfo.value.name == '') {
    ElMessage({
      message: '请填写目录名称',
      type: 'error',
    })
    return false

  }
  if (expertInfo.value.id) {
    let params = {
      name: expertInfo.value.name,
      systemcode: systemcode.value,
      type: '0',
      parentid: expertInfo.value.parentid,
      id: expertInfo.value.id,
      icon: iconall.value,
      opturl: expertInfo.value.opturl,
      isdisplay: expertInfo.value.isdisplay,
    }
    editmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        dialogVisible.value = false
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
      }

    })
  } else if (title.value == '新增子目录') {
    let params = {
      name: expertInfo.value.name,
      systemcode: systemcode.value,
      type: '0',
      opturl: expertInfo.value.opturl,
      isdisplay: expertInfo.value.isdisplay,
      parentid: parentID.value,
      icon: iconall.value
    }
    addmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        dialogVisible.value = false
        ElMessage({
          message: '新建成功',
          type: 'success',
        })
      }

    })
  } else {
    let params = {
      name: expertInfo.value.name,
      systemcode: systemcode.value,
      type: '0',
      opturl: expertInfo.value.opturl,
      isdisplay: expertInfo.value.isdisplay,
      parentid: '0',
      id: expertInfo.value.id,
      icon: iconall.value
    }
    addmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        dialogVisible.value = false
        ElMessage({
          message: '新建成功',
          type: 'success',
        })
      }

    })
  }


}
//菜单目录
const menurules = ref({
  name: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' }, { validator: stringlength, trigger: 'blur' }
  ],
  opturl: [
    { required: true, message: '请输入操作URL', trigger: 'blur' }
  ],
  permission: [
    { required: true, message: '请输入菜单权限标识', trigger: 'blur' }
  ]
})
const menuVisible = ref(false)
const menutitle = ref('')
//定义按钮弹窗数据
const btnInfo: any = ref({
  name: ' ',
  orderno: ' ',
  islink: ' ',
  opturl: ' ',
  permission: ' ',
  isdisplay: ' ',
  icon: '',
})
const btnVisible = ref(false)
const btnrules = ref({
  name: [
    { required: true, message: '请输入按钮名称', trigger: 'blur' }, { validator: stringlength, trigger: 'blur' }
  ],
  permission: [
    { required: true, message: '请输入按钮权限标识', trigger: 'blur' }
  ]
})
//定义菜单弹窗数据
const menuInfo: any = ref({
  name: '',
  orderno: '',
  islink: '',
  opturl: '',
  permission: '',
  isdisplay: '',
  icon: ''
})
//修改目录
const btntitle = ref('')
const getid = ref('')
const allId = ref('')
function handleEdit(row: any) {
  iconall.value = row.icon
  const Row = JSON.parse(JSON.stringify(row))
  getid.value = row.id
  btnparentid.value = row.parentid
  if (row.type == '2') {
    btntitle.value = '修改按钮'
    let newInfo = ref({})
    newInfo.value = Row
    btnInfo.value = newInfo.value
    btnVisible.value = true
  } else if (row.type == '1') {
    menutitle.value = '修改菜单'
    let newInfo = ref({})
    newInfo.value = Row
    menuInfo.value = newInfo.value
    menuVisible.value = true
  } else {
    title.value = '修改目录'
    let newInfo = ref({})
    newInfo.value = Row
    expertInfo.value = newInfo.value
    dialogVisible.value = true
  }
}
//新增菜单
const btnparentid = ref('')
function menuclick(row: any) {
  if (row.id == undefined) {
    btnparentid.value = '0'
  } else {
    btnparentid.value = row.id
  }
  menutitle.value = '添加菜单'
  menuInfo.value = {
    name: '',
    type: '1',
    islink: '0',
    opturl: '',
    permission: '',
    orderno: 1,
    isdisplay: '1',
  },
    menuVisible.value = true
  iconall.value = ''
  getid.value = row.id
}
//添加按钮
function btnclick(row: any) {
  getid.value = row.id
  btntitle.value = '添加按钮'
  btnInfo.value = {
    name: '',
    type: '2',
    islink: '0',
    opturl: '',
    permission: '',
    orderno: 1,
    isdisplay: '1',
  },
    btnVisible.value = true
  btnparentid.value = row.id
}
//删除
function handleDelete(row: any) {
  const message = ref()
  if (row.type == '0') {
    message.value = '确定删除此目录及此目录下的所有菜单吗？'
  } else if (row.type == '1') {
    message.value = '确定删除此菜单及此菜单下的所有按钮吗？'
  } else if (row.type == '2') {
    message.value = '确定删除此按钮吗？'
  }
  ElMessageBox.confirm(message.value, '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const params = {
      id: row.id
    }
    deltmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }

    })

  })
}
//菜单目录-确定
function menusubmit() {
  if (menuInfo.value.name == '') {
    ElMessage({
      message: '请填写菜单名称',
      type: 'error',
    })
    return false

  }
  if (menuInfo.value.id) {
    let params = {
      name: menuInfo.value.name,
      systemcode: systemcode.value,
      type: '1',
      opturl: menuInfo.value.opturl,
      permission: menuInfo.value.permission,
      islink: menuInfo.value.islink,
      isdisplay: menuInfo.value.isdisplay,
      // parentid: '',
      id: getid.value,
      icon: iconall.value,
    }
    editmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        menuVisible.value = false
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
      }

    })
  } else {
    let params = {
      name: menuInfo.value.name,
      systemcode: systemcode.value,
      type: '1',
      opturl: menuInfo.value.opturl,
      islink: menuInfo.value.islink,
      isdisplay: menuInfo.value.isdisplay,
      parentid: btnparentid.value,
      // id: expertInfo.value.id,
      icon: iconall.value,
    }
    addmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        menuVisible.value = false
        ElMessage({
          message: '新建成功',
          type: 'success',
        })
      }

    })
  }

}
//按钮目录-确定

function btnsubmit() {
  if (btnInfo.value.name == '' || btnInfo.value.permission == '') {
    ElMessage({
      message: '请填写按钮名称和权限标识',
      type: 'error',
    })
    return false

  }
  if (btnInfo.value.id) {
    let params = {
      code: btnInfo.value.code,
      name: btnInfo.value.name,
      systemcode: systemcode.value,
      type: '2',
      opturl: btnInfo.value.opturl,
      permission: btnInfo.value.permission,
      islink: btnInfo.value.islink,
      // isdisplay: btnInfo.value.isdisplay,
      id: getid.value
    }
    editmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        dialogVisible.value = false
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        btnVisible.value = false
      }

    })
  } else {
    let params = {
      name: btnInfo.value.name,
      systemcode: systemcode.value,
      type: '2',
      opturl: btnInfo.value.opturl,
      permission: btnInfo.value.permission,
      islink: btnInfo.value.islink,
      isdisplay: btnInfo.value.isdisplay,
      parentid: btnparentid.value,
    }
    addmenu(params).then((res: any) => {
      if (res.code == '0') {
        gteTabledata()
        dialogVisible.value = false
        ElMessage({
          message: '新建成功',
          type: 'success',
        })
        btnVisible.value = false
      }

    })

  }
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
//上传图标
function fileClick(val: any) {
  allId.value = val
  const avatar = document.getElementById('avatar');
  avatar?.click();
}
const iconall = ref('')
function changeFile(e: any) {
  const files = new FormData()
  files.append('icon', e.target.files[0])
  files.append('menuId', allId.value)
  uploadIcon(files).then((res) => {
    iconall.value = res.data
    gteTabledata()
    ElMessage({
      type: 'success',
      message: '上传成功',
    })
    // location.reload()
    var file: any = document.getElementById('avatar');
    file.value = '';
  }).catch(() => {
    ElMessage({
      type: 'error',
      message: '上传失败',
    })
    var file: any = document.getElementById('avatar');
    file.value = '';
  });
}
//图标删除事件
function delectIcon(id: any) {
  ElMessageBox.confirm('确定删除此图标吗？', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const params = {
      id: id
    }
    moveIcon(params).then((res: any) => {
      if (res.code == '0') {
        iconall.value = ''
        gteTabledata()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }

    })
  })
}
// Icon选择器显示状态
function treeToTile(treeData: any, childKey = 'children') {
  const arr = [] as any[]
  const expanded = (data: any) => {
    if (data && data.length > 0) {
      data.filter((d: any) => d).forEach((e: any) => {
        arr.push(e)
        expanded(e[childKey] || [])
      })
    }
  }
  expanded(treeData)
  return arr
}
const activeRows: any = ref([]);
function rowDrop() {
  const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
  Sortable.create(tbody, {
    draggable: ".draggable .el-table__row",
    onMove: () => {
      activeRows.value = treeToTile(tableData.value) // 把树形的结构转为列表再进行拖拽
    },
    onEnd(e: any) {
      const oldRow = activeRows.value[e.oldIndex] // 移动的那个元素
      const newRow = activeRows.value[e.newIndex] // 新的元素

      if (oldRow.type != newRow.type) {
        ElMessage({
          message: '拖拽同级目录排序',
          type: 'warning',
        })
        tableData.value = []
        gteTabledata()
        return
      }
      const params = {
        fromId: oldRow.id,
        toId: newRow.id,
      };
      moveOrderno(params).then((res: any) => {
        if (res.code == 1) {
          tableData.value = []
          gteTabledata()
          ElMessage({
            type: "error",
            message: "修改失败",
          });
        } else {
          tableData.value = []
          gteTabledata();

        }
      });
    }
  });
}
onMounted(() => {
  gteTabledata()
  rowDrop()
})
</script>
<template>
  <div class="collectiontemplate-box">
    <section class="detail-box">
     
      <div
        style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;  margin-bottom:10px">
        <div style="display: flex;display: -webkit-flex;">
          <el-input v-model="menuname" placeholder="请输入菜单标题" clearable style="width:200px;margin-right:10px"
            @clear="search()" @keyup.enter="search()" />
          <el-button class="searchButton" type="primary" @click="search()">搜索</el-button>
        </div>
        <div>
          <el-button class="searchButton" v-hasPerm="['add:menu']" type="primary" @click="addClick">
           新增目录</el-button>
          <!-- <el-button v-hasPerm="['add:menu']" type="primary" @click="menuclick">
            <img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 4px;">添加菜单</el-button> -->

        </div>
      </div>
      <div class="draggable">
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" default-expand-all tooltip-effect="dark"
          style="width: 100%;height: calc(80vh)" row-key="id" :row-class-name="tableRowClassName"
          :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px'}">
          <el-table-column label="菜单标题" width="250" prop="name" show-overflow-tooltip>
            <template #default="scope">
              <div style="position: absolute; left:15px;"><img src="@/assets/MenuIcon/lbcz_td.png" alt=""></div>
              <div style="margin-left: 20px;">{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="菜单类型" width="100" align="center" prop="type">
            <template #default="scope">
              <span v-if="scope.row.type == '2'">按钮</span>
              <span v-else-if="scope.row.type == '1'">菜单</span>
              <span v-else>目录</span>
            </template>
          </el-table-column>
          <el-table-column label="菜单编号" prop="code" width="100" show-overflow-tooltip />
          <el-table-column label="系统类型" width="120" prop="systemcode" align="center">
            <template #default="scope">
              <span v-if="scope.row.systemcode == '1'">管理后台</span>
              <span v-else-if="scope.row.systemcode == '2'">监控大屏</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="图标" width="100" prop="icon" align="center">
            <template #default="scope">
              <div v-if="scope.row.type !== '2'"
                style="display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items: center; width:100%;height: 100%;">
                <div v-if="scope.row.icon == ''">
                  <el-button @click="fileClick(scope.row.id)" class="avatar searchButton">上传</el-button>
                  <input type="file" id="avatar" style="display:none" @change="changeFile">
                </div>
                <div v-else class="delicon">
                  <div class="delIcon"
                    style="position: absolute; top: 0px;right: -7px; background-color: red;width: 10px;height:10px;text-align: center;line-height: 9px;border-radius: 50%; display: none; z-index: 1000;"
                    @click="delectIcon(scope.row.id)">
                    x</div>
                  <img :src="url + '/menu/' + scope.row.icon" @click="fileClick(scope.row.id)" alt=""
                    style="width: 16px;height: 16px;cursor: pointer;">
                  <input type="file" id="avatar" style="display:none" @change="changeFile">
                </div>
                <!-- <img :src="url + '/menu/' + scope.row.icon" alt=""> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否外链" width="100" prop="islink" align="center">
            <template #default="scope">
              <span v-if="scope.row.islink == '1'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column label="操作URL" min-width="100" prop="opturl" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.opturl">{{ scope.row.opturl }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="权限标识" width="140" prop="permission" show-overflow-tooltip />
          <el-table-column label="是否显示" width="100" prop="isdisplay" align="center">
            <template #default="scope">
              <span v-if="scope.row.isdisplay == '1'">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastmodifier" label="最近修改者" width="120"></el-table-column>
          <el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
            <template #default="scope">
              {{ dateFormat(scope.row.lastmodifydate) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right" align="center"
            style="display: flex; display: -webkit-flex;">
            <template #default="scope">
              <!-- <img src="@/assets/icon/edit.png" alt="" title="修改" @click="handleEdit(scope.row)"
                style="cursor: pointer;margin-left:5px;"> -->
              <!-- <img src="@/assets/icon/subdirectory.png" alt="" title="子目录"  @click="subdirectoryclick(scope.$index, scope.row)"  style="cursor: pointer;margin-left:5px"> -->
              <span
                style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                <img src="@/assets/newimg/ht_xg.png" alt="" v-hasPerm="['update:menu']" title="修改"
                  @click="handleEdit(scope.row)" style="cursor: pointer;">
                <img src="@/assets/newimg/ht_zml.png" alt="" v-hasPerm="['add:menu']" v-if="scope.row.type == '0'"
                  title="新增子目录" @click="addchilder(scope.row)" style="cursor: pointer;">
                <img src="@/assets/newimg/ht_zml1.png" alt="" v-hasPerm="['add:menu']" v-else title="新增子目录"
                  style="cursor: pointer;">
                <img src="@/assets/newimg/ht_cd.png" alt="" v-hasPerm="['add:menu']" v-if="scope.row.type == '0'"
                  title="添加菜单" @click="menuclick(scope.row)" style="cursor: pointer;">
                <img src="@/assets/newimg/ht_cd1.png" alt="" v-hasPerm="['add:menu']" v-else title="添加菜单"
                  style="cursor: pointer;">
                <img src="@/assets/newimg/ht_ann.png" alt="" v-hasPerm="['add:menu']" v-if="scope.row.type == '1'"
                  title="按钮" @click="btnclick(scope.row)" style="cursor: pointer;">
                <img src="@/assets/newimg/ht_ann1.png" alt="" v-hasPerm="['add:menu']" v-else title="按钮"
                  style="cursor: pointer;margin-left:5px;font-size:18px; color: rgb(153 214 255);">
                <img src="@/assets/newimg/ht_sc1.png" alt="" v-hasPerm="['del:menu']" v-if="scope.row.status == '09'"
                  title="删除" style="cursor: pointer; ">
                <img src="@/assets/newimg/ht_sc.png" alt="" v-hasPerm="['del:menu']" v-else title="删除"
                  @click="handleDelete(scope.row)" style="cursor: pointer; ">
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- </div> -->
    </section>
    <!-- 新增目录 -->
    <Eldialog v-if="dialogVisible" :title="title" :zIndex="2000" :width="'620px'" :height="'600px'"
      @before-close="handleClose">
      <template v-slot:PopFrameContent>
        <el-form ref="expertInfoRef" :model="expertInfo" :rules="rules" label-width="90px" style="margin-top:15px;">
          <el-form-item label="目录编号" prop="name">
            <el-input v-model="expertInfo.code" placeholder="" disabled style="width: 98%;"></el-input>
          </el-form-item>
          <el-form-item label="目录名称" prop="name">
            <el-input v-model="expertInfo.name" placeholder="" style="width: 98%;"></el-input>
          </el-form-item>
          <el-form-item label="操作URL" prop="opturl">
            <el-input v-model="expertInfo.opturl" placeholder="" style="width: 98%;"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isdisplay">
            <el-radio-group v-model="expertInfo.isdisplay">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer"
          style="display: flex; display: -webkit-flex; justify-content: center;-webkit-justify-content:center;margin: 5px 0px 10px 0px;">
          <div class="details-button" @click="handleClose">取消</div>
          <div class="details-button" @click="expertsubmit">确定</div>
        </span>
      </template>
    </Eldialog>
    <!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title" draggable
      append-to-body width="620px" class="dialogClass">
      
    </el-dialog> -->
    <!-- 菜单目录 -->
    <Eldialog v-if="menuVisible" :title="menutitle" :zIndex="2000" :width="'620px'" :height="'600px'"
      @before-close="handleClose">
      <template v-slot:PopFrameContent>
        <el-form ref="menuInfoRef" :model="menuInfo" :rules="menurules" label-width="90px" style="margin-top: 15px;">
          <el-form-item label="菜单编号">
            <el-input v-model="menuInfo.code" placeholder="" disabled style="width:95%;"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="menuInfo.name" placeholder="" style="width: 95%;"></el-input>
          </el-form-item>

          <el-form-item label="是否外链" prop="islink">
            <el-radio-group v-model="menuInfo.islink">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="操作URL" prop="opturl">
            <el-input v-model="menuInfo.opturl" placeholder="" style="width: 95%;"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isdisplay">
            <el-radio-group v-model="menuInfo.isdisplay">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer"
          style="display: flex; display: -webkit-flex; justify-content:center;-webkit-justify-content: center;margin-bottom: 10px;">

          <div class="details-button" @click="handleClose">取消</div>
          <div class="details-button" @click="menusubmit">确定</div>
        </span>
      </template>
    </Eldialog>
    <!-- <el-dialog v-model="menuVisible" :close-on-click-modal="false" :before-close="handleClose" :title="menutitle"
      draggable append-to-body width="620px" class="dialogClass">

    </el-dialog> -->
    <!-- 按钮 -->
    <Eldialog v-if="btnVisible" :title="btntitle" :zIndex="2000" :width="'620px'" :height="'600px'" 
      @before-close="handleClose">
      <template v-slot:PopFrameContent>
        <el-form ref="btnInfoRef" :model="btnInfo" :rules="btnrules" label-width="90px" style="margin-top:15px;">
          <el-form-item label="按钮编号">
            <el-input v-model="btnInfo.code" placeholder="" disabled style="width: 95%;"></el-input>
          </el-form-item>
          <el-form-item label="按钮名称" prop="name">
            <el-input v-model="btnInfo.name" placeholder="" style="width: 95%;"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="permission">
            <el-input v-model="btnInfo.permission" placeholder="" style="width: 95%;"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isdisplay">
            <el-radio-group v-model="btnInfo.isdisplay">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer"
          style="display: flex; display: -webkit-flex;justify-content: center;-webkit-justify-content: center;margin-bottom: 10px;">
          
          <div class="details-button" @click="handleClose">取消</div>
          <div class="details-button" @click="btnsubmit">确定</div>
        </span>
      </template>
    </Eldialog>
    <!-- <el-dialog v-model="btnVisible" :close-on-click-modal="false" :before-close="handleClose" :title="btntitle"
      append-to-body width="620px" class="dialogClass" draggable>
     
    </el-dialog> -->
  </div>
</template>
<style scoped lang="scss">
.collectiontemplate-box {
  padding: 17px 15px 8px 15px;
}

.detail-box {
  width: 100%;
  height: calc(89vh);
  overflow: auto;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 3px;
  padding: 25px 20px 0px;
  box-sizing: border-box;
  background: url(@/assets/navigation/ty_1614x988.png) no-repeat;
  background-size: 100% 100%;

}

:deep(.el-tooltip) {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
}

.delicon {
  width: 20px;
  height: 25px;
  position: relative;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  // margin-left: 20px;

}

.delicon:hover {
  // background-color: red;

  .delIcon {
    display: block !important;
    color: #fff;
    cursor: pointer;
  }

}


:deep(.el-table__expand-icon) {
  margin-left: 15px;
  margin-right: -10px !important;
}

.hasTagsView .app-main {
  min-height: calc(100vh - 120px) !important;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;
  color: #fff;
}

:deep(.el-tree) {
  background-color: #ffffff00 !important;
  --el-tree-node-hover-bg-color: #0099ff09;
}

:deep(.el-input) {
  --el-input-bg-color: #ffffff00 !important;
}

:deep(.el-menu) {
  background-color: #ffffff00;
}
</style>