<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-radio-group v-model="userNameGroupType">
            <el-radio v-for="item in userNameGroupTypeData" :label="item.label" :key="item.label">{{ item.label }}</el-radio>
          </el-radio-group>
          <el-button type="primary" :disabled="userNameGroupTypeData.length>10" @click="addUserGroup">
            <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="userNameGroup" label="用户组名称" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="400">
              <template #default="{ row }">
                <el-button @click="update(row)" size="small">修改</el-button>
                <el-button @click="updateview(row)" size="small">查看</el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="delDeptItem(row)">
                  <template #reference>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 新增弹出框 -->
    <Addsts v-if="addDiaShow" v-model="addDiaShow" :editObj="editObj" :saveAddBtn="saveAddBtn"
      @changeAddVi="changeAddVi" />
  </div>

</template>

<script setup>
import Addsts from "./components/addsts.vue";
import { getItem } from "@/utils/storage"
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { ref, onMounted, onUnmounted, reactive } from "vue";
const userId = getItem("USERID")
const searchArr = reactive([
  {
    showType: "input",
    prop: "moduleName",
    lable: '用户组名称:',
    width: '250px',
    placeholder: "请输入用户组名称"
  }
]);
const isLoading = ref(false); // 是否加载
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});
// 用户组选项名称--最多存在10个用户组
const userNameGroupType=ref('')
const userNameGroupTypeData=ref([
  {label:'用户组选项名称--最多存在10个用户组1'},
  {label:'用户组选项名称--最多存在10个用户组2'},
  {label:'用户组选项名称--最多存在10个用户组3'},
  {label:'用户组选项名称--最多存在10个用户组4'},
  {label:'用户组选项名称--最多存在10个用户组5'},
  {label:'用户组选项名称--最多存在10个用户组6'},
  {label:'用户组选项名称--最多存在10个用户组7'},
  {label:'用户组选项名称--最多存在10个用户组8'},
  {label:'用户组选项名称--最多存在10个用户组9'},
  {label:'用户组选项名称--最多存在10个用户组10'},
])
// 查询
const onSearch = (obj) => {
  listQuery.value.moduleName = obj.moduleName;
  listQuery.value.pageCurrent = 1;
  getListData();
};

//新增修改弹窗相关
const addDiaShow = ref(false);
const saveAddBtn = ref(false);
const editObj = ref({});
// 数据相关
const tableData = ref([]);

// 获取用户组数据
const getListData = () => {
  console.log("获取用户组数据")
};
// 新增
const addUserGroup = () => {
  addDiaShow.value = true
  saveAddBtn.value = true
  console.log("用户组新增")
}
// 查看
const updateview = (row) => {
  addDiaShow.value = true
  saveAddBtn.value = false
  editObj.value = row
  console.log("用户组查看")
}
//修改
const update = (row) => {
  addDiaShow.value = true
  saveAddBtn.value = true
  editObj.value = row
  console.log("用户组修改")
};
//删除
const delDeptItem = (row) => {
  console.log("用户组删除")
};
//关闭
const changeAddVi = (row) => {
  addDiaShow.value = false
};
onMounted(() => {
  getListData();
});
onUnmounted(() => {
});
</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: space-between;
  margin: 10px;
}

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

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