<template>
  <div class="mainContentBox" style="width:50%; float: left;">
    <avue-crud
        ref="crudRef1"
        v-model="form"
        :data="data"
        :option="option"
        @row-click="rowClick"
    >
      <template #menu-left="{ size }">
        <el-button
            type="primary"
            icon="el-icon-plus"
            :size="size"
            @click="handleEdit(null)"
        >新增</el-button>
      </template>
      <template #menu="{ size, row, index }">
        <el-button
            type="primary"
            link
            @click="handleEdit(row)"
        ><i-ep-edit />编辑
        </el-button>
        <el-button
            type="danger"
            icon="el-icon-delete"
            :size="size"
            link
            @click="todelete(row,0)"
        >删除</el-button
        >
      </template>
    </avue-crud>
  </div>
  <div class="mainContentBox" style="width:50%;float: left;">
    <avue-crud
        ref="crudRef2"
        v-model:search="data1.search"
        v-model="form"
        :data="data1.data"
        v-model:page="data1.page"
        @size-change="data1.Methords.dataList"
        @current-change="data1.Methords.dataList"
        :option="data1.option"
        @row-del="delUser"
    >
      <template #menu="{ size, row, index }">
        <el-button
            type="danger"
            icon="el-icon-delete"
            :size="size"
            link
            @click="todelete(row,1)"
        >删除</el-button
        >
      </template>
    </avue-crud>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="450px"
        @close="dialog.visible = false"
    >

      <el-form>
        <el-form-item label="角色名称" prop="roleName">
          <el-input
              :disabled="roleDisabled"
              v-model="form.roleName"
          />
        </el-form-item>
        <el-form-item label="人员名称" prop="userName">
          <el-tree-select
              multiple
              v-model="form.userNames"
              :data="userList"
              filterable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import {queryRoleUser,delRoleUser,addRoleUser,delRole} from "@/api/flow"
import {getUserList,getUserTree} from "@/api/system/user"
import { useCommonStoreHook } from "@/store";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const crudRef1 = ref(null);
const crudRef2 = ref(null);
const roleDisabled = ref(false)
const rowClick = (row) => {
  selectRow.value = row
  crudRef1.value.setCurrentRow(row);
  data1.value.search.roleName = row.roleName
  data1.value.Methords.dataList();
};
const selectRow = ref()
const todelete = (row, type) =>{
  ElMessageBox.confirm("您确定要删除记录吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    if(type === 0){
      delRole(row).then(()=>{
        ElMessage.success("操作成功")
        queryDataList()
      })
    }else{
      delRoleUser(row).then(()=>{
        ElMessage.success("操作成功")
        queryDataList()
      })
    }
  });
}
const handleEdit = (row)=>{
  if(row){
    roleDisabled.value = true
    queryRoleUser({roleName: row.roleName}).then((res)=>{
      row.userNames = []
      res.data.records.forEach(item=>{
        row.userNames.push(item.userName)
      })
      form.value = row
      dialog.visible = true
    })
  }else{
    form.value  = {}
    roleDisabled.value = false
    dialog.visible = true
  }

}

const handleSubmit = () =>{
  if(!form.value.roleName){
    ElMessage.error("角色名称不能为空")
    return
  }
  if(!form.value.userNames){
    ElMessage.error("用户名称不能为空")
    return
  }
  addRoleUser(form.value).then(()=>{
    ElMessage.success("操作成功")
    queryDataList()
    dialog.visible = false
  })
}
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/flowRole",
  });
const data1 = ref(
  useCrud({
    dataListUrl: "/api/v1/flowRole/userPage",
  })
);
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const userList = ref([])
const dialog = reactive({
  title: "角色配置",
  visible: false,
});
//crudRef.value 获取avue-crud对象
// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  delBtn: false,
  selection: false,
  viewBtn: false,
  editBtn: false,
  menu: true,
  addBtn: false,
  searchBtn: false,
  toolBtn: false,
  highlightCurrentRow: true,
  column: [
    {
      label: "角色名称",
      prop: "roleName",
      overHidden: true,
      editDisplay: false,
      rules: [
        {
          required: true,
          message: "角色名称不能为空",
          trigger: "trigger",
        },
      ],
    },
  ],
});
data1.value.option = Object.assign(data1.value.option, {
  delBtn: false,
  selection: false,
  viewBtn: false,
  border: 1,
  editBtn: false,
  menu: true,
  addBtn: false,
  searchBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "用户名称",
      prop: "userName",
      overHidden: true,
    },
  ],
});
const queryDataList = async () => {
  await dataList()
  rowClick(data.value[0])
  /*data.value.forEach(item => {
    let users = []
    queryRoleUser({roleCode: item.dictValue}).then((u) => {
      u.data.records.forEach((uu) => {
        users.push(uu.userName)
      })
      item.userName = users
    })
  })*/
};
const delUser = (row)=>{
  ElMessageBox.confirm("确定要删除数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false,
  }).then(() => {
    delRoleUser(row).then((res)=>{
      queryRoles()
    });
  });
}

const queryUsers = (code)=>{
  data1.value = []
  queryRoleUser({roleName: code}).then((res)=>{
    data1.value = res.data.records
  })

}
getUserTree().then((data) => {
  userList.value = data.data;
});
// const queryUserList = ()=>{
//   getUserList({}).then((res)=>{
//     userList.value = res.data
//   })
// }
onMounted(() => {
  queryDataList();
  // queryUserList()
  data1.value.Methords.dataList();
  getUserTree().then((data) => {
    userList.value = data.data;
  });
});
</script>
