<template>
  <div>
    <div class="search flex justify-between bg-white rounded-md">
      <el-form :inline="true" class="demo-form-inline" size="default">
        <el-form-item>
          <el-input v-model="form_query.ue_jbxx_ju_sydw" placeholder="请输入事业单位" class="w-40" @change="initData" clearable />
          <!-- <el-select
            v-model="form_query.ue_jbxx_ju_sydw"
            placeholder="全部事业单位"
            class="w-40"
            @change="initData"
          >
            <el-option
              v-for="item in sydwList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select> -->
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="initData"> 查询 </el-button>
      </div>
    </div>
    <div class="bg-white rounded-md mt-4 px-23px py-16px">
      <div class="flex justify-between pb-4 btn">
        <div>
          <el-button type="primary" @click="exportAll">导出</el-button>
          <el-button type="primary" @click="toModify()">角色权限修改</el-button>
          <el-button type="danger" @click="handleMulDelete" :disabled="multipleSelection.length == 0">删除</el-button>
        </div>
        <div class="flex content-center">
          <el-input v-model="form_query.keyword" class="w-40 mx-2" size="small" placeholder="请输搜索关键词" :suffix-icon="Search" clearable />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="user_realname" label="姓名"></el-table-column>
        <el-table-column prop="user_name" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="user_realname" label="性别"></el-table-column>
        <el-table-column prop="ue_jbxx_ju_sydw" label="事业单位">
          <template #default="scope">
            {{ scope.row.ext.ue_jbxx_ju_sydw }}
          </template>
        </el-table-column>
        <el-table-column prop="user_phone" label="联系电话"></el-table-column>
        <el-table-column prop="sm_id" label="用户角色" width="auto">
          <template #default="scope">
            <div v-for="item in scope.row.my_role" :key="item.tur_id">
              {{ item.tur_role_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user_grade_num" label="注册时间">
          <template #default="scope">
            {{ scope.row.ex.create_dateline }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <!-- <el-button type="text" @click="setMorePermission(scope.row)">添加额外权限 |</el-button> -->
            <el-button type="text" @click="
                handleDetail(scope.row.user_id), (detailDialogVisible = true)
              ">详情 |</el-button>
            <el-button type="text" @click="handleDelete(scope.row.user_id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end my-10">
        <el-pagination v-model:current-page="form_query.page" v-model:page-size="form_query.limit" layout="total,sizes, prev, pager, next, jumper" :total="total" :background="true" @current-change="initData" :hide-on-single-page="false" />
      </div>

      <el-dialog v-model="setRoleDialogVisible" class="_" width="600" title="添加额外权限" destroy-on-close>
        <el-form class="table" :model="roleForm" ref="ruleFormRef" label-position="right" label-width="90px">
          <el-form-item label="角色:">
            <el-select v-model="roleForm.current" class="w-40" @change="initRoleData">
              <el-option v-for="(item, index) in roleData" :key="index" :label="item.tur_role_name" :value="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="额外权限:">
            <menu-item v-model="roleForm.tur_role_menu" :extraName="roleForm.extraName"></menu-item>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="flex_center space-x-12">
            <el-button size="large" @click="setRoleDialogVisible = false">取消</el-button>
            <el-button size="large" type="primary" @click="setRoleDialogVisible = false">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>

      <el-dialog v-model="detailDialogVisible" class="_" width="778" title="详情">
        <img class="avatar" :src="ruleForm.user_avatar" />
        <el-form class="grid grid-cols-2" ref="ruleFormRef" label-position="right" label-width="90px" :model="detailForm">
          <el-form-item label="账号:">
            {{ detailForm.user_name }}
          </el-form-item>
          <el-form-item label="用户角色:">
            {{ detailForm.role_name }}
          </el-form-item>
          <el-form-item label="姓名:">
            {{ detailForm.user_realname }}
          </el-form-item>
          <el-form-item label="性别:">
            {{ detailForm.gender1 }}
          </el-form-item>
          <el-form-item label="事业单位:">
            {{ detailForm.ue_jbxx_ju_sydw }}
          </el-form-item>
          <el-form-item label="职位:">
            {{ detailForm.ue_jbxx_ju_zw }}
          </el-form-item>
          <el-form-item label="所属部门:" class="col-span-full">
            {{ detailForm.ue_jbxx_ju_bm }}
          </el-form-item>
          <el-form-item label="特长:" class="col-span-full">
            {{ detailForm.about }}
          </el-form-item>
          <el-form-item label="联系电话:">
            {{ detailForm.user_phone }}
          </el-form-item>
          <el-form-item label="电子邮件:">
            {{ detailForm.user_email }}
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="flex_center space-x-12">
            <el-button size="large" type="primary" @click="handleFormCancel">返回</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import MenuItem from "~/pages/manage/yhxx/jsgl/MenuItem.vue";
import { yhxx_ju_list, yhxx_ju_del, yhxx_ju_detail, sydw_list } from "./api";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { user } from "@/store/index";
const router = useRouter();

//添加额外权限
let setRoleDialogVisible = $ref(false);

const roleData = ref([]);
const roleForm = ref({
  current: "",
  tur_id: "",
  tur_role_name: "",
  tur_role_menu: "",
  extraName: "",
});
async function setMorePermission(item) {
  let obj = {
    tur_id: item.user_role_id_ext,
    limit: 999,
    M5jxrcL: ""
  };
  let { code, data } = await request({
    url: "/txwx/user_role/index",
    data: obj,
  });
  if (code == 1) {
    roleData.value = data.page_data;

    if (roleData.value.length > 0) {
      initRoleData(0);
    }
    setRoleDialogVisible = true;
  }
}

const initRoleData = (index) => {
  roleForm.value.current = index;
  roleForm.value.tur_id = roleData.value[index].tur_id;
  roleForm.value.tur_role_name = roleData.value[index].tur_role_name;
  roleForm.value.extraName = roleData.value[index].tur_role_menu;
};

const ruleFormRef = ref(null);

let ruleForm = $ref({
  user_name: "",
  user_password: "",
  user_avatar: "",
  user_realname: "",
  student_no: "",
  user_cardno: "",
  ue_cym: "",
  ue_jg_id: "",
  gender: "",
  ue_jg_name: "",
  user_birthday: "",
  ue_mz_id: "",
  ue_mz_name: "",
  sm_id: "",
  user_grade_num: "",
  user_class_num: "",
  user_phone: "",
  address: "",
  about: "",
  ue_jbxx_stu_ryxx: "",
  ue_jbxx_stu_jyxx: "",
  user_role_id: "76",
});
let detailForm = $ref({});
let tableData = $ref([]);
let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 10,
  keyword: "",
  has_role: "1",
});
//列表
function initData() {
  const data = {
    ...form_query,
  };
  yhxx_ju_list(data).then((res) => {
    if (res.code == "1") {
      tableData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
let sydwList = $ref([]);

function initSydwData() {
  let data1 = {
    type: "sydw",
  };
  sydw_list(data1).then((res) => {
    if (res.code === "1") {
      sydwList = res.data.list;
    }
  });
}
initSydwData();
let multipleSelection = $ref([]);
let handleSelectionChange = (val) => {
  multipleSelection = [];
  val.forEach((i) => {
    multipleSelection.push(i.user_id);
  });
};

function exportAll() {
  let ids = multipleSelection.join(",");
  let link =
    window.GLOBAL_CONFIG.api +
    "/user/main/index?api=xls&page=1&limit=10000&token=" +
    user.value.token +
    "&user_id=" +
    ids;
  window.open(link, "_blank");
}
let detailDialogVisible = ref(false);
let detailData = ref({});

//详情
function handleDetail(id) {
  const data = {
    user_id: id,
  };
  yhxx_ju_detail(data).then((res) => {
    if (res.code === "1") {
      detailData = res.data;
      detailForm = {
        user_role_id: "3",
        user_role_id_sub: "",
        user_name: detailData.user_name,
        user_realname: detailData.user_realname,
        role_name: detailData.role_name,
        user_avatar: detailData.user_avatar,
        gender: detailData.gender,
        gender1:
          detailData.gender == 1
            ? "男"
            : detailData.gender == 2
              ? "女"
              : "保密",
        ue_jbxx_ju_sydw: detailData.ext.ue_jbxx_ju_sydw,
        ue_jbxx_ju_zw: detailData.ext.ue_jbxx_ju_zw,
        ue_jbxx_ju_bm: detailData.ext.ue_jbxx_ju_bm,
        about: detailData.about,
        user_phone: detailData.user_phone,
        user_email: detailData.user_email,
      };
      Object.keys(ruleForm).find((item) => {
        ruleForm[item] = detailForm[item];
      });
    }
  });
}

// 批量删除
function handleMulDelete() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = { user_id: multipleSelection };
      yhxx_ju_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    })
    .catch(() => { });
}
//单个删除
function handleDelete(id) {
  ElMessageBox.confirm("确认删除?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = { user_id: id };
      yhxx_ju_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    })
    .catch(() => { });
}
function handleFormCancel() {
  detailDialogVisible.value = false;
}
function toModify() {
  router.push({
    name: "modify_rolePermission",
  });
}
</script>
<style lang="scss" scoped>
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
.avatar {
  width: 82px;
  height: 82px;
  background: #c4c4c4;
  border-radius: 8px;
  margin: 30px auto 50px;
}
:deep() .el-dialog__body {
  padding-left: 60px;
  border-top: 1px solid #f3f3f3;
}
</style>