<template>
  <div>
    <MOSTY.PageTree :pageTitle="'操作手册管理'" :isShowLeftTree="false">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" style="margin-right: 10px;" />
        <el-divider />
        <div class="btnBox">
          <el-button v-if="userId == '000000'" type="primary" @click="addRole('add')">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <div class="tabBox">
          <el-table ref="tableRef" stripe :data="tableData" border row-key="id" :tree-props="{ children: 'children' }"
            style="width: 100%;" v-loading="isLoading" :load="depLoad" lazy @row-click="rowClick">
            <el-table-column prop="moduleName" label="父级名称" show-overflow-tooltip align="left">
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="400">
              <template #default="{ row }">
                <el-button v-if="userId == '000000'" @click="update(row, 'edit')" size="small">修改</el-button>
                <el-button v-if="userId == '000000'" @click="updateview(row, 'view')" size="small">查看</el-button>
                <el-button v-if="userId != '000000' && row.attachment" @click="updateview(row, 'view')"
                  size="small">下载附件</el-button>
                <el-button v-if="userId == '000000'" @click="addItemMenu(row, 'children')" size="small">添加下级</el-button>
                <el-button v-if="userId == '000000'" @click="addfiles(row, 'files')" size="small">添加附件</el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="delDeptItem(row)">
                  <template #reference>
                    <el-button v-if="userId == '000000'" type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 新增弹出框 -->
    <Addsts v-model="addDiaShow" v-if="addDiaShow" :editObj="editObj" @changeAddVi="changeAddVi" />
  </div>

</template>

<script setup>
import Addsts from "./components/addsts.vue";
import { getItem } from "@/utils/storage"
// import RolesDialog from "./components/roles.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { deleteSysDept, getOrgTreeByType, deleteManual } from "@/api/user-manage";
const userId = getItem("USERID")
const searchArr = reactive([
  {
    showType: "input",
    prop: "moduleName",
    lable: '模块名称:',
    width: '250px',
    placeholder: "请输入模块名称"
  }
]);
// 查询
const onSearch = (obj) => {
  listQuery.value.moduleName = obj.moduleName;
  listQuery.value.pageCurrent = 1;
  getListData();
};

const keyCount = ref(0); //tabel组件刷新值
const isLoading = ref(false); // 是否加载
const tableRef = ref()
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
  // parentid: "",//部门编码
  // searchType: '01',
});
//新增修改弹窗相关
const addDiaShow = ref(false);
const editObj = ref({});
// 数据相关
const tableData = ref([]);

//动态加载部门数据
function depLoad (row, treeNode, resolve) {
  listQuery.value.parentid = row.id;
  getOrgTreeByType(listQuery.value).then((res) => {
    resolve(res);
  });
};
// 获取数据的方法
const getListData = () => {
  isLoading.value = true;
  // tableData.value = [];
  const params = listQuery.value;
  getOrgTreeByType(params).then((res) => {
    tableData.value = res;

  })
    .finally(() => {
      isLoading.value = false;
    });
};
// 新增编辑表单关闭回调
const changeAddVi = (val) => {
  addDiaShow.value = val;
  getListData();
};
//添加下级
const addItemMenu = async (row, type) => {
  addDiaShow.value = true;
  Object.assign(editObj.value, {
    ...row,
  }, { type: type });

};
// 添加附件
const addfiles = (row, type) => {
  addDiaShow.value = true;
  Object.assign(editObj.value, {
    ...row,
  }, { type: type });
}
// 新增
const addRole = (type) => {
  Object.assign(editObj.value, { type: type });
  addDiaShow.value = true;
}
// 查看
const updateview = (row, type) => {
  addDiaShow.value = true;
  Object.assign(editObj.value, {
    ...row,
  }, { type: type });
}
//修改
const update = (row, type) => {
  addDiaShow.value = true;
  Object.assign(editObj.value, {
    ...row,
  }, { type: type });
};
//删除
const delDeptItem = (row) => {
  let ids = [row.id]
  deleteManual(ids).then(() => {
    ElMessage.success("删除成功");
    tableData.value = [];
    getListData();
  });
};

onMounted(() => {
  getListData();
});
onUnmounted(() => {
  // proxy.mittBus.off("mittFn");
});
// function rowClick (row, column, event) {
//   if (column.label != '操作') {
//     function getRowIdentity (row, rowKey) {
//       if (!row) return undefined
//       if (typeof rowKey === 'string') {
//         if (rowKey.indexOf('.') < 0) {
//           return row[rowKey];
//         }
//         let key = rowKey.split('.');
//         let current = row;
//         for (let i = 0; i < key.length; i++) {
//           current = current[key[i]];
//         }
//         return current;
//       } else if (typeof rowKey === 'function') {
//         return rowKey.call(null, row);
//       }
//     }
//     const store = tableRef.value.store;
//     const { states: { lazy, treeData, rowKey }, assertRowKey, loadOrToggle } = store
//     const id = getRowIdentity(row, rowKey.value)
//     if (!id) return
//     const data = treeData.value[id]
//     // 懒加载则调用懒加载
//     if (lazy && data && 'loaded' in data && !data.loaded) {
//       return loadOrToggle(row, id, data)
//     }
//     tableRef.value.toggleRowExpansion(row);
//   }

// };
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

.pageRight {
  height: 84vh;
}

.tabBox {
  height: calc(100% - 193px);
  overflow-y: auto;

  .el-button--danger {
    border: 1px solid rgb(247, 137, 137);
    background: #fa4c4e;

    &:hover {
      background: rgb(247, 137, 137);
      border: 1px solid rgb(247, 137, 137);
    }

    &:focus {
      border: 1px solid rgb(247, 137, 137);
      background: rgb(247, 137, 137);
    }

    .active {
      border: 1px solid rgb(247, 137, 137);
      background: rgb(247, 137, 137);
    }

  }
}

::v-deep .el-table .cell {
  text-align: left;
}

::v-deep .el-form {
  flex-wrap: wrap
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
  margin-right: 10px;
}

// ::v-deep .flexright {
//   display: flex;
//   flex-wrap: wrap;
//   gap: 5px;

//   .flexright1 {
//     margin: 0px;
//   }
// }</style>
