<template>
  <div>
    <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: 860px"
                v-model="form.title"
                placeholder="请输入标题"
              >
              </el-input>
            </el-form-item>

            <el-form-item v-if="reveal" label="正文" prop="content">
              <Editor1
                width="20vw"
                :min-height="200"
                height="200px"
                v-model="form.content"
              />
            </el-form-item>
            <el-form-item v-if="reveal" label="附件">
              <div class="uploadfile">
                <el-upload
                  :on-success="handleSuccessFiles"
                  v-model:file-list="files"
                  style="width: 57.5vw; padding: 0px"
                  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>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple">
            <el-tabs style="min-height: 61vh" type="border-card">
              <el-tab-pane label="信息设置">
                <div style="margin-top: 20px" class="form-item-container">
                  <el-form-item
                    class="item"
                    label-width="6vw"
                    label="发布栏目"
                    prop="columnId"
                  >
                    <el-tree-select
                      style="width: 13vw; padding-left: 0px"
                      v-model="form.columnId"
                      :props="{
                        value: 'id',
                        label: 'columnName',
                        children: 'children',
                        disabled: (data) => {
                          return data.parentId == 1 ? true : false;
                        },
                      }"
                      @current-change="parentIdChange"
                      :data="columnOptions"
                      value-key="id"
                    />
                  </el-form-item>
                </div>
                <div>
                  <el-form-item
                    prop="publishTime"
                    label-width="6vw"
                    label="申请时间"
                  >
                    <el-date-picker
                      style="width: 13vw"
                      v-model="form.publishTime"
                      type="datetime"
                      placeholder="请选择申请时间"
                      :default-time="defaultTime"
                    />
                  </el-form-item>
                </div>

                <!-- <el-form-item 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 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">提交</el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { useDict } from "@/utils/dict";
import Editor1 from "/src/components/Editor1.vue";
import { Delete } from "@element-plus/icons-vue";
import { startExamine, selWorkId } from "@/api/liucheng/information";
import {
  listColumn3,
  getColumn,
  delColumn,
  addColumn,
  listByColumnId,
  updateColumn,
} from "@/api/system/column";
import {
  listArticle,
  getArticle,
  delArticle,
  unpublish,
  addArticle,
  updateArticle,
  columnList,
  fileDel,
  detailArticle,
  columnDepartment,
} from "@/api/system/article";
import { getInfo } from "@/api/login";
import { ElMessage } from "element-plus";
export default {
  name: "YinetoaWjwWebInformationAudit",
  props: ["dateNow", "WorkId"],
  components: {
    Editor1,
    Delete,
  },
  data() {
    return {
      limit: 1,
      hideUpload: false,
      titleImgFile: [],
      files: [],
      article_status: useDict("article_status").article_status,
      dialogVisible: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      fjFiles: [],
      imgurl: [],
      fileList: [],
      articleStatusOptions: [
        { label: "已发布", value: "1" },
        { label: "未发布", value: "0" },
        // { label: "已删除", value: "2" },
      ],
      upload: {
        headers: { Authorization: "Bearer " + getToken() },
        url: import.meta.env.VITE_APP_BASE_API + "/system/file/fileupload",
      },
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        isCarousel: "0",
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 30,
      },
      columnOptions: [],
      reveal: true,
      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;
          },
        },
      ],
      // 表单校验
      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.getTreeselect();
    this.form.status = this.articleStatusOptions[1].value;
  },
  watch: {
    dateNow: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.form.publishTime = newValue;
        }
      },
      deep: true,
      immediate: true,
    },
    WorkId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.workId = newValue;
          // this.getLeave();
          this.selWorkId();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    cancel() {
      this.$emit("change1");
    },
    // 图片状态
    ChangeImage(file, fileList) {
      this.hideUpload = fileList.length >= this.limit;
    },
    // 判断上传的是否为图片
    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;
    },

    //基本信息
    getInfo() {
      getInfo().then((res) => {
        this.form.name = res.user.nickName;
      });
    },
    async selWorkId() {
      await selWorkId(this.workId);
    },
    // 上传图片
    handleSuccess(response, file, fileList) {
      if (file.response.code == 200) {
        this.form.titleImg = "" + file.response.data.fileId;
      }
    },
    // 表单重置
    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.titleImgFile = [];
      this.files = [];
      this.hideUpload = false;
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
    },

    /** 提交按钮 */
    submitForm() {
      this.$modal.loading("提交中...");
      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(",");
          startExamine(this.form).then((response) => {
            if (response.data.VarAcceptersName != "") {
              ElMessage({
                message:
                  "已发送到" +
                  response.data.VarToNodeName +
                  "节点，接收人：" +
                  response.data.VarAcceptersName,
                type: "success",
              });
            } else {
              ElMessage({
                message: response.data.Message.replaceAll("@", ""),
                type: "success",
              });
            }
            this.reset();
            this.$modal.closeLoading();
            this.$emit("change1");
          });
        }
      });
    },
    //删除附件
    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(",");
    },
    //获取token
    getToken() {
      return getToken();
    },
    /** 查询文章所属的栏目下拉树结构 */
    getTreeselect() {
      this.$modal.loading("加载中...");
      this.columnOptions = [];
      listColumn3(this.queryParams1).then((response) => {
        this.columnOptions = this.handleTree(response.rows, "id");
      });
      this.$modal.closeLoading();
    },
    //转向链接
    toggleContent() {
      this.reveal = !this.reveal;
    },
    // 删除图片
    async handleRemove(file) {
      this.fileList = this.titleImgFile;
      this.hideUpload = this.fileList.length >= this.limit;
      if (file.fileId) {
        await fileDel(file.fileId);
      }
      this.$refs.upload.clearFiles();
      // this.titleImg = "";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
  padding: 5px;
  background-color: #ecf5ff;
}
::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);
}

.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;
  height: 32px;
  cursor: pointer;
}
::v-deep .el-tree-node__label {
  font-size: 16px;
}
::v-deep .el-tree {
  margin-top: 10px;
}

::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;
}
::v-deep .tox-editor-header {
  width: 1200px;
}
</style>
