<template>
  <div>
    <div class="mb-8 mt-8 relative">
      <h1 class="text-center text-lg">我的文章</h1>
      <div class="absolute top-0 right-[5%]">
        <n-button type="primary" @click="add">写文章</n-button>
      </div>
    </div>
    <div class="table w-[95%] mx-auto">
      <n-data-table :columns="columns" striped :single-line="false" :paginate-single-page="false"
        :pagination="pagination" :data="artiList">
        <template #empty>
          <div>
            <span>您还未发表过文章，</span><span class="text-pp-200 hover:underline" @click="add">去写一篇 ></span>
          </div>
        </template>
      </n-data-table>
    </div>

    <n-drawer v-model:show="dshow" :width="702" :mask-closable="false">
      <n-drawer-content  :native-scrollbar="false" class="pb-6" :title="dtitle"  closable>
        <!-- <n-scrollbar class="h-full"> -->
          <artiView v-if="show == 'view'" :id="opId" />
          <edition v-if="show == 'add'" :id="-1" @close="handdleCloseEditor" />
          <edition v-if="show == 'edit'" :id="curId" @close="handdleCloseEditor" />
        <!-- </n-scrollbar> -->
      </n-drawer-content>
    </n-drawer>

    <n-modal v-model:show="showModal" preset="dialog" title="删除" content="是否永久删除该文章？" positive-text="确认"
      negative-text="取消" @positive-click="submitCallback" @negative-click="cancelCallback" />

  </div>
</template>

<script setup>
import edition from '@/components/edition.vue';
import { onMounted, ref } from 'vue';
import artiView from './view.vue';



const dshow = ref(false)
const showModal = ref(false)
const artiList = ref([])
const pagination = ref({
  pageSize: 10,
})

const dtitle = ref('');
const opId = ref(-1);
const curId = ref(-1);
const delId = ref(-1);
const show = ref('')
const columns = createColumns({
  view: (row) => {
    dshow.value = true
    dtitle.value = '文章预览'
    opId.value = row.id
    show.value = 'view'
  },
  edit: (row) => {
    dshow.value = true
    dtitle.value = '编辑文章'
    curId.value = row.id
    show.value = 'edit'
  },
  remove: (row) => {
    showModal.value = true
    delId.value = row.id
  }
})



function createColumns({ edit, remove, view }) {
  return [
    {
      title: '序号',
      key: 'key',
      align: 'center',
      width: "80",
      render: (_, index) => {
        return `${index + 1}`
      }
    },
    {
      title: "标题",
      align: 'center',
      width: "300",
      key: "title"
    },
    {
      title: "简介",
      align: 'center',
      key: "pro",
      ellipsis: {
        tooltip: true
      }
    },
    {
      title: "操作",
      align: 'center',
      key: "actions",
      width: "200",
      render(row) {
        return h(
          'div',
          [
            h(NButton,
              {
                type: "primary",
                text: true,
                size: "small",
                onClick: () => view(row)
              },
              { default: () => "预览" }
            ),
            h(NButton,
              {
                type: "primary",
                text: true,
                size: "small",
                style: "margin-left: 10px",
                onClick: () => edit(row)
              },
              { default: () => "编辑" }
            ),
            h(NButton,
              {
                type: "primary",
                text: true,
                style: "margin-left: 10px",
                size: "small",
                onClick: () => remove(row)
              },
              { default: () => "删除" }
            ),
          ]
        );
      }
    }
  ];
};
function add() {
  dshow.value = true
  dtitle.value = '新建文章'
  show.value = 'add'
}
onMounted(() => {
  getList()
})
async function getList() {
  // 获取文章列表
  const res = await $http.art.myArti()
  artiList.value = res.data
}
function handdleCloseEditor() {
  dshow.value = false
  show.value = ''
  dtitle.value = ''
  curId.value = -1
  getList()
}
async function submitCallback() {
  const res = await $http.art.deleteArti(delId.value)
  if (res.code == 1) $msg.success(res.msg)
  else $msg.error(res.msg)
  showModal.value = false
  delId.value = -1
  getList()
}

function cancelCallback() {
  showModal.value = false
  delId.value = -1
}
</script>

<style scoped></style>
