<script lang="ts" setup>
import { h, onMounted, ref, watch } from 'vue';
import type { DataTableColumns, DataTableRowKey, FormInst, RowData } from 'naive-ui';
import {
  NButton,
  NCard,
  NDataTable,
  NDialog,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NPagination,
  NRadio,
  NSpace,
  NSpin,
  useDialog,
  useMessage
} from 'naive-ui';
import { api_addRole, api_deleteRole, api_exportRoleData, api_getUserRole, api_menuPageGet, api_rolePage, api_updateRole } from '@/api';
import { roleRules } from '@/rules/rules';

const message = useMessage();

// 常量和响应式数据
const tableData = ref([]);
const authorityData = ref([]);
const createModal = ref(false);
const ids = ref<DataTableRowKey[]>([]);
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const title = ref('新增角色');
const range = ref<any>();
const pageData = ref({
  pageNum: 1,
  pageSize: 10,
  total: 10
});
const pageData1 = ref({
  pageNum: 1,
  pageSize: 20,
})
// 数据绑定
const formData = ref({
  id: '',
  roleName: '',
  roleRemark: '',
  permissionIds:[]
});
const serarchData = ref({
  pageNum: pageData.value.pageNum,
  pageSize: pageData.value.pageSize,
  rolename: '',
  startTime: '',
  endTime: ''
})

// 表格列配置
const tableColumn = [
  {
    type: 'selection' as const,
    width: 50
  },
  {
    title: '排序',
    key: 'id',
    align: 'center',
    width: 80
  },
  {
    title: '角色名称',
    key: 'roleName',
    align: 'center',
    minWidth: 200,
    treeConfig: {
      indent: 20,
      expandable: (row: any) => Boolean(row.children) && row.children.length > 0
    },
    render(row: any) {
      return h('span', null, row.roleName);
    }
  },
  {
    title: '描述',
    key: 'roleRemark',
    align: 'center',
    minWidth: 120
  },
  {
    title: '创建日期',
    key: 'createTime',
    align: 'center',
    minWidth: 180
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    minWidth: 120,
    render(row: any) {
      // 改用Vue推荐的方式创建元素
      return h(NSpace, { justify: 'center' }, [
        h(
          NButton,
          {
            size: 'small',
            style: {
              color: '#eee',
              backgroundColor: '#2196ed',
              borderColor: '#2196ed',
              borderRadius: '4px',
              padding: '4px 12px'
            },
            onClick: () => handleEdit(row)
          },
          [
            h('img', {
              src: '/src/assets/bianji.png',
              alt: '编辑',
              style: {
                width: '10px',
                height: '10px',
                marginRight: '5px'
              }
            }),
            '编辑'
          ]
        ),
        h(
          NButton,
          {
            size: 'small',
            style: {
              color: '#eee',
              backgroundColor: '#f16255',
              borderColor: '#f16255',
              borderRadius: '4px',
              padding: '4px 12px'
            },
            onClick: () => handleDelete(row)
          },
          [
            h('img', {
              src: '/src/assets/delete.png',
              alt: '删除',
              style: {
                width: '10px',
                height: '10px',
                marginRight: '5px'
              }
            }),
            '删除'
          ]
        )
      ]);
    }
  }
];

// 添加表单校验相关的引用和方法
const formRef = ref<InstanceType<typeof NForm>>();
  
  function handleSubmit() {
    if (!formRef.value) return;
    formRef.value.validate(async errors => {
      if (!errors) {
        let res = null;
        if(formData.value.id) {
          // 修改
          res = await api_updateRole(formData.value)
        } else {
          // 新增
          res = await api_addRole(formData.value)
        }
        if(res.data.code == 200){
          message.success('操作成功')
          search();
          createModal.value = false;
        }else{
          message.error(res.data.msg)
        }
      } else {
        console.log('表单校验失败', errors);
      }
    });
  }

function handleCheck(rowKeys: DataTableRowKey[]) {
  ids.value = rowKeys;
}

