<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;
              height: 80vh;
              width: 16vw;
              margin-right: 20px;
            "
            class="grid-content ep-bg-purple"
          >
            <div style="font-size: 18px; color: #409eff">全部栏目</div>
            <div style="padding-bottom: 25px">
              <el-tree
                style="height: 69.5vh; overflow: auto"
                v-if="current"
                node-key="id"
                highlight-current
                :current-node-key="current"
                default-expand-all
                :data="treeData"
                :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: 0px; height: 80vh"
            class="grid-content ep-bg-purple"
          >
            <div style="background: white; height: 80vh; overflow-y: auto">
              <div style="padding: 20px; margin-left: 20px">
                <div
                  style="
                    color: #409eff;
                    font-size: 24px;
                    font-weight: 800;
                    width: 64vw;
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #409eff;
                  "
                >
                  {{ columnTitle }}
                </div>
                <div v-if="articleList.length == 0">暂无更多文章...</div>
                <div v-else>
                  <div
                    v-for="item in articleList"
                    :key="item"
                    style="height: 50px; line-height: 50px; padding: 0 20px"
                  >
                    <div
                      class="hover-li"
                      @click="detail(item)"
                      style="
                        width: 63vw;
                        height: 50px;
                        line-height: 50px;
                        margin-bottom: 5vh;
                        display: flex;
                        cursor: pointer;
                        border-bottom: 1px solid #f1f1f1;
                      "
                    >
                      <div
                        style="
                          height: 50px;
                          line-height: 50px;
                          display: inline-block;
                          margin-bottom: 30px;
                        "
                      >
                        <div
                          :style="{
                            backgroundColor:
                              item.isRead == 1 ? '#0dd068' : '#d90013',
                          }"
                          style="
                            width: 5px;
                            height: 5px;

                            display: inline-block;
                            border-radius: 50%;
                            margin-bottom: 23px;
                          "
                        ></div>
                        <div
                          :style="{
                            color: item.isRead == 1 ? '#7a7373' : 'black',
                          }"
                          style="
                            display: inline-block;
                            max-width: 50.5vw;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            min-width: 50.5vw;
                            margin-left: 10px;
                          "
                          class="hover-li-div"
                        >
                          {{ item.title }}
                        </div>
                      </div>
                      <div
                        style="
                          display: inline-block;
                          width: 150px;
                          float: right;
                          height: 50px;
                          line-height: 50px;
                          color: #999999;
                          border-bottom: 1px solid #f1f1f1;
                          position: relative;
                          right: 0px;
                        "
                      >
                        {{ parseTime(item.publishTime, "{y}-{m}-{d} {h}:{i}") }}
                      </div>
                    </div>
                  </div>
                  <div
                    style="
                      float: right;
                      margin-top: 20px;
                      margin-right: 40px;
                      margin-bottom: 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>
                </div>
              </div>
            </div></div
        ></el-col>
      </el-row>
      <el-dialog
        v-model="centerDialogVisible"
        width="65%"
        title="文章详情"
        draggable
        :append-to-body="true"
        center
        :fullscreen="dialogScale"
      >
        <div
          style="position: absolute; right: 50px; top: 24px"
          @click="dialogScale ? (dialogScale = false) : (dialogScale = true)"
        >
          <el-icon><FullScreen /></el-icon>
        </div>
        <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}:{i}")
                          }}
                        </div>
                        <div style="display: inline-block">
                          浏览量：{{ views }}
                        </div>
                        <!-- <div
                                    style="
                                      display: inline-block;
                                      margin: 0 15px;
                                    "
                                  >
                                    发布部门：
                                  </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 { useRoute, useRouter } from "vue-router";

import useTagsViewStore from "../../store/modules/tagsView";
import {
  listColumn,
  getColumn,
  delColumn,
  addColumn,
  listByColumnId,
  updateColumn,
} from "@/api/system/column";
import { detailArticle } from "@/api/system/article";
import { listMore } from "@/api/system/module";
import {
  listArticle,
  moreArticle,
  getArticle,
  delArticle,
  unpublish,
  addArticle,
  updateArticle,
  columnList,
  fileDel,
  columnDepartment,
} from "@/api/system/article";

