<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,
  useDialog,
  useMessage
} from 'naive-ui';
import { api_addPos, api_deletePos, api_exportPosData, api_getUserPos, api_posPage, api_updatePos } from '@/api';
import { posRules } from '@/rules/rules';

const message = useMessage();

// 常量和响应式数据
const tableData = ref([]);
const createModal = ref(false);
const ids = ref<DataTableRowKey[]>([]);
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const range = ref<any>();
const title = ref('新增岗位');
const pageData = ref({
  pageNum: 1,
  pageSize: 10,
  total: 10
});

const formData = ref({
  id: '',
  posName: ''
});

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

// 表格列配置
const tableColumn = [
  {
    type: 'selection' as const,
    width: 50
  },
  {
    title: '排序',
    key: 'id',
    align: 'center',
    width: 80
  },
  {
    title: '岗位名称',
    key: 'posName',
    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.posName);
    }
  },
  {
    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'
              }
            }),
            '删除'
          ]
        )
      ]);
    }
  }
];

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_updatePos(formData.value);
      } else {
        // 新增
        res = await api_addPos(formData.value);
      }
      if (res.data.code == 200) {
        message.success('操作成功');
        search();
        createModal.value = false;
      } else {
        message.error(res.data.msg);
      }
    } else {
      console.log('表单校验失败', errors);
    }
  });
}

async function handleEdit(row: any) {
  title.value = '编辑岗位';
  const res = await api_getUserPos(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 () => {
      const res = await api_deletePos(row.id);
      if (res.data.code == 200) {
        search();
        message.success('删除成功');
      } else {
        message.error(res.data.msg);
      }
    }
  });
}

//  头部新增
function handleAdd() {
  title.value = '新增岗位';
  formData.value = {
    id: '',
    posName: ''
  };

  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_getUserPos(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_deletePos(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_exportPosData(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 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,
    posname: '',
    startTime: null,
    endTime: null
  };
  range.value = null;

  search();
}

async function search() {
  const res = await api_posPage(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);
  }
}

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 = null;
  serarchData.value.endTime = null;
}

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

<template>
  <div id="DepartmentPage">
    <NModal v-model:show="createModal">
      <NCard
        :title="title"
        style="width: 600px"
        closable
        :rules="posRules"
        :model="formData"
        @close="createModal = false"
      >
        <hr />
        <NForm ref="formRef" label-placement="left" label-width="auto" style="margin-left: 20px; margin-top: 20px">
          <NFormItem label="岗位名称" show-require-mark="true" require-mark-placement="left" style="margin-right: 20px">
            <NInput v-model:value="formData.posName" placeholder="请输入岗位名称" clearable="true" />
          </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.posname"
                  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"
                  style="margin-left: 10px"
                  type="datetimerange"
                  clearable="true"
                  @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.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-pagination .n-pagination-item.n-pagination-item--active) {
  background-color: #2196ed !important;
  color: white !important;
  border-color: #2196ed !important;
}
</style>