async function handleEdit(row: any) {
  title.value = '编辑用户'
  let res = await api_getUserRole(row.id)
  formData.value = res.data.data;
  createModal.value = true;
}
const dialog = useDialog();
function handleDelete(row: any) {
  dialog.create({
    title: '提示',
    content: '确定删除数据？',
    positiveText: '确定',
    negativeText: '取消',
    positiveButtonProps: {
      type: 'primary' // 设置确定按钮为蓝色
    },
    showIcon: false, // 去掉感叹号图标
    onPositiveClick: async () => {
      // 用户确认删除后执行删除操作
      let res = await api_deleteRole(row.id);
      if(res.data.code == 200){
        search()
        message.success('删除成功')
      }else{
        message.error(res.data.msg)
      }
    }
  });
}
//  头部新增
function handleAdd() {
  title.value = '新增角色'
  // 重置表单数据
  formData.value = {
    id: '',
    roleName: '',
    roleRemark: '',
    permissionIds:[]
  };

  createModal.value = true;
  
}
// 头部编辑
async function topCompile() {
  if (ids.value.length === 0) {
    message.error('请选择一个要编辑的用户');
  } else if (ids.value.length > 1) {
    message.error('只能编辑一个用户');
  } else {
    title.value = '编辑角色'
    console.log('编辑角色:', ids.value[0]);
    let res = await api_getUserRole(ids.value[0]);
    createModal.value = true;
    if(res.data.code == 200) {
      formData.value = res.data.data
    } else {
      message.error(res.data.msg)
    }
  }
}
// 头部删除
async function topDelete() {
  if (ids.value == null || ids.value.length == 0) {
    message.error('请选择要删除的角色');
  } else {
    dialog.create({
      title: '提示',
      content: '确定删除数据？',
      positiveText: '确定',
      negativeText: '取消',
      positiveButtonProps: {
        type: 'primary' // 设置确定按钮为蓝色
      },
      showIcon: false, // 去掉感叹号图标
      onPositiveClick: async () => {
        // 用户确认删除后执行删除操作
        let id = ids.value.join(',')
        // 用户确认删除后执行删除操作
        let res = await api_deleteRole(id);
        if (res.data.code == 200) {
          search()
          message.success('删除成功')
        } else {
          message.error(res.data.msg)
        }
      }
    });
  }
}
// 头部导出
async function topDerive() {
  if(ids.value == null || ids.value.length == 0){
    message.error('请选择要导出的角色');
  }else{
    let id = ids.value.join(',')
    let res = await api_exportRoleData(id);
    console.log(res);
    if(res.status == 200){
      let blob = res.data;
      let url = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      document.body.appendChild(a);
      a.href = url;
      a.download = '角色数据.xlsx';
      a.click();
      window.URL.revokeObjectURL(url);
      message.success('导出成功，请到下载目录查看')
    } else {
      message.error(res.msg)
    }
  }
}

function handleSearch() {
  search()
}

function watchTimeData(value: any) {
  serarchData.value.startTime = value[0];
  serarchData.value.endTime = value[1];
}
  

function handleReset() {
  serarchData.value = {
    pageNum: pageData.value.pageNum,
    pageSize: pageData.value.pageSize,
    rolename: '',
    startTime: '',
    endTime: ''
  }
  range.value = null

  search()
}

// 更新选中的权限
const updateCheckedKeys = async (keys:any) => {
  console.log("======= keys", keys)
  formData.value.permissionIds = keys;
}

async function search() {
  let res = await api_rolePage(serarchData.value);
  if(res.data.code == 200) {
    tableData.value = res.data.data.records;
    pageData.value = {
      pageNum: res.data.data.page,
      pageSize: res.data.data.pageSize,
      total: Number(res.data.data.total)
    } 
  } else {
    message.error(res.msg);
  }
}

async function authoritySearch(){
  let res = await api_menuPageGet(pageData1.value);
  if (res.data.code == 200) {
    console.log(res);
    
    authorityData.value = res.data.data.data[0].children;
  } else {
    message.error(res.msg);
  }
}

function handlePage() {
  serarchData.value.pageNum = pageData.value.pageNum;
  search();
}

function handlePageSize() {
  serarchData.value.pageSize = pageData.value.pageSize;
  pageData.value.pageNum = 1;
  serarchData.value.pageNum = 1;
  search();
}

function handleclear() {
  serarchData.value.startTime = ''
  serarchData.value.endTime = ''
}

onMounted(() => {
  search();
  authoritySearch();
})
</script>