export default {
  // dicts: ["article_status"],
  name: "YinetoaIndex1",
  components: {
    Editor1,
  },
  // computed: {
  //   transformedTreeData() {
  //     const transformedData = this.transformData(this.responseData);
  //     return [{ id: 0, label: "根节点", children: transformedData }];
  //   },
  // },
  data() {
    return {
      fontSize: 18,
      data: [],
      dialogScale: true,
      dataDetail: [],
      centerDialogVisible: false,
      title1: "",
      publishTime: null,
      createBy: null,
      views: null,
      responseData: null,
      article_status: useDict("article_status").article_status,
      // uploadUrl: process.env.VUE_APP_BASE_API,
      currentPage4: 1,
      pageSize: 10,
      selData: [],
      treeData1: [],
      dateRange: [],
      responseData: "",
      fjFiles: [],
      reveal: true,
      checked1: true,
      treeProps: {
        label: "columnName",
        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: "",
      value1: "",
      title1: "",
      publishTime: "",
      createBy: "",
      views: "",
      content: "",
      centerDialogVisible: false,
      // 文章表格数据
      articleList: [],

      pageNum: 1,
      pageSize: 10,

      // 弹出层标题
      title: "",
      fileId: "",
      rows: [],
      id: null,
      fileList: [],
      // 是否显示弹出层
      open: false,
      queryParams1: {
        pageNum: 1,
        pageSize: 30,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        columnId: 1,
      },
      // 表单参数
      form: {},
      delInfo: {
        id: null,
        status: "0",
      },
      imgurl: [],
      articleStatusOptions: [
        { label: "已发布", value: "1" },
        { label: "未发布", value: "0" },
      ],
      columnTitle: "",
      current: "",
      delInfo1: {
        id: null,
        status: "1",
      },
      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" },
        ],
      },
    };
  },
  created() {
    // this.getList();
    // this.getcolumnList();
    // this.articleStatusOptions();
    this.$modal.loading("加载中...");
    listMore().then((res) => {
      console.log("res3633", res);
      this.rows = res;
      if (this.$route.query.nowType == "1") {
        this.columnID = this.$route.query.columnID.split(".")[1];
      } else {
        this.columnID = this.$route.query.columnID.split(".")[0];
      }
      // if (this.$route.query.nowType == "2") {
      //   this.columnID = this.$route.query.columnID;
      // }
      console.log("columnID", this.columnID);
      this.treeData = this.buildTree(this.rows, 0);
      if (this.treeData[0].length == undefined) {
        for (let i = 0; i < this.treeData.length; i++) {
          if (this.treeData[i].columnCode == this.columnID) {
            this.columnTitle = this.treeData[i].name;
            this.current = this.treeData[i].id;
            this.queryParams.columnId = this.treeData[i].id;
          } else if (this.treeData[i].columnCode != this.columnID) {
            for (let j = 0; j < this.treeData[i].children.length; j++) {
              if (this.treeData[i].children[j].columnCode == this.columnID) {
                this.columnTitle = this.treeData[i].children[j].name;
                this.current = this.treeData[i].children[j].id;
                this.queryParams.columnId = this.treeData[i].children[j].id;
              }
            }
          } else {
            for (let k = 0; k < this.treeData[i].children[j].length; k++) {
              if (
                this.treeData[i].children[j].children[k].columnCode ==
                this.columnID
              ) {
                this.columnTitle =
                  this.treeData[i].children[j].children[k].name;
                this.current = this.treeData[i].children[j].children[k].id;
                this.queryParams.columnId =
                  this.treeData[i].children[j].children[k].id;
              }
            }
          }
        }
      } else {
        for (let i = 0; i < this.treeData[0].children.length; i++) {
          if (this.treeData[0].children[i].columnCode == this.columnID) {
            this.columnTitle = this.treeData[0].children[i].name;
            this.current = this.treeData[0].children[i].id;
            this.queryParams.columnId = this.treeData[0].children[i].id;
          } else if (this.treeData[i].columnCode != this.columnID) {
            for (
              let j = 0;
              j < this.treeData[0].children[i].children.length;
              j++
            ) {
              if (
                this.treeData[0].children[i].children[j].columnCode ==
                this.columnID
              ) {
                this.columnTitle =
                  this.treeData[0].children[i].children[j].name;
                this.current = this.treeData[0].children[i].children[j].id;
                this.queryParams.columnId =
                  this.treeData[0].children[i].children[j].id;
              }
            }
          } else {
            for (
              let k = 0;
              k < this.treeData[0].children[i].children[j].length;
              k++
            ) {
              if (
                this.treeData[0].children[i].children[j].children[k]
                  .columnCode == this.columnID
              ) {
                this.columnTitle =
                  this.treeData[0].children[i].children[j].children[k].name;
                this.current =
                  this.treeData[0].children[i].children[j].children[k].id;
                this.queryParams.columnId =
                  this.treeData[0].children[i].children[j].children[k].id;
              }
            }
          }
        }
      }

      this.listByColumnId1();
      this.$modal.closeLoading();
    });
  },
  mounted() {},
  methods: {
    addFontSize() {
      if (this.fontSize < 20) {
        this.fontSize = this.fontSize + 0.3;
      }
    },
    miniFontSize() {
      if (this.fontSize > 14) {
        this.fontSize = this.fontSize - 0.3;
      }
    },
    async detail(item) {
      let { data } = await detailArticle(item.id);
      // this.dataDetail = data;
      this.goToDetailPage(data);
    },
    colseDiaWZ(done) {
      this.reset();
      this.imgurl = [];
      this.open = false;
      done();
    },
    // articleStatusOptions(row, column) {
    //   return this.selectDictLabel(this.articleStatusOptions, row.status);
    // },
    //解析图片
    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;
    },

    goToDetailPage(row) {
      this.centerDialogVisible = true;
      this.title1 = row.title;
      this.fjFiles = row.fjFiles;
      this.publishTime = row.publishTime;
      this.createBy = row.createBy;
      this.views = row.views;
      this.responseData = row.content;
      this.listByColumnId1();
    },
    jobGroupFormat(row, column) {
      return selectDictLabel(sys_job_group.value, row.jobGroup);
    },
    handleChangeCheckBox(val) {},
    handleSuccessFiles(response, file, fileList) {
      this.fileList.push(file.response.data);
      // 使用map函数遍历fileList，提取每个item的fileId
      const fileIds = this.fileList.map((item) => {
        return item.fileId; // 返回每个item的fileId
      });
      // 将fileIds数组转换为以逗号分隔的字符串
      this.form.filePath = fileIds.join(",");
    },

    // 上传图片
    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");
      });
    },
    /** 查询文章所属的栏目下拉树结构 */
    getTreeselect() {
      this.$modal.loading("加载中...");
      this.columnOptions = [];
      listColumn().then((response) => {
        this.columnOptions = this.handleTree(response.rows, "id");
      });
      this.$modal.closeLoading();
    },

    toggleContent() {
      this.reveal = !this.reveal;
    },
    // 删除图片
    async handleRemove(file) {
      await fileDel(file.response.data.fileId);
      this.$refs.upload.clearFiles();
      // this.titleImg = "";
    },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
    handleDownload(file) {},
    handleNodeClick(data) {
      if (data.columnCode == "AJQL") {
        // const route = useRoute();
        // console.log("95896", route);
        // this.$router.push({ path: "/aGodmore" });
        this.$tab.openPage("/aGodmore");
      } else {
        this.queryParams.columnId = data.id;
        if (this.queryParams.columnId == data.id) {
          this.columnTitle = data.columnName;
        }
        //

        this.listByColumnId1();
      }
    },
    handleSizeChange(newPage) {
      this.pageSize = newPage;
      this.listByColumnId1();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.listByColumnId1();
    },
    listByColumnId1() {
      this.loading = true;

      moreArticle(this.queryParams).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() {},
    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;
    },

    // goToDetailPage(id) {
    //   this.fetchArticleDetails(id)
    //     .then((article) => {
    //       if (article) {
    //         document.title = article.title;
    //       }
    //     })
    //     .catch((error) => {
    //       console.error(error);
    //     });
    // },
    // fetchArticleDetails(id) {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       const article = {
    //         id: id,
    //         title: "Sample Article Title",
    //       };
    //       resolve(article);
    //     }, 1000);
    //   });
    // },
    async handlerRecoverInfo(row) {
      this.delInfo1.id = row.id;
      await unpublish(this.delInfo1).then((response) => {
        if (response.code == 200) {
          ElMessage({
            message: "恢复成功",
            type: "success",
          });
        }
      });
      this.listByColumnId1();
    },
    async handleDeleteInfo(row) {
      this.delInfo.id = row.id;
      await unpublish(this.delInfo).then((response) => {
        if (response.code == 200) {
          ElMessage({
            message: "撤销发布成功",
            type: "success",
          });
        }
      });
      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.titleImgFile = [];
      this.files = [];
    },
    /** 搜索按钮操作 */
    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;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;

      this.reset();
      this.getTreeselect();

      this.value1 = "";
      this.value = "";
      this.title = "文章管理 - 新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();

      this.getTreeselect();
      // this.parentIdChange();
      const id = row.id || this.ids;
      getArticle(id).then((response) => {
        this.form = response.data;

        this.imgurl.push(response.data.titleImgFile);
        this.titleImgFile =
          response.data.titleImgFile == null ? [] : response.data.titleImgFile;
        this.files = response.data.files || [];
        this.open = true;
        this.title = "修改文章";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateArticle(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.colseDiaWZ();
              this.listByColumnId1();
            });
          } else {
            addArticle(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset();
              this.listByColumnId1();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除文章" + row.title + "？")
        .then(function () {
          return delArticle(ids);
        })
        .then(() => {
          this.listByColumnId1();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    // handleExport() {
    //   this.download(
    //     "oa/article/export",
    //     {
    //       ...this.queryParams,
    //     },
    //     `article_${new Date().getTime()}.xlsx`
    //   );
    // },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}
::v-deep.hover-li-div:hover {
  color: #34a0f1 !important;
}
::v-deep .v-modal {
  opacity: 0;

  background: rgba(255, 255, 255, 0.5);
}
::v-deep .el-upload-dragger {
  padding: 5px;
  background-color: #ecf5ff;
}
.hover-li:hover {
  background-color: #f5f7fa;
}
.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;
}
::v-deep .grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 0px;
}
::v-deep .grid-content .ep-bg-purple {
  padding: 0px !important;
}
::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 30px;
  cursor: pointer;
}
::v-deep .el-tree-node__label {
  font-size: 16px;
}
::v-deep .el-tree {
  margin-top: 8px;
}

::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;
//   padding: 10px 20px !important;
// }
::v-deep .el-dialog__body {
  padding-top: 10px !important;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}
::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>
