<template>
  <el-card>
    <el-form>
      <el-form-item>
        <el-row :gutter="20" style="width: 100%">
          <el-col :span="20">
            <span style="box-shadow: 1 0 1px #c0c4cc"
              ><el-input v-model="article.title" placeholder="请输入博客标题"
            /></span>
          </el-col>
          <el-col :span="4">
            <el-button
              color="#626aef"
              style="width: 100%; height: 100%"
              @click="publishDialogVisible = true"
              >发布文章</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <v-md-editor
          v-model="article.content"
          height="calc(100vh - 290px)"
          placeholder="在vuepress主题中, 您可以使用tip功能噢~"
        />
      </el-form-item>
    </el-form>
    <!-- 在弹窗中选择标签、分类、文章图片 -->
    <el-dialog v-model="publishDialogVisible" title="后台权限设置" width="40%">
      <el-form :model="article" label-position="left">
        <!-- 文章分类 -->
        <el-form-item label="文章分类">
          <el-tag
            type="success"
            v-show="article.category"
            :closable="true"
            size="large"
            @close="removeCategory"
          >
            {{ article.category }}
          </el-tag>
          <!-- 分类选项 -->
          <el-popover
            v-if="!article.category"
            placement="bottom-start"
            :width="400"
            trigger="click"
            :hide-after="50"
          >
            <div class="popover-title">分类</div>
            <template #reference>
              <el-button type="success" plain>添加分类</el-button>
            </template>
            <div class="popover-container">
              <div
                v-for="item of categoryList"
                :key="item.id"
                class="category-item"
                @click="addCategory(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </el-popover>
        </el-form-item>
        <!-- 文章标签 -->
        <el-form-item label="文章标签">
          <el-tag
            v-for="item in article.tagList"
            :key="item._id"
            :closable="true"
            size="large"
            style="margin-right: 8px"
            @close="removeTag(item)"
          >
            {{ item.name }}
          </el-tag>
          <!-- 标签选项 -->
          <el-popover
            v-if="article.tagList.length < 3"
            placement="bottom-start"
            :width="400"
            trigger="click"
            :hide-after="50"
          >
            <template #reference>
              <el-button type="primary" plain>添加标签</el-button>
            </template>
            <div class="popover-title">标签</div>
            <div class="popover-container">
              <el-tag
                v-for="item of tagList"
                :key="item._id"
                class="tag-item"
                @click="addTag(item)"
              >
                {{ item.name }}
              </el-tag>
            </div>
          </el-popover>
        </el-form-item>
        <!-- 文章封面 -->
        <el-form-item label="上传封面">
          <Upload :url="article.cover" :width="360" :height="180" @upload="upload" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button color="#626AEF" plain @click="publishDialogVisible = false">取消</el-button>
          <el-button color="#626AEF" @click="publishArticle"> 发布 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Upload from '@/components/Upload.vue'
import { useRoute } from 'vue-router'
import { getArticleById, postArticle } from '../../api/article'
import { getTagList } from '../../api/tag'
import { getCategoryList } from '../../api/category'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const route = useRoute()
const article = ref({
  _id: '',
  cover: 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png',
  title: '',
  content: '',
  tagList: [],
  category: '',
  createTime: null,
  updateTime: null
})
const publishDialogVisible = ref(false) // 发布弹窗的可视与否
const categoryList = ref([])
const tagList = ref([])

onMounted(async () => {
  // 当路由中携带有id信息时表示编辑已有文章
  if (route.params.id) {
    const { data } = await getArticleById(route.params.id)
    article.value = data
    console.log(article.value)
  }
  // 获取所有标签列表
  tagList.value = (await getTagList()).data
  // 获取所有分类列表
  categoryList.value = (await getCategoryList()).data
})

watch(
  () => route.path,
  async () => {
    if (route.params.id) {
      const { data } = await getArticleById(route.params.id)
      article.value = data
      console.log(article.value)
    } else {
      article.value = {
        _id: '',
        cover: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-6dqemx.jpg',
        title: '',
        content: '',
        tagList: [],
        category: '',
        createTime: null,
        updateTime: null
      }
    }
  }
)

const removeCategory = () => {
  article.value.category = null
}

const addCategory = (item) => {
  article.value.category = item.name
}

const addTag = (item) => {
  if (
    article.value.tagList.length < 3 &&
    article.value.tagList.findIndex((it) => it._id === item._id) === -1
  ) {
    // 当文章标签列表长度小于3且选中的标签不在文章标签列表中时才会添加
    article.value.tagList.push(item)
  }
}

const removeTag = (item) => {
  const idx = article.value.tagList.findIndex((it) => it.id === item.id)
  article.value.tagList.splice(idx, 1)
}

// 发布文章
const publishArticle = async () => {
  publishDialogVisible.value = false
  if (article.value._id === '') {
    article.value.createTime = dayjs(new Date()).format('YYYY-MM-DD')
  }
  article.value.updateTime = dayjs(new Date()).format('YYYY-MM-DD')
  console.log(article.value)
  const { code, message } = await postArticle(article)
  if (code === 200) {
    ElMessage({
      type: 'success',
      message
    })
  }
}

// 利用父子组件的传值来进行赋值
const upload = (url) => {
  // 将子组件Upload中获取的图片url赋值给article的cover
  article.value.cover = url
}
</script>

<style lang="scss" scoped>
.popover-title {
  text-align: center;
  margin-bottom: 10px;
}
.popover-container {
  margin-top: 1rem;
  height: 200px;
  overflow-y: auto;
  .category-item {
    cursor: pointer;
    padding: 0.6rem 0.5rem;
  }
  .category-item:hover {
    background-color: #f0f9eb;
    color: #67c23a;
  }
  .tag-item {
    cursor: pointer;
    margin: 0 10px 10px 0;
  }
}
</style>