<template>
  <div id="DepartmentPage">
    <NModal v-model:show="createModal">
      <NCard
        :title="title"
        style="width: 600px"
        @close="createModal = false"
      >
        <hr />
        <NForm
          ref="formRef"
          label-placement="left"
          label-width="auto"
          :rules="roleRules"
          :model="formData"
          style="margin-left: 20px; margin-top: 20px"
        >
          <NFormItem
            label="角色名称"
            path="roleName"
            require-mark-placement="left"
            style="margin-right: 20px"
          >
            <NInput v-model:value="formData.roleName" placeholder="请输入角色名称" />
          </NFormItem>
          <NFormItem
            label="角色描述"
            path="roleRemark"
            require-mark-placement="left"
            style="margin-right: 20px"
          >
            <NInput v-model:value="formData.roleRemark" placeholder="请输入角色描述" />
          </NFormItem>
          <NFormItem label="权限分配" require-mark-placement="left" style="margin-right: 20px">
            <div style="width: 100%; max-height: 400px; overflow-y: auto; border-radius: 4px; padding: 8px;  scrollbar-width: none;
                 -ms-overflow-style: none;">
            <NTree cascade block-node checkbox-placement="right" @update:checked-keys="updateCheckedKeys"
              :default-checked-keys="formData.permissionIds" checkable accordion show-line block-line :data="authorityData"
              key-field="index" label-field="name" default-expand-all></NTree>
            </div>
          </NFormItem>
        </NForm>

        <template #footer>
          <NSpace justify="end">
            <NButton @click="createModal = false">取消</NButton>
            <NButton type="primary" @click="handleSubmit">确认</NButton>
          </NSpace>
        </template>
      </NCard>
    </NModal>

    <div>
      <NSpin :show="show">
        <NCard size="medium">
          <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center">
            <NSpace>
              <div>
                角色名称
                <NInput
                  v-model:value="serarchData.rolename"
                  placeholder="请输入角色名称"
                  style="width: 200px; margin-left: 10px" clearable="true"
                />
              </div>
              <div style="display: flex; align-items: center; margin-left: 30px">
                <div>日期范围</div>
                <NDatePicker
                  v-model:value="range"
                  type="datetimerange"
                  @update:value="watchTimeData"
                  clearable
                  @clear="handleclear"
                  style="margin-left: 10px"
                />
              </div>

              <NButton
                color="#2198f2"
                style="padding: 0px 17px; border-radius: 5px; margin-left: 20px"
                @click="handleSearch"
              >
                查询
              </NButton>
              <NButton style="padding: 0px 17px; border-radius: 5px" @click="handleReset">重置</NButton>
            </NSpace>
          </div>
          <NSpace style="margin-bottom: 20px">
            <NButton color="#2198f2" style="padding: 0px 20px; border-radius: 5px" @click="handleAdd">
              <img src="@/assets/xinzeng.png" alt="" style="width: 10px; height: 10px; margin-right: 5px" />
              新增
            </NButton>
            <NButton color="#2198f2" style="padding: 0px 20px; border-radius: 5px" @click="topCompile">
              <img src="@/assets/bianji.png" alt="" style="width: 10px; height: 10px; margin-right: 5px" />
              编辑
            </NButton>
            <NButton color="#f36255" style="padding: 0px 20px; border-radius: 5px" @click="topDelete">
              <img src="@/assets/delete.png" alt="" style="width: 10px; height: 10px; margin-right: 5px" />
              删除
            </NButton>
            <NButton color="#ffbb01" style="padding: 0px 20px; border-radius: 5px" @click="topDerive">
              <img src="@/assets/daochu.png" alt="" style="width: 10px; height: 10px; margin-right: 5px" />
              导出
            </NButton>
          </NSpace>

          <NDataTable
            :row-key="row => row.id"
            :columns="tableColumn"
            :data="tableData"
            :bordered="true"
            :pagination="false"
            tree-column-key="name"
            @update:checked-row-keys="handleCheck"
          />

          <div style="display: flex; justify-content: end; margin-top: 30px;">
            <ElPagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
              :page-sizes="[10, 20, 30, 40]" background="#2196f3" layout="sizes, prev, pager, next"
              :total="pageData.total" @size-change="handlePageSize" @current-change="handlePage" />
          </div>
        </NCard>
      </NSpin>
    </div>
  </div>
</template>

<style scoped>
:deep(.n-form-item-content > div) {
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
}
:deep(.n-pagination .n-pagination-item.n-pagination-item--active) {
  background-color: #2196ed !important;
  color: white !important;
  border-color: #2196ed !important;
}
</style>
