<template>
  <div>
    <el-card class="box-card" shadow="never">
      <el-row>
        <el-col :span="16">
          <el-row>
            <el-button
              type="primary"
              @click="
                () => {
                  rowData = {};
                  visibleEdit = true;
                }
              "
              >新增人员</el-button
            >
            <el-button type="primary" @click="visibleEditRole = true"
              >新增角色</el-button
            >
            <el-button type="primary" @click="visibleRoleTable = true"
              >角色管理</el-button
            >
          </el-row>
        </el-col>
        <el-col :span="8" class="flex">
          <el-input v-model="query.key" placeholder="请输入" clearable />
          <el-button
            class="ml-2"
            type="primary"
            :icon="Search"
            @click="onSearch"
            :loading="loading"
            >查询</el-button
          >
        </el-col>
      </el-row>
      <!-- <el-row>
        <div class="mt-2">
          <div class="flex items-center">
            <el-text class="ml-2" tag="b">
              登录地址:
              <el-link type="primary" @click="handleJump(link)">{{
                link
              }}</el-link>
            </el-text>
            <ComponentCopy :content="link"></ComponentCopy>
          </div>
          <div class="flex items-center">
            <el-text class="ml-2" tag="b">
              大屏地址:
              <el-link type="primary" @click="handleJump(datavLink)">{{
                datavLink
              }}</el-link>
            </el-text>
            <ComponentCopy :content="datavLink"></ComponentCopy>
          </div>
        </div>
      </el-row> -->
    </el-card>
    <div class="mt-4">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="nickname" label="人员信息" width="250">
          <template #default="scope">
            <div>
              <el-text>姓名: </el-text>
              <el-text tag="b">{{ scope.row.nickname }}</el-text>
            </div>
            <div class="mt-2 flex items-center">
              <el-text>用户名: </el-text>
              <el-text tag="b">{{ scope.row.account }}</el-text>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="复制"
                placement="top"
              >
                <ComponentCopy :content="scope.row.account"></ComponentCopy>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="人员ID" width="250" />
        <el-table-column prop="roles" label="所属角色">
          <template #default="scope">
            <el-space :size="size" spacer="|">
              <div v-for="item in scope.row.roles" :key="item.id">
                <el-text> {{ item.name }}</el-text>
              </div>
            </el-space>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账户状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" class="ml-2" type="success"
              >正常</el-tag
            >
            <el-tag v-else class="ml-2" type="info">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="操作" width="180">
          <template #default="scope">
            <el-space :size="size" spacer="|">
              <Auth value="user:edit">
                <el-button type="primary" link @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
              </Auth>
              <el-link
                type="primary"
                @click="
                  () => {
                    visibleLargeDataScreen = true;
                    rowData = scope.row;
                  }
                "
                >设置</el-link
              >
              <el-popconfirm
                title="确定要删除此角色吗"
                @confirm="onDelete(scope.row.id)"
              >
                <template #reference>
                  <el-link type="danger">删除</el-link>
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-4 justify-end"
        background
        :current-page="query.page"
        :page-size="query.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="onChangePage"
      ></el-pagination>
    </div>
    <ComponentEditUserDialog
      v-model:show="visibleEdit"
      :rowData="rowData"
      @success="getList"
    ></ComponentEditUserDialog>
    <ComponentEditRoleDialog
      v-model:show="visibleEditRole"
    ></ComponentEditRoleDialog>
    <ComponentRoleTableDialog
      v-model:show="visibleRoleTable"
    ></ComponentRoleTableDialog>
    <ComponentEditLargeDataScreen
      v-model:show="visibleLargeDataScreen"
      :staffId="rowData.id"
    ></ComponentEditLargeDataScreen>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import { request } from "@/utils/http";
import { ElMessage } from "element-plus";

import ComponentEditUserDialog from "./components/EditUserDialog.vue";
import ComponentEditRoleDialog from "./components/EditRoleDialog.vue";
import ComponentRoleTableDialog from "./components/RoleTableDialog.vue";
import ComponentCopy from "@/components/Copy/index.vue";
import ComponentEditLargeDataScreen from "./components/EditLargeDataScreen.vue";

const { VITE_APP_ADDRESS, VITE_APP_LARGEN } = import.meta.env;
import { useUserStoreHook } from "@/store/modules/user";

const link = computed(() => {
  let channelAccount = useUserStoreHook()?.profile.account;
  return `${VITE_APP_ADDRESS}#/login?channel=${channelAccount}`;
});
const datavLink = computed(() => {
  let channelAccount = useUserStoreHook()?.profile.account;
  return `${VITE_APP_LARGEN}?channel=${channelAccount}`;
});
const tableData = ref([]);
const query = ref({
  page: 1,
  pageSize: 10,
  key: ""
});
const loading = ref(false);
const total = ref(0);

const visibleEdit = ref(false);
const visibleEditRole = ref(false);
const visibleRoleTable = ref(false);
const visibleLargeDataScreen = ref(false);

const rowData = ref({});

const handleJump = url => {
  window.open(url);
};

const getList = () => {
  loading.value = true;
  request
    .get("/mechanism/staff/paginate", {
      params: query.value
    })
    .then(resp => {
      tableData.value = resp.data.list;
      total.value = resp.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const onSearch = () => {
  query.value.page = 1;
  getList();
};
const onChangePage = page => {
  query.value.page = page;
  getList();
};
const handleEdit = row => {
  rowData.value = row;
  visibleEdit.value = true;
};

const onDelete = id => {
  request.post("/mechanism/staff/delete", { id }).then(resp => {
    ElMessage.success(resp.message);
    getList();
  });
};

/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
  if (code === "Enter") {
    onSearch();
  }
}

onMounted(() => {
  window.document.addEventListener("keypress", onkeypress);
});

onBeforeUnmount(() => {
  window.document.removeEventListener("keypress", onkeypress);
});

const initData = () => {
  getList();
};
initData();
</script>
