<template>
    <div>
      <div class="gva-table-box">
        <div class="gva-btn-list">
          <el-button size="small" type="primary" icon="plus" @click="addMenu('0')">新增根编号</el-button>
        </div>
  
        <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
        <el-table :data="tableData" row-key="id">
          <el-table-column align="left" label="id" min-width="100" prop="id" />
          <el-table-column align="left" label="日志编号" show-overflow-tooltip min-width="160" prop="coding" />
          <el-table-column align="left" label="编号说明" show-overflow-tooltip min-width="160" prop="describe" />
          <el-table-column align="left" label="父节点" min-width="90" prop="parent_id" />
          <el-table-column align="left" fixed="right" label="操作" width="300">
            <template #default="scope">
              <el-button
              v-if="scope.row.level!=3?true:false"
                size="small"
                type="primary"
                link
                icon="plus"
                @click="addMenu(scope.row.id)"
              >添加子编号</el-button>
              <el-button
                size="small"
                type="primary"
                link
                icon="edit"
                @click="editMenu(scope.row.id)"
              >编辑</el-button>
              <el-button
                size="small"
                type="primary"
                link
                icon="delete"
                @click="deleteMenu(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle">
        <el-form
          v-if="dialogFormVisible"
          ref="menuForm"
          :inline="true"
          :model="form"
          :rules="rules"
          label-position="top"
          label-width="85px"
        >
        <el-form-item label="日志编号" prop="coding">
          <el-input v-model="form.coding"/>
        </el-form-item>
        <el-form-item label="编号描述" prop="describe">
          <el-input v-model="form.describe" />
        </el-form-item>
          
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import {
    logCodeList,
    logCodeAdd,
    logCodeUpdate,
    getlogCodeById,
  } from '@/api/logCode'
  import { canRemoveAuthorityBtnApi } from '@/api/authorityBtn'
  import { reactive, ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  const rules = reactive({
    coding: [{ required: true, message: '请输入日志编号', trigger: 'blur' }],
    describe: [
      { required: true, message: '请输入日志描述', trigger: 'blur' }
    ],
    
  })
  
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(999)
  const tableData = ref([])
  const searchInfo = ref({})
  // 查询
  const getTableData = async() => {
    const table = await logCodeList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
      tableData.value = table.data
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }
  
  getTableData()
  
  // 新增参数
  const addParameter = (form) => {
    if (!form.parameters) {
      form.parameters = []
    }
    form.parameters.push({
      type: 'query',
      key: '',
      value: ''
    })
  }
  
  const fmtComponent = () => {
    form.value.component = form.value.component.replace(/\\/g, '/')
  }
  
  // 删除参数
  const deleteParameter = (parameters, index) => {
    parameters.splice(index, 1)
  }
  
  // 新增可控按钮
  const addBtn = (form) => {
    if (!form.menuBtn) {
      form.menuBtn = []
    }
    form.menuBtn.push({
      name: '',
      desc: '',
    })
  }
  // 删除可控按钮
  const deleteBtn = async(btns, index) => {
    const btn = btns[index]
    if (btn.ID === 0) {
      btns.splice(index, 1)
      return
    }
    const res = await canRemoveAuthorityBtnApi({ id: btn.ID })
    if (res.code === 0) {
      btns.splice(index, 1)
      return
    }
  }
  
  const form = ref({
    id: 0,
    coding: '',
    describe: '',
    parent_id: '',
  })
  const changeName = () => {
    form.value.path = form.value.name
  }
  
  const handleClose = (done) => {
    initForm()
    done()
  }
  // 删除菜单
  const deleteMenu = (ID) => {
    ElMessageBox.confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async() => {
        ElMessage({
            type: 'success',
            message: '删除成功!'
          })
          getTableData()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除'
        })
      })
  }
  // 初始化弹窗内表格方法
  const menuForm = ref(null)
  const checkFlag = ref(false)
  const initForm = () => {
    checkFlag.value = false
    menuForm.value.resetFields()
    form.value = {
    id: 0,
    coding: '',
    describe: '',
    parent_id: '',
    }
  }
  // 关闭弹窗
  
  const dialogFormVisible = ref(false)
  const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
  }
  // 添加menu
  const enterDialog = async() => {
    menuForm.value.validate(async valid => {
      if (valid) {
        let res
        if (isEdit.value) {
            form.value.coding = Number(form.value.coding)
            form.value.parent_id = Number(form.value.parent_id)
          res = await logCodeUpdate(form.value)
        } else {
            console.log(form.value.coding)
            form.value.coding = Number(form.value.coding)
            form.value.parent_id = Number(form.value.parent_id)
          res = await logCodeAdd(form.value)
        }
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: isEdit.value ? '编辑成功' : '添加成功!'
          })
          getTableData()
        }
        initForm()
        dialogFormVisible.value = false
      }
    })
  }
  
  const menuOption = ref([
    {
        id: '0',
      title: '根编号'
    }
  ])
  const setOptions = () => {
    menuOption.value = [
      {
        id: '0',
        title: '根目录'
      }
    ]
    setMenuOptions(tableData.value, menuOption.value, false)
  }
  const setMenuOptions = (menuData, optionsData, disabled) => {
    menuData &&
          menuData.forEach(item => {
            if (item.children && item.children.length) {
              const option = {
                ID: String(item.id),
                disabled: disabled || item.id === form.value.id,
                children: []
              }
              setMenuOptions(
                item.children,
                option.children,
                disabled || item.id === form.value.id
              )
              optionsData.push(option)
            } else {
              const option = {
                ID: String(item.id),
                disabled: disabled || item.id === form.value.id
              }
              optionsData.push(option)
            }
          })
  }
  
  // 添加菜单方法，id为 0则为添加根菜单
  const isEdit = ref(false)
  const dialogTitle = ref('新增编号')
  const addMenu = (id) => {
    dialogTitle.value = '新增编号'
    form.value.parent_id = String(id)
    isEdit.value = false
    setOptions()
    dialogFormVisible.value = true
  }
  // 修改菜单方法
  const editMenu = async(id) => {
    dialogTitle.value = '编辑编号'
    const res = await getlogCodeById({ id })
    form.value = res.data
    isEdit.value = true
    setOptions()
    dialogFormVisible.value = true
  }
  
  </script>
  
  <script>
  export default {
    name: 'Menus',
  }
  </script>
  
  <style scoped lang="scss">
  .warning {
    color: #dc143c;
  }
  .icon-column{
    display: flex;
    align-items: center;
    .el-icon{
      margin-right: 8px;
    }
  }
  </style>
  