<script lang="ts" setup>
import { h, onMounted, ref, watch } from 'vue';
import type { DataTableColumns, DataTableRowKey, RowData } from 'naive-ui';
import {
  NButton,
  NCard,
  NDataTable,
  NDialog,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NPagination,
  NRadio,
  NSpace,
  NSpin,
  NTreeSelect,
  useDialog,
  useMessage
} from 'naive-ui';
import { isDayjs } from 'dayjs';
import {
  api_addDep,
  api_deleteDep,
  api_depPage,
  api_exportDepData,
  api_getDepList,
  api_getUserDep,
  api_updateDep
} from '@/api';
import { depRules } from '@/rules/rules';

const message = useMessage();

// 常量和响应式数据
const tableData = ref([]);
const createModal = ref(false);
const form = ref<any>({});
const ids = ref<DataTableRowKey[]>([]);
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const range = ref<any>();
const title = ref('新增部门');
const isTop = ref(false);
// 顶级部门树
const depOptions = ref([]);
const pageData = ref({
  pageNum: 1,
  pageSize: 10,
  total: 10
});
// 单选
const songs = [
  {
    value: 'true',
    label: '是'
  },
  {
    value: 'false',
    label: '否'
  }
].map(s => {
  s.value = s.value.toLowerCase();
  return s;
});

const formData = ref({
  id: '',
  depName: '',
  isTop: true,
  parentResourceNo: ''
});

const serarchData = ref({
  pageNum: pageData.value.pageNum,
  pageSize: pageData.value.pageSize,
  depName: '',
  startTime: null,
  endTime: null
});

// 表格列配置
const tableColumn = [
  {
    type: 'selection' as const,
    width: 50
  },
  {
    title: '排序',
    key: 'index',
    align: 'center',
    width: 300,
    tree: false
  },
  {
    title: '部门名称',
    key: 'name',
    minWidth: 150,
    tree: true,
    treeConfig: {
      indent: 20,
      expandable: (row: any) => Boolean(row.children) && row.children.length > 0
    },
    render(row: any) {
      return h('span', null, row.name);
    }
  },
  {
    title: '创建日期',
    key: 'createTime',
    align: 'center',
    minWidth: 180
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    minWidth: 120,
    render(row: any) {
      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'
              }
            }),
            '删除'
          ]
        )
      ]);
    }
  }
];

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

// 添加表单校验相关的引用和方法
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_updateDep(formData.value);
      } else {
        // 新增
        res = await api_addDep(formData.value);
      }

      if (res.data.code == 200) {
        message.success('操作成功');
        search();
        createAllData();
        createModal.value = false;
      } else {
        message.error(res.data.msg);
      }
    } else {
      console.log('表单校验失败', errors);
    }
  });
}

async function handleEdit(row: any) {
  title.value = '编辑部门';
  // 编辑逻辑
  const res = await api_getUserDep(row.index);

  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 () => {
      const res = await api_deleteDep(row.index);
      if (res.data.code == 200) {
        search();
        message.success('删除成功');
      } else {
        message.error(res.data.msg);
      }
    }
  });
}

//  头部新增
function handleAdd() {
  title.value = '新增部门';
  formData.value = {
    id: '',
    depName: '',
    isTop: true,
    parentResourceNo: ''
  };
  isTop.value = false;
  createModal.value = true;
}

// 头部编辑
async function topCompile() {
  if (ids.value.length === 0) {
    message.error('请选择一个要编辑的部门');
  } else if (ids.value.length > 1) {
    message.error('只能编辑一个部门');
  } else {
    title.value = '编辑部门';
    const res = await api_getUserDep(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 () => {
        const id = ids.value.join(',');
        // 用户确认删除后执行删除操作
        const res = await api_deleteDep(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 {
    const id = ids.value.join(',');
    const res = await api_exportDepData(id);
    console.log(res);
    if (res.status == 200) {
      const blob = res.data;
      const url = window.URL.createObjectURL(blob);
      const 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 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 handleReset() {
  serarchData.value = {
    pageNum: pageData.value.pageNum,
    pageSize: pageData.value.pageSize,
    depName: '',
    startTime: null,
    endTime: null
  };
  range.value = null;

  search();
}

async function search() {
  const res = await api_depPage(serarchData.value);
  if (res.data.code == 200) {
    console.log(res);
    if (res.data.data.data == null) {
      res.data.data.data = [];
    }
    tableData.value = res.data.data.data;
    pageData.value.total = Number(res.data.data.total);
  } else {
    message.error(res.msg);
  }
}

// 新增下拉树
async function createAllData() {
  const depRes = await api_getDepList();

  if (depRes.data.code == 200) {
    depOptions.value = depRes.data.data.data[0].children;
  } else {
    message.error(depRes.msg);
  }
}

function change() {
  console.log(formData.value.isTop);
  const res = String(formData.value.isTop);
  if (res == 'true') {
    isTop.value = false;
    formData.value.parentResourceNo = '0';
  } else {
    isTop.value = true;
  }
}

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

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

function treeData(data: any) {
  formData.value.parentResourceNo = data;
}

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

<template>
  <div id="DepartmentPage">
    <NModal v-model:show="createModal">
      <NCard :title="title" style="width: 600px" closable @close="createModal = false">
        <hr />
        <NForm
          ref="formRef"
          v-model:model-value="form"
          :rules="depRules"
          label-placement="left"
          label-width="auto"
          style="margin-left: 20px; margin-top: 20px"
        >
          <NFormItem
            name="name"
            label="部门名称"
            show-require-mark="true"
            require-mark-placement="left"
            style="margin-right: 20px"
          >
            <NInput v-model:value="formData.depName" placeholder="请输入部门名称" />
          </NFormItem>
          <NFormItem label="顶级部门" show-require-mark="true" require-mark-placement="left">
            <NRadioGroup v-model:value="formData.isTop" name="radiogroup" @update:value="change()">
              <NSpace>
                <NRadio v-for="song in songs" :key="song.value" :value="song.value">
                  {{ song.label }}
                </NRadio>
              </NSpace>
            </NRadioGroup>
          </NFormItem>
          <div v-if="isTop">
            <NFormItem label="上级部门" show-require-mark="true" require-mark-placement="left">
              <NTreeSelect
                v-model:value="formData.parentResourceNo"
                :options="depOptions"
                placeholder="请选择部门"
                label-field="name"
                key-field="index"
                children-field="children"
                @update:value="treeData"
              />
            </NFormItem>
          </div>
        </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.depName"
                  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"
                  clearable
                  style="margin-left: 10px"
                  @update:value="watchTimeData"
                  @clear="handleclear"
                />
              </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.index"
            :columns="tableColumn"
            :data="tableData"
            :bordered="true"
            :pagination="false"
            :cascade="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-pagination .n-pagination-item.n-pagination-item--active) {
  background-color: #2196ed !important;
  color: white !important;
  border-color: #2196ed !important;
}
</style>
