<template>
  <div>
    <div
      style="
        background-color: #f3f4f6;
        width: 100vw;
        height: 91vh;
        padding: 20px;
      "
    >
      <el-row :gutter="20">
        <el-col :span="4">
          <div
            style="background-color: white; padding: 15px"
            class="grid-content ep-bg-purple"
          >
            <div style="font-size: 18px; color: #409eff">全部栏目</div>
            <div style="margin-bottom: 50px">
              <el-tree
                style="height: 68vh; overflow: auto"
                node-key="id"
                :default-expanded-keys="[1]"
                :data="columnOptions"
                :props="{
                  value: 'id',
                  label: 'columnName',
                  children: 'children',
                  disabled: (data) => {
                    return data.parentId == 0 ? true : false;
                  },
                }"
                @node-click="handleNodeClick"
              ></el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div
            style="padding: 15px; height: 80vh"
            class="grid-content ep-bg-purple"
          >
            <el-form
              style="width: 1200px"
              :model="queryParams"
              ref="queryForm"
              :inline="true"
              v-show="showSearch"
            >
              <el-form-item label-width="50px" label="标题" prop="title">
                <el-input
                  v-model="queryParams.title"
                  placeholder="请输入标题"
                  clearable
                  style="width: 10vw"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
              <el-form-item label-width="40px" label="状态" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="发布状态"
                  clearable
                  style="width: 6.5vw"
                >
                  <el-option
                    v-for="dict in articleStatusOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label-width="68px"
                label="发布时间"
                style="width: 18vw"
              >
                <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item
                label-width="68px"
                label="文章类型"
                style="width: 168px"
              >
                <el-select
                  v-model="queryParams.isCarousel"
                  placeholder="文章类型"
                  clearable
                  style="width: 6.5vw"
                >
                  <el-option
                    v-for="dict in articleStatus"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                /></el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="handleQuery"
                  ><el-icon> <Search /> </el-icon>搜索</el-button
                >
                <el-button size="mini" @click="resetQuery"
                  ><el-icon> <RefreshRight /> </el-icon>重置</el-button
                >
              </el-form-item>
            </el-form>
            <el-col :span="1.5">
              <el-button
                type="primary"
                size="mini"
                style="padding: 0 20px"
                @click="handleAdd"
                v-hasPermi="['system:article:add']"
                ><el-icon style="margin-right: 5px"> <Plus /> </el-icon
                >新增</el-button
              >
              <el-button
                type="danger"
                size="mini"
                plain
                style="padding: 0 20px"
                @click="handleDelete()"
                v-hasPermi="['system:article:del']"
                ><el-icon style="margin-right: 5px"> <Delete /> </el-icon
                >删除</el-button
              >
            </el-col>
            <div style="background: white; height: 68.5vh">
              <el-table
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                style="height: 57vh; margin-top: 10px; background-color: white"
                v-loading="loading"
                :data="articleList"
                @select-all="selectAll"
                @selection-change="handleSelectionChange"
              >
                <el-table-column width="55" type="selection" align="center" />
                <el-table-column
                  label="序号"
                  align="center"
                  type="index"
                  prop=""
                  width="50"
                />
                <el-table-column
                  width="280"
                  label="文章标题"
                  align="center"
                  prop="title"
                >
                  <template #default="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="goToDetailPage(scope.row)"
                    >
                      <div
                        style="
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          width: 250px;
                        "
                      >
                        {{ scope.row.title }}
                      </div>
                    </el-button>
                  </template>
                </el-table-column>

                <el-table-column
                  label="发布栏目"
                  align="center"
                  prop="columnName"
                  show-overflow-tooltip
                />

                <el-table-column
                  label="发布时间"
                  align="center"
                  prop="publishTime"
                >
                  <template #default="scope">
                    <span>{{
                      parseTime(
                        scope.row.publishTime,
                        "{y}-{m}-{d} {h}:{i}:{s}"
                      )
                    }}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="是否显示" align="center" width="100">
                <template #default="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="1"
                    inactive-value="0"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column> -->
                <el-table-column
                  width="85"
                  label="状态"
                  align="center"
                  prop="status"
                >
                  <template #default="scope">
                    <dict-tag
                      :options="article_status"
                      :value="scope.row.status"
                    />
                  </template>
                  <!-- <template #default="{ row }">
                  <el-tag :type="row.status == '1' ? 'success' : 'warning'">
                    {{ row.status == "1" ? "已发布" : "未发布" }}
                  </el-tag>
                </template> -->
                </el-table-column>
                <el-table-column
                  label="发布用户"
                  align="center"
                  prop="createBy"
                />
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template #default="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      text="primary"
                      @click="handleUpdate(scope.row)"
                      v-if="scope.row.status == '2'"
                      v-hasPermi="['system:article:edit']"
                      ><el-icon>
                        <Edit />
                      </el-icon>
                      编辑</el-button
                    >
                    <!-- <el-button
                    @click="handlerRecoverInfo(scope.row)"
                    size="mini"
                    type="success"
                    text="success"
                    style="margin-left: 0px"
                    :disabled="scope.row.status == '1'"
                  >
                    <el-icon><Refresh /></el-icon>
                  </el-button> -->
                    <el-button
                      @click="handleDeleteInfo(scope.row)"
                      size="mini"
                      type="warning"
                      text="warning"
                      v-if="scope.row.status == '1'"
                    >
                      <el-icon><CloseBold /></el-icon>取消发布
                    </el-button>
                    <!-- <el-button
                    size="mini"
                    type="danger"
                    text="danger"
                    style="margin-left: 20px"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['system:article:remove']"
                    ><el-icon><Close /></el-icon> 彻底删除</el-button
                  > -->
                  </template>
                </el-table-column>
              </el-table>
              <div style="float: right; margin-top: 20px; margin-right: 20px">
                <el-pagination
                  v-model:current-page="pageNum"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
              <!-- 添加或修改文章对话框 -->
              <el-dialog
                :title="title"
                v-model="open"
                width="90%"
                style="padding: 20px"
                :before-close="colseDiaWZ"
                append-to-body
              >
                <el-form
                  ref="form"
                  :model="form"
                  :rules="rules"
                  label-width="100px"
                >
                  <el-row :gutter="20">
                    <el-col :span="18">
                      <div class="grid-content ep-bg-purple">
                        <el-form-item
                          style="display: flex"
                          label="标题"
                          prop="title"
                        >
                          <el-input
                            style="width: 40vw"
                            v-model="form.title"
                            placeholder="请输入标题"
                          >
                          </el-input>
                          <el-button
                            v-if="reveal"
                            type="primary"
                            @click="toggleContent"
                            style="display: inline-block; margin-left: 10px"
                            >转向链接</el-button
                          >
                        </el-form-item>
                        <el-form-item
                          v-if="!reveal"
                          style="display: flex"
                          label="转向链接"
                        >
                          <el-input v-model="form.urlLink" placeholder="" />
                        </el-form-item>

                        <el-form-item label="标题图">
                          <el-upload
                            :class="{ hide: hideUpload }"
                            ref="upload"
                            :headers="upload.headers"
                            :action="upload.url"
                            :limit="limit"
                            :on-change="ChangeImage"
                            :on-success="handleSuccess"
                            :file-list="titleImgFile"
                            list-type="picture-card"
                            :auto-upload="true"
                            accept="image/jpg,image/jpeg,image/png"
                            :before-upload="handleBeforeUpload"
                          >
                            <el-icon>
                              <Plus />
                            </el-icon>

                            <template #file="{ file }">
                              <div>
                                <img
                                  class="el-upload-list__item-thumbnail"
                                  :src="file.url"
                                  alt=""
                                />
                                <span class="el-upload-list__item-actions">
                                  <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file)"
                                  >
                                    <el-icon>
                                      <Delete />
                                    </el-icon>
                                  </span>
                                </span>
                              </div>
                            </template>
                          </el-upload>

                          <el-dialog :model="dialogVisible">
                            <img
                              w-full
                              :src="dialogImageUrl"
                              alt="Preview Image"
                            />
                          </el-dialog>
                          <div style="margin-left: 20px">
                            <el-checkbox
                              :true-label="'1'"
                              :false-label="'0'"
                              @change="handleChangeCheckBox(form.isCarousel)"
                              v-model="form.isCarousel"
                              label="设为轮播图"
                              size="large"
                            />
                            <br />
                            <el-checkbox
                              :true-label="'2'"
                              :false-label="'0'"
                              @change="handleChangeCheckBox(form.isCarousel)"
                              v-model="form.isCarousel"
                              label="设为首页滚动图"
                              size="large"
                            />
                          </div>
                        </el-form-item>
                        <!-- <el-form-item v-if="reveal" label="视频"
                          ><el-upload
                            class="avatar-uploader"
                            :headers="upload.headers"
                            :action="upload.url"
                            :on-progress="uploadVideoProcess"
                            :on-success="handleVideoSuccess"
                            :before-upload="beforeUploadVideo"
                            :show-file-list="false"
                          >
                            <video
                              v-if="videoForm.showVideoPath != '' && !videoFlag"
                              :src="videoForm.showVideoPath"
                              class="avatar video-avatar"
                              controls="controls"
                            >
                              您的浏览器不支持视频播放
                            </video>
                            <i
                              v-else-if="
                                videoForm.showVideoPath == '' && !videoFlag
                              "
                              class="el-icon-plus avatar-uploader-icon"
                            ></i>
                            <el-progress
                              v-if="videoFlag == true"
                              type="circle"
                              v-bind:percentage="videoUploadPercent"
                              style="margin-top: 7px"
                            ></el-progress>
                          </el-upload>
                        </el-form-item> -->

                        <el-form-item v-if="reveal" label="附件">
                          <el-upload
                            :on-success="handleSuccessFiles"
                            v-model:file-list="files"
                            style="width: 100%; padding: 10px"
                            class="upload-demo"
                            drag
                            :on-remove="romveFile"
                            :headers="upload.headers"
                            :action="upload.url"
                            name="file"
                            multiple
                          >
                            <div class="el-upload__text">
                              <em>点击或拖拽上传</em>
                            </div>
                          </el-upload>
                        </el-form-item>

                        <el-form-item v-if="reveal" label="正文" prop="content">
                          <Editor1
                            width="100%"
                            :min-height="200"
                            height="200px"
                            v-model="form.content"
                          />
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="grid-content ep-bg-purple">
                        <el-tabs style="height: 50vh" type="border-card">
                          <el-tab-pane label="设置">
                            <div
                              style="margin-top: 20px"
                              class="form-item-container"
                            >
                              <el-form-item
                                class="item"
                                label-width="70px"
                                label="栏目"
                                prop="columnId"
                              >
                                <el-col :span="21">
                                  <el-tree-select
                                    :disabled="disabled11"
                                    node-key="id"
                                    style="width: 13vw"
                                    v-model="form.columnId"
                                    :props="{
                                      value: 'id',
                                      label: 'columnName',
                                      children: 'children',
                                    }"
                                    value-key="id"
                                    :data="columnOptions"
                                    @node-click="handleNodeClick"
                                    :expand-on-click-node="true"
                                    :default-expand-all="false"
                                    :render-after-expand="false"
                                  ></el-tree-select>
                                </el-col>
                              </el-form-item>
                            </div>
                            <el-form-item
                              prop="publishTime"
                              label-width="80px"
                              label="发布时间"
                            >
                              <div class="block">
                                <el-date-picker
                                  style="width: 13vw"
                                  v-model="form.publishTime"
                                  type="datetime"
                                  placeholder="请选择发布时间"
                                  :default-time="defaultTime"
                                />
                              </div>
                            </el-form-item>
                            <el-form-item
                              prop="status"
                              label-width="80px"
                              label="发布状态"
                            >
                              <div class="block">
                                <el-select
                                  v-model="form.status"
                                  placeholder="发布状态"
                                  clearable
                                  style="width: 13vw"
                                >
                                  <el-option
                                    v-for="dict in articleStatusOptions"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                  />
                                </el-select>
                              </div>
                            </el-form-item>
                          </el-tab-pane>
                        </el-tabs>
                      </div>
                    </el-col> </el-row
                ></el-form>
                <div slot="footer" style="height: 20px" class="dialog-footer">
                  <div
                    style="
                      height: 60px;
                      text-align: center;
                      margin-top: 20px;
                      margin-bottom: 20px;
                    "
                  >
                    <el-button type="primary" @click="submitForm">{{
                      caozuo
                    }}</el-button>
                    <el-button @click="cancel">关闭</el-button>
                  </div>
                </div>
              </el-dialog>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        v-model="centerDialogVisible"
        width="65%"
        style="height: 850px"
        title="文章预览"
        :append-to-body="true"
      >
        <div
          style="
            margin: 0 auto;
            background-color: #f2f2f2;
            height: 750px;
            overflow: auto;
          "
        >
          <div>
            <div>
              <div>
                <div class="grid-content ep-bg-purple" />
              </div>
              <div style="">
                <div
                  style="
                    background-color: white;
                    height: 100%;
                    width: 850px;
                    margin: 0 auto;
                    border: 2px solid #ececec;
                    padding: 15px 10px;
                  "
                >
                  <div
                    style="
                      border: 3px solid #f8f8f8;
                      min-height: 1000px;
                      width: 825px;
                      height: 100%;
                    "
                  >
                    <div
                      style="background-color: #f8f8f8; width: 100%"
                      class="grid-content ep-bg-purple"
                    >
                      <div
                        style="
                          font-size: 25px;
                          font-weight: 600;

                          line-height: 50px;

                          text-align: center;
                          border-bottom: 1px solid #c0c0c0;
                        "
                      >
                        <div style="font-size: 25px">
                          {{ title1 }}
                        </div>
                      </div>
                      <div
                        style="
                          font-size: 15px;
                          height: 30px;
                          text-align: center;
                          line-height: 30px;
                          width: 700px;
                          display: inline-block;
                          padding-left: 120px;
                        "
                      >
                        <div style="display: inline-block">
                          发布人：{{ createBy }}
                        </div>
                        <div style="display: inline-block; margin: 0 25px">
                          发布时间：{{
                            parseTime(publishTime, "{y}-{m}-{d} {h}:{m}")
                          }}
                        </div>
                        <div style="display: inline-block">
                          浏览量：{{ views }}
                        </div>
                      </div>
                      <div
                        style="
                          float: right;
                          margin-right: 20px;
                          margin-top: 3px;
                        "
                      >
                        <el-button
                          @click="miniFontSize"
                          size="small"
                          style="padding: 5.5px"
                          >A-</el-button
                        >
                        <el-button
                          @click="addFontSize"
                          size="small"
                          style="padding: 4px"
                          >A+</el-button
                        >
                      </div>
                      <div
                        :style="{ fontSize: fontSize + 'px' }"
                        style="
                          padding: 30px 15px;
                          line-height: 27px;
                          background-color: white;
                        "
                      >
                        <div v-html="responseData"></div>
                        <div
                          v-for="image in getImagesFromData(responseData)"
                          :key="image"
                        >
                          <el-image
                            :fit="contain"
                            :src="image.src"
                            :alt="image.alt"
                            :width="image.width"
                            :height="image.height"
                          />
                        </div>
                        <div v-for="item in fjFiles" :key="item">
                          <el-icon style="color: #1b6ef3; font-size: 26px">
                            <Paperclip style="padding-top: 15px" /> </el-icon
                          ><a
                            style="color: #1b6ef3; font-size: 17px"
                            target="_blank"
                            :href="item.url"
                            >{{ item.name }}</a
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="grid-content ep-bg-purple" />
              </div>
            </div>
          </div>
        </div>

        <!-- <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">
            确认
          </el-button>
          <div style="text-align: center; margin-bottom: 20px">
            <el-button type="primary " @click="centerDialogVisible = false"
              >关闭</el-button
            >
          </div>
        </span>
      </template> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import Editor1 from "/src/components/Editor1.vue";
