<template>
  <div class="outside">
    <!-- 组件的内容 -->
    <!-- 网站信息 -->
    <div class="card-content1 shadow-box background-opacity">
      <el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="currentUser.avatar"></el-avatar>
      <div class="web-name">{{currentUser.username}}</div>
      <div class="web-info">
        <div class="blog-info-box">
          <span>博客</span>
          <span id="totalBlogNum" class="blog-info-num"></span>
        </div>
        <div class="blog-info-box">
          <span>分类</span>
          <span id="labelTotalNum"  class="blog-info-num"></span>
        </div>
        <div class="blog-info-box">
          <span>访问量</span>
          <span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
        </div>
      </div>
      <a class="collection-btn" @click="showTip()">
        <i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
      </a>
    </div>
  <div style="display: inline-block;position: absolute;left: 470px;top: 208px; width: fit-content">
    <!-- 写博客按钮 -->
    <button class="write-blog-btn" @click="showEditor = true">
      ✍️ 写个人博客
    </button>
    <div style="text-align: center;display: inline-block">
      <button class="publicBlog"  @click="showPostEditor = true">✍️ 写公开博客</button>
    </div>
  </div>
    <!--公开文章框-->
    <div id="editorPost" v-if="showPostEditor" style="background-color: #efe5fa;padding-bottom: 10px">
      <div>
        <el-tag effect="dark" class="my-tag">
          <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
            <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
            <path
              d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
              fill="#FFAA44"></path>
            <path
              d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
              fill="#11AA66"></path>
            <path
              d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
              fill="#FFFFFF"></path>
          </svg>
          文章信息
        </el-tag>
        <el-form :model="article" :rules="rules" ref="ruleForm" label-width="150px"
                 class="demo-ruleForm">
          <el-form-item label="标题" prop="articleTitle">
            <el-input maxlength="30" v-model="article.articleTitle"></el-input>
          </el-form-item>

          <el-form-item label="内容" prop="articleContent">
            <mavon-editor ref="md" @imgAdd="imgAdd" v-model="article.articleContent"/>
          </el-form-item>

          <el-form-item label="是否启用评论" prop="commentStatus">
            <el-tag :type="article.commentStatus === false ? 'danger' : 'success'"
                    disable-transitions>
              {{article.commentStatus === false ? '否' : '是'}}
            </el-tag>
            <el-switch v-model="article.commentStatus"></el-switch>
          </el-form-item>

          <el-form-item label="是否推荐" prop="recommendStatus">
            <el-tag :type="article.recommendStatus === false ? 'danger' : 'success'"
                    disable-transitions>
              {{article.recommendStatus === false ? '否' : '是'}}
            </el-tag>
            <el-switch v-model="article.recommendStatus"></el-switch>
          </el-form-item>

          <el-form-item label="是否可见" prop="viewStatus">
            <el-tag :type="article.viewStatus === false ? 'danger' : 'success'"
                    disable-transitions>
              {{article.viewStatus === false ? '否' : '是'}}
            </el-tag>
            <el-switch v-model="article.viewStatus"></el-switch>
          </el-form-item>

          <el-form-item v-if="article.viewStatus === false" label="不可见时的访问密码" prop="password">
            <el-input maxlength="30" v-model="article.password"></el-input>
          </el-form-item>

          <el-form-item v-if="article.viewStatus === false" label="密码提示" prop="tips">
            <el-input maxlength="60" v-model="article.tips"></el-input>
          </el-form-item>

          <el-form-item label="封面" prop="articleCover">
            <div style="display: flex">
              <el-input v-model="article.articleCover"></el-input>
              <el-image class="table-td-thumb"
                        lazy
                        style="margin-left: 10px"
                        :preview-src-list="[article.articleCover]"
                        :src="article.articleCover"
                        fit="cover"></el-image>
            </div>
            <uploadPicture :isAdmin="true" :prefix="'articleCover'" style="margin-top: 10px" @addPicture="addArticleCover"
                           :maxSize="2"
                           :maxNumber="1"></uploadPicture>
          </el-form-item>
          <el-form-item label="分类" prop="sortId">
            <el-select v-model="article.sortId" placeholder="请选择分类">
              <el-option
                v-for="item in sorts"
                :key="item.id"
                :label="item.sortName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="labelId">
            <el-select v-model="article.labelId" placeholder="请选择标签">
              <el-option
                v-for="item in labelsTemp"
                :key="item.id"
                :label="item.labelName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="myCenter" style="margin-bottom: 22px">
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
        </div>
      </div>
    </div>
    <!-- 编辑框 -->
    <div id="editorArea" class="blog-editor" v-if="showEditor">
      <textarea id ="areaTitle" class="blog-editor-title" v-model="blogContentTitle"  placeholder="请输入博客标题..."></textarea>
      <div class="labelSelect">
      <label for="category">选择博客分类：</label>
        <select id="category" name="category" v-model="selectedCategoryIndex">
          <option v-for="(label, index) in blogLabels" :value="index" :key="index">{{ label }}</option>
        </select>
      </div>
      <textarea id = "areaContent" class="blog-editor-content" v-model="blogContent"  placeholder="请输入博客正文..."></textarea>
      <div style="display: inline-block;margin-top: 17px">
        <el-upload
          class="upload-demo"
          ref="upload"
          multiple
          drag
          :action="$constant.qiniuUrl"
          :on-change="handleChange"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-remove="handleRemove"
          :http-request="customUpload"
          :list-type="listType"
          :accept="accept"
          :limit="maxNumber"
          :auto-upload="false">
          <div class="el-upload__text">
            <svg viewBox="0 0 1024 1024" width="40" height="40">
              <path
                d="M666.2656 629.4528l-113.7664-112.4864c-20.7872-20.5824-54.3232-20.5312-75.1104 0.1024l-113.3056 112.4864c-20.8896 20.736-21.0432 54.528-0.256 75.4688 20.736 20.8896 54.528 21.0432 75.4688 0.256l22.6304-22.4256v189.5936c0 29.44 23.9104 53.3504 53.3504 53.3504s53.3504-23.9104 53.3504-53.3504v-189.5424l22.6816 22.4256a53.1456 53.1456 0 0 0 37.5296 15.4112c13.7728 0 27.4944-5.2736 37.9392-15.8208 20.6336-20.9408 20.4288-54.7328-0.512-75.4688z"
                fill="#FFE37B"></path>
              <path
                d="M820.992 469.504h-5.376c-3.072-163.328-136.3456-294.8096-300.4416-294.8096S217.856 306.1248 214.784 469.504H209.408c-100.7104 0-182.3744 81.664-182.3744 182.3744s81.664 182.3744 182.3744 182.3744h209.7664V761.856c-30.208 5.5808-62.464-3.3792-85.6576-26.7264-37.3248-37.5808-37.0688-98.5088 0.512-135.7824l113.3056-112.4864c37.2224-36.9664 97.8432-37.0176 135.168-0.1536l113.7664 112.4864c18.2272 18.0224 28.3648 42.0864 28.5184 67.7376 0.1536 25.6512-9.728 49.8176-27.7504 68.0448a95.40096 95.40096 0 0 1-68.3008 28.5184c-5.9392 0-11.776-0.512-17.5104-1.5872v72.3456h209.7664c100.7104 0 182.3744-81.664 182.3744-182.3744S921.7024 469.504 820.992 469.504z"
                fill="#8C7BFD"></path>
            </svg>
            <div>拖拽 / 点击上传封面</div>
          </div>
          <template v-if="listType === 'picture'">
            <div slot="tip" class="el-upload__tip">
              一次最多上传{{maxNumber}}张图片，且每张图片不超过{{maxSize}}M！
            </div>
          </template>
          <template v-else>
            <div slot="tip" class="el-upload__tip">
              一次最多上传{{maxNumber}}个文件，且每个文件不超过{{maxSize}}M！
            </div>
          </template>

        </el-upload>
        <el-button type="success" style="font-size: 12px" @click="submitUpload">
          上传
        </el-button>
      </div>
      <div class="editor-btns">
        <button class="cancel-btn" @click="cancelEdit">取消</button>
        <button class="publish-btn" @click="saveBlog" v-if="showPublishBtn" >发布</button>
        <button @click="updateBlog" class="publish-btn"  v-if="showUpdateBtn">更新</button>
      </div>

    </div>
    <br/><br/>
    <!-- 推荐博客 -->
    <div class="card-content2-title">
      <i class="el-icon-reading card-content2-icon"></i>
      <span style="font-size: 28px">我的个人博客</span>
    </div>
    <div v-if="!$common.isEmpty(articles)" class="blog-card-container">
      <div v-for="(article, index) in articles.slice().reverse()" :key="index" class="blog-card">
        <div class="blog-card-header">
          <div class="author">{{ article.username }}</div>
          <div class="title" >{{ article.articleTitle }}</div>
        </div>
        <div class="blog-card-cover" >
          <img :src="'http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/' + article.articleCover" alt="Cover Image" width="100%">
        </div>
        <div class="blog-card-content" >
          {{ article.articleContent }}
        </div>
        <div class="blog-card-footer">
          <div class="label">{{ article.labelName }}</div>
          <div class="date"><i class="el-icon-date" style="color: var(--greyFont)"></i>发布于 {{ article.createTime }}</div>
          <br/>
          <div class="date">最近更新于 {{ article.updateTime }}</div>
          <div class="actions">
            <div class="delete-icon" @click="deleteArticle(article)">
              <img src="../assets/file/delete.png" alt="Delete Icon" width="26px" height="26px">
            </div>
            <div class="update-icon" @click="updateArticle(article)">
              <img src="../assets/file/update.png" alt="Update Icon" width="30px" height="30px">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import * as events from "events";