import { ElMessage } from "element-plus";
import { ElMessageBox } from "element-plus";
import { useDict } from "@/utils/dict";
import {
  listColumn,
  listColumn2,
  queryRoleColumns,
  getColumn,
  delColumn,
  addColumn,
  listByColumnId,
  updateColumn,
  columnTree,
} from "@/api/system/column";
import { startExamine, selWorkId } from "@/api/liucheng/information";
import {
  listArticle,
  getArticle,
  delArticle,
  unpublish,
  addArticle,
  updateArticle,
  columnList,
  fileDel,
  detailArticle,
  columnDepartment,
} from "@/api/system/article";
import { getInfo } from "@/api/login";
import { Delete } from "@element-plus/icons-vue";

export default {
  // dicts: ["article_status"],
  name: "YinetoaIndex1",
  components: {
    Editor1,
    Delete,
  },
  // computed: {
  //   transformedTreeData() {
  //     const transformedData = this.transformData(this.responseData);
  //     return [{ id: 0, label: "根节点", children: transformedData }];
  //   },
  // },
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: "", //回显的变量
      },

      fontSize: 18,
      upload: {
        headers: { Authorization: "Bearer " + getToken() },
        url: import.meta.env.VITE_APP_BASE_API + "/system/file/fileupload",
      },
      hideUpload: false,
      article_status: useDict("article_status").article_status,
      // uploadUrl: process.env.VUE_APP_BASE_API,
      currentPage4: 1,
      pageSize: 10,
      selData: [],
      treeData1: [],
      dateRange: [],
      responseData: "",
      reveal: true,
      fjFiles: [],
      checked1: true,
      disabled11: false,
      caozuo: null,
      treeProps: {
        label: "label",
        children: "children",
      },
      defaultTime: new Date(2000, 1, 1, 12, 0, 0),
      shortcuts: [
        {
          text: "Today",
          value: new Date(),
        },
        {
          text: "Yesterday",
          value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
          },
        },
        {
          text: "A week ago",
          value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
          },
        },
      ],
      value3: "",

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      treeData: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      titleImgFile: [],
      files: [],
      total: 0,
      options: [],
      newOptions: [],
      value: "",
      title1: "",
      publishTime: "",
      createBy: "",
      views: "",
      content: "",
      centerDialogVisible: false,
      // 文章表格数据
      articleList: [],
      // 弹出层标题
      title: "",
      fileId: "",
      rows: [],
      id: null,
      fileList: [],
      // 是否显示弹出层
      open: false,
      queryParams1: {
        isFlow: "0",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        columnId: 1,
        isFlow: "0",
        userId: undefined,
      },
      // 表单参数
      form: {
        status: 1,
      },
      limit: 1,
      delInfo: {
        id: null,
        status: "2",
      },
      imgurl: [],
      fileList: [],
      articleStatusOptions: [
        { label: "已发布", value: "1" },
        { label: "未发布", value: "2" },
      ],
      articleStatus: [
        { label: "文章", value: "0" },
        { label: "轮播图", value: "1" },
      ],
      delInfo1: {
        id: null,
        status: "1",
      },
      statusInfo: "",
      columnOptions: [],
      // 表单校验
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],

        content: [
          { required: true, message: "文章内容不能为空", trigger: "blur" },
        ],
        columnId: [{ required: true, message: "请选择栏目", trigger: "blur" }],
        publishTime: [
          { required: true, message: "请选择发布时间", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择发布状态", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // this.getList();
    this.getcolumnList();
    this.getInfo();
    this.getTreeselect();
    // this.articleStatusOptions();
  },
  mounted() {
    // this.listByColumnId1();
    this.treeData = this.buildTree(this.rows, 0);
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50; //控制大小  修改50的值即可
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1 //控制格式
      ) {
        this.$modal.msgError("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        this.$modal.msgError("视频大小不能超过50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      //注意在data中添加对应的变量名
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;

      console.log(res);
      //后台上传数据
      if (res.code == 200) {
        this.videoForm.showVideoPath = res.data.url; //上传成功后端返回视频地址 回显
      } else {
        this.$message.error("上传失败！");
      }
    },

    async getInfo() {
      let { user } = await getInfo();
      // this.form.deptname = user.dept.deptName;
      this.queryParams.userId = user.userId;
      this.listByColumnId1();
    },
    addFontSize() {
      if (this.fontSize < 20) {
        this.fontSize = this.fontSize + 0.3;
      }
    },
    miniFontSize() {
      if (this.fontSize > 14) {
        this.fontSize = this.fontSize - 0.3;
      }
    },
    // 判断上传的是否为图片
    handleBeforeUpload(file) {
      var img = file.name.substring(file.name.lastIndexOf(".") + 1);
      const suffix = img === "jpg";
      const suffix2 = img === "png";
      const suffix3 = img === "jpeg";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!suffix && !suffix2 && !suffix3) {
        this.$message.error("只能上传图片！");
        return false;
      }
      // 可以限制图片的大小
      // if (!isLt1M) {
      //   this.$message.error("上传图片大小不能超过 1MB!");
      // }
      return suffix || suffix2 || suffix3;
    },
    //删除附件
    romveFile(file, fileList) {
      this.fileList.push(file.response.data);
      this.fileList = fileList;
      // 使用map函数遍历fileList，提取每个item的fileId
      const fileIds = this.fileList.map((item) => {
        return item.fileId; // 返回每个item的fileId
      });
      // 将fileIds数组转换为以逗号分隔的字符串
      this.form.filePath = fileIds.join(",");
    },
    // 图片状态
    ChangeImage(file, fileList) {
      this.hideUpload = fileList.length >= this.limit;
    },

    colseDiaWZ(done) {
      this.reset();
      this.imgurl = [];
      this.open = false;
      done();
    },

    //解析图片
    getImagesFromData(data) {
      // 在这里解析数据，提取图片信息并返回一个包含图片相关属性的数组
      // 例如，假设数据中的图片信息是以<img>标签的形式呈现的：
      const imagePattern =
        /<img\s*src="([^"]+)"\s*alt="([^"]+)"\s*width="(\d+)"\s*height="(\d+)"\s*\/?>/g;
      const images = [];
      let match;
      while ((match = imagePattern.exec(data)) !== null) {
        const src = match[1];
        const alt = match[2];
        const width = parseInt(match[3], 10);
        const height = parseInt(match[4], 10);
        images.push({ src, alt, width, height });
      }
      return images;
    },

    async goToDetailPage(row) {
      let { data } = await detailArticle(row.id);
      if (!row.urlLink) {
        this.centerDialogVisible = true;
        this.title1 = data.title;
        this.publishTime = data.publishTime;
        this.createBy = data.createBy;
        this.views = data.views;
        this.responseData = data.content;
        this.fjFiles = data.fjFiles;
      } else if (row.urlLink) {
        window.open(row.urlLink, "_blank");
      }
    },
    jobGroupFormat(row, column) {
      return selectDictLabel(sys_job_group.value, row.jobGroup);
    },
    handleChangeCheckBox(val) {
      if (this.form.titleImg == null) {
        this.$message({
          message: "请先上传图片",
          type: "warning",
        });
        this.form.isCarousel = "0";
      } else {
        if (val == "2") {
          this.reveal = false;
          this.form.columnId = 50;
          this.disabled11 = true;
        } else if (val == "0" || val == "1") {
          this.reveal = true;
          this.form.columnId = "";
          this.disabled11 = false;
        }
      }
    },
    handleSuccessFiles(response, file, fileList) {},

    // 上传图片
    handleSuccess(response, file, fileList) {
      if (file.response.code == 200) {
        this.form.titleImg = "" + file.response.data.fileId;
      }
    },
    //获取token
    getToken() {
      return getToken();
    },

    parentIdChange(val) {
      this.$nextTick(() => {
        this.$refs.form.validateField("columnId");
      });
    },
    /** 查询文章所属的栏目下拉树结构 */
    async getTreeselect() {
      this.$modal.loading("加载中...");
      let response = await queryRoleColumns();
      console.log("response", response.rows.length);
      if (response.rows.length == 0) {
        this.form.columnId = null;
      } else {
        this.columnOptions = this.handleTree(response.rows, "id");
        console.log("columnOptions", this.columnOptions);
      }
      this.$modal.closeLoading();
    },

    toggleContent() {
      this.reveal = !this.reveal;
    },
    // 删除图片
    async handleRemove(file) {
      this.form.titleImg = null;
      this.form.isCarousel = "0";
      this.fileList = this.titleImgFile;
      this.hideUpload = this.fileList.length >= this.limit;
      if (file.fileId) {
        await fileDel(file.fileId);
        this.hideUpload = false;
      }
      this.$refs.upload.clearFiles();
    },

    listByColumnId1() {
      this.loading = true;
      listByColumnId(this.addDateRange(this.queryParams, this.dateRange)).then(
        (res) => {
          this.articleList = res.rows;
          this.total = res.total;
          this.loading = false;
        }
      );
    },
    //部门
    getcolumnDepartment() {
      columnDepartment().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          this.label = res.data[i].deptName;
          this.value = res.data[i].deptId;
          this.options.push({ label: this.label, value: this.value });
        }
      });
    },
    async getcolumnList() {
      await columnTree(this.queryParams1).then((res) => {
        this.treeData = res.data[0].children;
      });
    },
    buildTree(rows, parentId) {
      const tree = [];
      for (const row of rows) {
        if (row.parentId === parentId) {
          const children = this.buildTree(rows, row.id);
          if (children.length > 0) {
            row.children = children;
          }
          tree.push(row);
        }
      }
      return tree;
    },

    async handlerRecoverInfo(row) {
      this.delInfo1.id = row.id;
      await unpublish(this.delInfo1).then((response) => {
        if (response.code == 200) {
          ElMessage({
            message: "发布成功",
            type: "success",
          });
        }
      });
      this.listByColumnId1();
    },
    handleDeleteInfo(row) {
      this.delInfo.id = row.id;

      // ElMessageBox.confirm("是否删除文章 " + row.title + " ？", "提示", {
      //   confirmButtonText: "确认",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      unpublish(this.delInfo);
      ElMessage({
        type: "success",
        message: "取消发布成功",
      });
      this.listByColumnId1();
      // })
      // .catch(() => {
      //   // ElMessage({
      //   //   type: "info",
      //   //   message: "删除失败",
      //   // });
      // });

      // this.$modal
      //   .confirm("是否删除文章 " + row.title + " ？")
      //   .then(function () {
      //     return unpublish(this.delInfo);
      //     // unpublish(this.delInfo).then((response) => {
      //     //   if (response.code == 200) {
      //     //     ElMessage({
      //     //       message: "删除成功",
      //     //       type: "success",
      //     //     });
      //     //   }
      //     // });
      //   })
      //   .then(() => {
      //     this.listByColumnId1();
      //     this.$modal.msgSuccess("删除成功");
      //   })
      //   .catch(() => {});

      // this.listByColumnId1();
    },

    handleSizeChange(newPage) {
      this.queryParams.pageSize = newPage;
      this.listByColumnId1();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.listByColumnId1();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        content: "",
        status: null,
        columnId: null,
        parentId: 0,
        deptId: null,
        titleImg: "",
        publishTime: "",
        isCarousel: "0",
        views: null,
        imgurl: [],
        filePath: null,
        createTime: null,
        createBy: null,
        titleImgFile: null,
        fileId: null,
        files: null,
        file: null,
        updateTime: null,
        updateBy: null,
      };
      this.reveal = true;
      this.titleImgFile = [];
      this.files = [];
      this.hideUpload = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.listByColumnId1();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //全选
    selectAll(sel) {
      console.log("sel", sel);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids;
      if (ids.length == 0) {
        this.$modal.msgError("请选择删除文章");
      } else {
        this.$modal
          .confirm("是否删除勾选文章？")
          .then(function () {
            return delArticle(ids);
          })
          .then(() => {
            this.listByColumnId1();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },
    handleNodeClick(data) {
      this.queryParams.columnId = data.id;
      this.listByColumnId1();
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      this.form.publishTime = date;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.reset();

      this.getTreeselect();
      this.caozuo = "提交";
      this.form.status = this.articleStatusOptions[0].value;
      // this.$refs.upload.clearFiles();
      this.currentTime();
      this.value = "";
      this.title = "文章管理 - 新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      //console.log("row", row);
      this.$modal.loading("正在加载数据，请稍后...");
      this.caozuo = "保存";
      this.columnOptions = [];
      queryRoleColumns().then((response) => {
        console.log("response", response.rows.length);
        if (response.rows.length == 0) {
          this.form.columnId = null;
        } else {
          this.columnOptions = this.handleTree(response.rows, "id");
          //console.log("87/9555", this.columnOptions);
        }
        //console.log(this.columnOptions[0].children);
        if (this.columnOptions[0].children == undefined) {
          for (let i = 0; i < this.columnOptions.length; i++) {
            if (row.columnName == this.columnOptions[i].name) {
              this.form.columnId = row.columnId;
              return;
            }
          }
        } else {
          for (let i = 0; i < this.columnOptions[0].children.length; i++) {
            //console.log(this.columnOptions[0].children[i].name);
            if (row.columnName == this.columnOptions[0].children[i].name) {
              this.form.columnId = row.columnId;
            } else {
            }
          }
        }
      });

      if (row.urlLink !== null || row.isCarousel == "2") {
        this.reveal = false;
        if (row.status == "2") {
          this.statusInfo = row.status;
        }
        this.open = true;
        this.title = "编辑文章";
        // this.getTreeselect();
        const id = row.id || this.ids;
        getArticle(id).then((response) => {
          this.form = response.data;
          this.imgurl.push(response.data.titleImgFile);
          if (response.data.titleImgFile != null) {
            this.titleImgFile.push(response.data.titleImgFile);
          }
          this.files =
            response.data.fjFiles == null ? [] : response.data.fjFiles;
          this.open = true;
        });
      } else {
        this.reveal = true;
        if (row.status == "2") {
          this.statusInfo = row.status;
        }
        this.open = true;
        this.title = "编辑文章";
        // this.getTreeselect();
        // this.parentIdChange();
        const id = row.id || this.ids;
        getArticle(id).then((response) => {
          this.form = response.data;
          this.imgurl.push(response.data.titleImgFile);
          if (response.data.titleImgFile != null) {
            this.titleImgFile.push(response.data.titleImgFile);
          }
          this.files =
            response.data.fjFiles == null ? [] : response.data.fjFiles;
          this.open = true;
          this.title = "修改文章";
        });
        this.$modal.closeLoading();
      }
      this.$modal.closeLoading();
    },
    /** 提交按钮 */

    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.filePath = [];
          for (var i = 0; i < this.files.length; i++) {
            if (this.files[i].response == undefined) {
              this.form.filePath.push(this.files[i].fileId);
            } else {
              this.form.filePath.push(this.files[i].response.data.fileId);
            }
          }
          this.form.filePath = this.form.filePath.join(",");
          if (this.form.id != null) {
            if (this.form.status == 0) {
              this.form.status = 2;
            }
            delete this.form.yworkId;
            updateArticle(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.reset();
              console.log("columnId", this.queryParams.columnId);
              this.queryParams.columnId = 1;

              this.listByColumnId1();
            });
          } else {
            addArticle(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset();
              console.log("columnId", this.queryParams.columnId);
              this.queryParams.columnId = 1;

              this.listByColumnId1();
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
::v-deep img {
  max-width: 790px;
}

::v-deep .hide .el-upload--picture-card {
  display: none;
}

::v-deep .el-dialog__body {
  padding: 0px 20px;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}

::v-deep .v-modal {
  opacity: 0;

  background: rgba(255, 255, 255, 0.5);
}

::v-deep .el-upload-dragger {
  padding: 5px;
  background-color: #ecf5ff;
}

.el-row {
  margin-bottom: 20px;
}

::v-deep .item {
  .el-form-item__label {
    white-space: pre-wrap;
    text-align: center;
  }
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.editor,
.ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
  width: 1230px;
}

.el-form-item__label {
  width: 40px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

::v-deep .form-item-container {
  display: flex !important;
  flex-direction: column !important;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  cursor: pointer;
}

::v-deep .el-tree-node__label {
  font-size: 16px;
}

::v-deep .el-tree {
  margin-top: 10px;
}

::v-deep .el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 20px;
}

::v-deep .el-textarea {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: var(--el-font-size-base);
}

// ::v-deep .el-dialog__body {
//   height: 70vh;
//   overflow: auto;
// }
::v-deep .el-textarea__inner {
  position: relative;
  display: block;
  resize: vertical;
  padding: 5px 11px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  color: var(--el-input-text-color, var(--el-text-color-regular));
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  -webkit-appearance: none;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  border: none;
}
</style>