import upload from '../utils/ajaxUpload';
const uploadPicture = () => import( "./common/uploadPicture");
export default {
  components: {
    uploadPicture
  },
  avatar: {
    type: String
  },
  // 组件的逻辑和配置
  data() {
    return {
      id: this.$route.query.id,
      article: {
        articleTitle: "",
        articleContent: "",
        commentStatus: true,
        recommendStatus: false,
        viewStatus: true,
        password: "",
        tips: "",
        articleCover: "",
        sortId: null,
        labelId: null
      },
      sorts: [],
      labels: [],
      labelsTemp: [],
      rules: {
        articleTitle: [
          {required: true, message: '请输入标题', trigger: 'change'}
        ],
        articleContent: [
          {required: true, message: '请输入内容', trigger: 'change'}
        ],
        commentStatus: [
          {required: true, message: '是否启用评论', trigger: 'change'}
        ],
        recommendStatus: [
          {required: true, message: '是否推荐', trigger: 'change'}
        ],
        viewStatus: [
          {required: true, message: '是否可见', trigger: 'change'}
        ],
        articleCover: [
          {required: true, message: '封面', trigger: 'change'}
        ],
        sortId: [
          {required: true, message: '分类', trigger: 'change'}
        ],
        labelId: [
          {required: true, message: '标签', trigger: 'blur'}
        ]
      },
      pagination: {
        current: 1,
        size: 5,
        recommendStatus: true
      },
      currentUser: this.$store.state.currentUser,
      recommendArticles: [],
      admires: [],
      showAdmireDialog: false,
      articleSearch: "",
      showEditor: false,
      showPostEditor: false,
      showUpdateBtn: false,
      showPublishBtn: true,
      blogContent: "",
      blogContentTitle:"",
      blogLabelName: "",
      articles: [] , // 存储文章列表
      labelTotalNum: 0,
      articleUp: {
        id: 1,
        articleTitle: "",
        articleContent: "",
        userId: 1,
        username: "",
        sortId: 1,
        labelId: 0,
        labelName: "研发",
        articleCover: ""
      },
      file:"",
      blogLabels:[],
      selectedCategoryIndex: 0, // 默认选中第一个选项
    }
  },
  computed: {
    events() {
      return events
    },
    webInfo() {
      return this.$store.state.webInfo;
    },
    sortInfo() {
      return this.$store.state.sortInfo;
    }
  },
  watch: {
    'article.sortId'(newVal, oldVal) {
      if (oldVal !== null) {
        this.article.labelId = null;
      }
      if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
        this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
      }
    }
  },
  created() {
    this.getRecommendArticles();
    this.getAdmire();
    this.getUserArticles(); // 调用获取用户文章列表的方法
    this.getUserArticleLabelTotalNum();// 调用获取用户文章的标签种类数的方法
    this.getBlogLabels();//调用获取标签分类的方法
    this.getSortAndLabel();
    console.log('getUserArticleLabelTotalNum is called');

  },
  methods: {
    imgAdd(pos, file) {
      let suffix = "";
      if (file.name.lastIndexOf('.') !== -1) {
        suffix = file.name.substring(file.name.lastIndexOf('.'));
      }
      let key = "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;

      let storeType = localStorage.getItem("defaultStoreType");

      let fd = new FormData();
      fd.append("file", file);
      fd.append("key", key);
      fd.append("relativePath", key);
      fd.append("type", "articlePicture");
      fd.append("storeType", storeType);

      if (storeType === "local") {
        this.saveLocal(pos, fd);
      } else if (storeType === "qiniu") {
        this.saveQiniu(pos, fd);
      }
    },
    saveLocal(pos, fd) {
      this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, true)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            let url = res.data;
            this.$refs.md.$img2Url(pos, url);
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    saveQiniu(pos, fd) {
      this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")}, true)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            fd.append("token", res.data);

            this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
              .then((res) => {
                if (!this.$common.isEmpty(res.key)) {
                  let url = this.$constant.qiniuDownload + res.key;
                  let file = fd.get("file");
                  this.$common.saveResource(this, "articlePicture", url, file.size, file.type, "qiniu", true);
                  this.$refs.md.$img2Url(pos, url);
                }
              })
              .catch((error) => {
                this.$message({
                  message: error.message,
                  type: "error"
                });
              });
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    addArticleCover(res) {
      this.article.articleCover = res;
    },
    getSortAndLabel() {
      this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.sorts = res.data.sorts;
            this.labels = res.data.labels;
            if (!this.$common.isEmpty(this.id)) {
              this.getArticle();
            }
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    getArticle() {
      this.$http.get(this.$constant.baseURL + "/admin/article/getArticleById", {id: this.id}, true)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.article = res.data;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    submitForm(formName) {
      if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) {
        this.$message({
          message: "文章不可见时必须输入密码！",
          type: "error"
        });
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$common.isEmpty(this.id)) {
            this.saveArticle(this.article, "/article/saveArticle")
          } else {
            this.article.id = this.id;
            this.saveArticle(this.article, "/article/updateArticle")
          }
        } else {
          this.$message({
            message: "请完善必填项！",
            type: "error"
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (!this.$common.isEmpty(this.id)) {
        this.getArticle();
      }
    },
    saveArticle(value, url) {
      this.$confirm('确认保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        center: true
      }).then(() => {
        this.$http.post(this.$constant.baseURL + url, value, true)
          .then((res) => {
            this.$message({
              message: "保存成功！",
              type: "success"
            });
            // this.$router.push({path: '/postList'});
            this.showPostEditor = false;
            this.article.articleContent = "";
            this.article.articleCover = "";
            this.article.articleTitle = "";
            this.article.sortId = "";
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消保存!'
        });
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },

    customUpload(options) {
      let suffix = "";
      if (options.file.name.lastIndexOf('.') !== -1) {
        suffix = options.file.name.substring(options.file.name.lastIndexOf('.'));
      }

      let key = this.prefix + "/" + (!this.$common.isEmpty(this.$store.state.currentUser.username) ? (this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id) : (this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id)) + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;

      if (this.storeType === "local") {
        let fd = new FormData();
        fd.append("file", options.file);
        fd.append("key", key);
        fd.append("relativePath", key);
        fd.append("type", this.prefix);
        fd.append("storeType", this.storeType);
        this.articleUp.articleCover = fd;
        console.log(this.articleUp.articleCover+"fd");
        console.log(options.file+"options.file");
        return this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, this.isAdmin);
      } else if (this.storeType === "qiniu") {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.$constant.baseURL + "/qiniu/getUpToken?key=" + key, false);
        if (this.isAdmin) {
          xhr.setRequestHeader("Authorization", localStorage.getItem("adminToken"));
        } else {
          xhr.setRequestHeader("Authorization", localStorage.getItem("userToken"));
        }

        try {
          xhr.send();
          const res = JSON.parse(xhr.responseText);
          if (res !== null && res.hasOwnProperty("code") && res.code === 200) {
            options.data = {
              token: res.data,
              key: key
            };
            return upload(options);
          } else if (res !== null && res.hasOwnProperty("code") && res.code !== 200) {
            return Promise.reject(res.message);
          } else {
            return Promise.reject("服务异常！");
          }
        } catch (e) {
          return Promise.reject(e.message);
        }
      }
    },

    // 文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      let url;
      if (this.storeType === "local") {
        url = response.data;
      } else if (this.storeType === "qiniu") {
        url = this.$constant.qiniuDownload + response.key;
        this.$common.saveResource(this, this.prefix, url, file.size, file.raw.type, "qiniu", this.isAdmin);
      }
      this.$emit("addPicture", url);
    },
    handleError(err, file, fileList) {
      this.$message({
        message: err,
        type: "error"
      });
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
    },
    // 添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      let flag = false;

      if (file.size > this.maxSize * 1024 * 1024) {
        this.$message({
          message: "图片最大为" + this.maxSize + "M！",
          type: "warning"
        });
        flag = true;
      }

      if (flag) {
        fileList.splice(fileList.size - 1, 1);
      }
    },
    selectSort(sort) {
      this.$emit("selectSort", sort);
    },
    selectArticle() {
      this.$emit("selectArticle", this.articleSearch);
    },
    showAdmire() {
      if (this.$common.isEmpty(this.$store.state.currentUser)) {
        this.$message({
          message: "请先登录！",
          type: "error"
        });
        return;
      }

      this.showAdmireDialog = true;
    },
    getAdmire() {
      this.$http.get(this.$constant.baseURL + "/webInfo/getAdmire")
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.admires = res.data;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    getRecommendArticles() {
      this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.recommendArticles = res.data.records;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    getUserArticleLabelTotalNum() {
      const id = this.$store.state.currentUser.id; // 获取当前用户的ID
      this.$http.get(`/admin/article/getUserArticleLabelTotalNum?id=${id}`) // 发送GET请求，指定获取用户文章标签数量的接口地址，并传递当前用户的ID作为参数
        .then(response => {
          const labelNum = response; // 获取标签数量
          document.getElementById("labelTotalNum").innerText = labelNum;
          this.labelTotalNum = labelNum;
          console.log(labelNum); // 在控制台打印标签数量
          console.log("label日志！！");
        })
        .catch(error => {
          console.error('请求错误:', error);
        });
    },
    getUserArticles() {
      const id = this.$store.state.currentUser.id;
      this.$http.get(`/admin/article/getArticleByUserId?id=${id}`)
        .then(response => {
          if (!this.$common.isEmpty(response.data)) {
            this.articles = response.data;
            const currentUser = this.$store.state.currentUser;
            this.articles.forEach(article => {
              console.log(article.articleCover)
              article.username = currentUser.username;
              article.labelName = this.blogLabels[article.labelId-1];
              document.getElementById("totalBlogNum").innerText = this.articles.length;
              this.getUserArticleLabelTotalNum();

              // 发送请求获取博客封面图
              this.$http.get(`http://s6xqq8hhg.hd-bkt.clouddn.com/userAvatar/${article.articleCover}`)
                .then(response => {
                  console.log(response.data+"star");
                  // 在这里处理获取到的博客封面图

                })
                .catch(error => {
                  console.log(error);
                });
            });
          }
        })
        .catch(error => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },

    showTip() {
      this.$router.push({path: '/weiYan'});
    },
    cancelEdit() {
      // 取消编辑
      this.showEditor = false;
      this.showUpdateBtn = false;
      this.showPublishBtn = true;
      this.blogContent = "";
      this.blogContentTitle = "";
    },
    saveBlog() {
      let selectedIndex = this.selectedCategoryIndex+1;
      console.log('选中的分类索引号为：' + selectedIndex);
      const articleVO = {
        userId:this.$store.state.currentUser.id,
        articleContent: this.blogContent ,// 获取博客内容
        articleTitle:this.blogContentTitle,
        // 其他博客相关数据...
        sortId:1,
        labelId:selectedIndex,
        articleCover:this.articleUp.articleCover
      };
      console.log(this.$store.state.currentUser)
      console.log(this.articleUp.articleCover+"cover")
      // console.log("index:"+document.getElementById('category').select)
      this.$http.post('/article/saveArticle', articleVO)
        .then(response => {
          // 请求成功处理逻辑
          console.log('博客保存成功！');
          this.getUserArticles();
          this.showEditor = false;
          this.blogContent = "";
          this.blogContentTitle = "";
          this.$message({
            message: '发布成功',
            type: 'success'
          });
        })
        .catch(error => {
          // 请求失败处理逻辑
          console.error('博客保存失败：', error);
          this.$message({
            message: '发布失败',
            type: 'error'
          });
        });

    },
    deleteArticle(article){
      // 发送异步请求删除文章
      this.$http.get(`/article/deleteArticle?id=${article.id}`)
        // .then(response => response.json())
        .then(response => {
          // 请求成功处理逻辑
          console.log('博客删除成功！');
          console.log(response)
          this.getUserArticles()
          this.getUserArticleLabelTotalNum()
        })
        .catch(error => {
          // 请求失败处理逻辑
          console.error('删除博客失败：', error);
        });

    },
    updateArticle(article) {
      this.showEditor = true;
      this.showUpdateBtn = true;
      this.showPublishBtn = false;
      this.blogContentTitle = article.articleTitle;
      this.blogContent = article.articleContent;
      this.selectedCategoryIndex = article.labelId - 1; // 设置下拉框选中的索引值
      this.articleUp.id = article.id;
      // this.blogLabelName
      // 判断是否找到了 #editorArea 元素
      const editorArea = document.getElementById('editorArea');
      if (editorArea) {
        editorArea.scrollIntoView({ behavior: "smooth", block: "start" });
      } else {
        console.log("#editorArea not found");
      }

    },


    updateBlog(){
      this.blogContentTitle = document.getElementById('areaTitle').value
      this.blogContent = document.getElementById('areaContent').value
      // document.getElementById('category').
      this.articleUp.articleContent = document.getElementById('areaContent').value
      this.articleUp.articleTitle = document.getElementById('areaTitle').value
      this.articleUp.username = this.$store.state.currentUser.username
      this.articleUp.labelId = this.selectedCategoryIndex+1

      //发送异步请求更新文章
      this.$http.post('/article/updateArticle', this.articleUp)
        .then(response => {
          // 请求成功处理逻辑
          console.log('博客更新成功！');

          console.log(response)
          this.getUserArticles()
          this.getUserArticleLabelTotalNum()
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          this.showEditor = false;
          this.showPublishBtn = true;
          this.showUpdateBtn = false;
          this.blogContent = "";
          this.blogContentTitle = "";
        })
        .catch(error => {
          // 请求失败处理逻辑
          console.error('更新博客失败：', error);
          this.$message({
            message: '更新失败',
            type: 'error'
          });
          this.showPublishBtn = true;
          this.showUpdateBtn = false;
          this.blogContent = "";
          this.blogContentTitle = "";
        });
    },
    getBlogLabels() {
      const url = "/webInfo/listLabel";
      console.log("gettingLabels");
      // 发送GET请求
      axios.get(url)
        .then(response => {
          console.log(response.data.data)
          const labels = response.data.data;
          this.blogLabels = Object.values(labels).map(label => label.labelName);

          // 将标签数据赋值给blogLabels数组
          // this.blogLabels = labels;
        })
        .catch(error => {
          // 请求失败，处理错误
          console.error(error);
        });
    },
    handleFileChange() {
      let file0 = this.$refs.fileInput.files[0];
      this.file = file0;
      console.log('上传的文件:', file0);

      // 这里可以进行进一步的处理，比如上传文件到服务器等操作
    }
  }
}
</script>

<style scoped>
.outside{
  background: linear-gradient(-45deg, #e8d8b9, #fae1d9, #a3e9eb, #bdbdf0, #eec1ea);
}
/* 组件的样式 */
.card-content1 {
  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  position: relative;
  /*color: var(--white);*/
  overflow: hidden;
}

.card-content1 :not(:first-child) {
  z-index: 10;
}

.web-name {
  font-size: 30px;
  font-weight: bold;
  margin: 20px 0;
}

.web-info {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.blog-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-size: 24px;
}

.blog-info-num {
  margin-top: 12px;
}

.collection-btn {
  position: relative;
  margin-top: 12px;
  background: var(--lightGreen);
  cursor: pointer;
  width: 65%;
  height: 35px;
  border-radius: 1rem;
  text-align: center;
  line-height: 35px;
  color: var(--white);
  overflow: hidden;
  z-index: 1;
  margin-bottom: 25px;
}

.collection-btn::before {
  background: var(--gradualRed);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform 0.5s ease-out;
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
  border-radius: 1rem;
  z-index: -1;
}

.collection-btn:hover::before {
  transform: scaleX(1);
}

.write-blog-btn {
  //position: absolute;
  //left: 470px;
  //top: 197px;
  //width: 160px;
  //height: 63px;
  margin-top: 7px;
  background-color: var(--gradualRed);
  color: #181313;
  border-radius: 20px;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
  border: 2px solid #1675b4; /* 添加边框 */
}
.write-blog-btn:hover {
  transform: scale(1.1);
  border: 2px solid #053246; /* 鼠标悬停时修改边框颜色 */
}

.write-blog-btn:hover {
  transform: scale(1.1); /* 鼠标悬停时缩放 */
}

.blog-editor {
  margin: 0 auto;
  align-self: center;
  width: 80%;
  height: 830px;
  background-color: #e7deef;
  border-radius: 20px;
  margin-top: 20px;
  padding: 10px;
  border: #5a0bb9 1px solid;
  box-sizing: border-box;
}
.blog-editor-title {
  display: block;
  margin: 0 auto;
  width: 40%;
  height: 60px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 10px;
  box-sizing: border-box;
  font-weight: bolder;
  font-size: 23px;
  text-align: center; /* 将文本居中对齐 */
  font-family: "Microsoft YaHei";
}

.blog-editor-content {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 450px;
//resize: none;
//border: none;
//outline: none;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
//font-family: "Microsoft YaHei";
}

.editor-btns {
  display: inline-block;
  float: right;
  justify-content: flex-end;
  margin-top: 16px;
}

.cancel-btn,
.publish-btn {
  width: 100px;
  height: 35px;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s linear;
  font-size: 19px;
  font-weight: bold;
  margin-top: 170px;
}

.cancel-btn {
  background-color: #ccc;
  margin-right: 10px;
}

.publish-btn {
  background-color: var(--gradualRed);
  color: #1d1f21;
}

.cancel-btn:hover,
.publish-btn:hover {
  transform: translateY(-2px);
}
.card-content1 {
  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  position: relative;
  /*color: var(--white);*/
  overflow: hidden;
}

.card-content1 :not(:first-child) {
  z-index: 10;
}

.web-name {
  font-size: 30px;
  font-weight: bold;
  margin: 20px 0;
}

.web-info {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.blog-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.blog-info-num {
  margin-top: 12px;
}

.collection-btn {
  position: relative;
  margin-top: 12px;
  background: var(--lightGreen);
  cursor: pointer;
  width: 65%;
  height: 35px;
  border-radius: 1rem;
  text-align: center;
  line-height: 35px;
  color: var(--white);
  overflow: hidden;
  z-index: 1;
  margin-bottom: 25px;
}

.collection-btn::before {
  background: var(--gradualRed);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform 0.5s ease-out;
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
  border-radius: 1rem;
  z-index: -1;
}

.collection-btn:hover::before {
  transform: scaleX(1);
}

.card-content2-title {
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
}

.card-content2-icon {
  color: var(--red);
  margin-right: 5px;
  animation: scale 1s ease-in-out infinite;
  font-size: 30px;
}

.aside-post-detail {
  display: flex;
  cursor: pointer;
  width: 70%;
  //background-color: #1a252f;
}

.aside-post-image {
  width: 200px;
  border-radius: 0.2rem;
  margin-right: 8px;
  overflow: hidden;
  font-size: 30px;
}

.error-aside-image {
  display: inline-block;
  background: var(--themeBackground);
  color: var(--white);
  padding: 10px;
  text-align: center;
  width: 100px;
  height: 100%;
  //background-color: #1abc9c;
}

.aside-post-title {
  display: inline-block;
  width: 360px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: rgb(236, 231, 153);
  line-height: 30px; /* 假设容器高度为 30px */
  text-indent: -15px; /* 负的半个 line-height */
  padding-top: 3px;
  border-radius: 5px;
  font-size: 30px;
}
.aside-post-content {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: rgb(193, 236, 153);
  line-height: 30px; /* 假设容器高度为 30px */
  text-indent: -15px; /* 负的半个 line-height */
  padding-top: 3px;
  border-radius: 5px;
  margin-left: 10px;
  font-size: 20px;
}
.error-aside-image:hover,
.aside-post-title:hover,
.aside-post-content:hover,
.aside-post-label  {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.aside-post-label {
  width: 300px;
  display: inline-block;

  background-color: #ffffff;
  margin-top: 8px;
  margin-bottom: 20px;
  margin-left: 10px;
  color: var(--greyFont);
  font-size: 23px;
  text-align: center;
  background-color: #eebcf1;
}
.aside-post-date {
  margin-top: 8px;
  margin-bottom: 20px;
  color: var(--greyFont);
  font-size: 23px;
}

.recommend-aside-header-author {
  display: inline-block;
  text-align: center;
  width: 100px;
  font-size: 30px;
  margin-right: 20px;
  background-color: #c5fcf1;
  margin-bottom: 10px;
}
.recommend-aside-header-title {
  display: inline-block;
  text-align: center;
  width: 200px;
  font-size: 30px;
  background-color: #f5dedf;
  margin-bottom: 10px;
}
.recommend-aside-header-content {
  margin-left: 20px;
  display: inline-block;
  font-size: 30px;
  text-align: center;
  width: 609px;
  background-color: #e1f7f8;
  margin-bottom: 10px;
}
.recommend-aside-header-label {
  margin-left: 42px;
  display: inline-block;
  font-size: 30px;
  text-align: center;
  width: 160px;
  background-color: #e1f7f8;
  margin-bottom: 10px;
}
.delete-icon {
  //background-image: url(../assets/file/delete.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 26px; /* 图标的宽度 */
  height: 26px; /* 图标的高度 */
  cursor: pointer;
  margin-top: 4px;
  margin-left: 3px;
}
.update-icon {
//background-image: url(../assets/file/delete.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 29px; /* 图标的宽度 */
  height: 26px; /* 图标的高度 */
  cursor: pointer;
  margin-top: 4px;
  margin-left: 6px;
}
.labelSelect {
  //margin: 30px;
  padding: 4px;
  //background-color: rgba(215, 188, 248, 0.64);
  margin: 0 auto;
  width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 23px;
}
select {
  font-size: 20px; /* 修改select框的字体大小 */
  padding: 8px; /* 添加一些内边距 */
  border-radius: 10px; /* 圆角边框 */
  border: 2px solid #ccc; /* 边框样式 */
  background-color: #f5f5f5; /* 背景颜色 */
}

option {
  font-size: 18px; /* 修改选项的字体大小 */
  color: #333; /* 修改选项的字体颜色 */
}
.blog-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.blog-card {
  width: 31%;
  margin: 20px auto;
  background: linear-gradient(to bottom, #f3dcfc, #e5ddff);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
  height: 550px;
}


.blog-card:hover {
  transform: translateY(-5px); /* 鼠标悬停时微微抬起 */
}

.blog-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.blog-card-cover {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  background-color: #e0d0f3;
}
.author {
  font-weight: bold;
  font-size: 16px;
}

.title {
  font-size: 24px;
  cursor: pointer;
  color: #333; /* 标题颜色 */
}

.blog-card-content {
  font-size: 18px;
  line-height: 1.6;
  overflow: auto; /* 使用滚动条来展示溢出的内容 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制正文行数 */
  -webkit-box-orient: vertical;
  height: 60% /* 设置卡片内容的最大高度 */
}
.blog-card-content::-webkit-scrollbar {
  width: 8px; /* 设置滚动条的宽度 */
}

.blog-card-content::-webkit-scrollbar-thumb {
  background-color: purple; /* 设置滚动条滑块的颜色 */
  border-radius: 4px; /* 设置滚动条滑块的圆角 */
}

.blog-card-content::-webkit-scrollbar-track {
  background-color: lightgray; /* 设置滚动条轨道的背景颜色 */
  border-radius: 4px; /* 设置滚动条轨道的圆角 */
}
.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666; /* 页脚文字颜色 */
}

.label,
.date {
  margin-right: 10px;
  font-size: 17px;
  display: inline-block;
}

.actions {
  display: flex;
  align-items: center;
}

.delete-icon,
.update-icon {
  margin-left: 10px;
  cursor: pointer;
}
.pictureUpload {
  display: inline-block;
  margin-top: 17px;
  background-color: #d0c9f8; /* 设置按钮背景颜色 */
  color: #fff; /* 设置文字颜色为白色 */
  border: none; /* 移除边框 */
  padding: 10px 20px; /* 调整内边距 */
  font-size: 18px; /* 设置字体大小 */
  border-radius: 10px; /* 添加圆角边框 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.pictureUpload:hover {
  background-color: #b5a9f1; /* 鼠标悬停时修改背景颜色 */
}
.blog-card-cover img {
  width: 100%; /* 设置图片宽度为容器宽度 */
  height: 100px; /* 设置图片高度为容器高度 */
  object-fit: contain;
}

.publicBlog {
  margin-left: 10px;
  //display: inline-block;
  margin-top: 7px;
  background-color: var(--gradualRed);
  color: #181313;
  border-radius: 20px;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all .2s ease-in-out;
  border: 2px solid #1675b4; /* 添加边框 */
}

.publicBlog:hover {
  background-color: #2980b9;

}

</style>
