<template>
  <div>
    <base-right-dialog
      ref="baseRightDialog"
      :drwaerHeader="false"
      :dialogVisible.sync="dialogVisible"
      size="95%"
      :appendBody="true"
      :footerShow="true"
      :submitTitle="'保存'"
      :title="dialogTitle + ' 消息模版'"
      @handleClose="handleClose"
      @handleConfirmClick="handleConfirmClick"
    >
      <template v-slot:addButton>
        <el-button @click="resetAll" style="margin-left: 10px">重置</el-button>
      </template>
      <div class="dialogContainer">
        <div class="dialogBox">
          <div class="title_box">
            <span class="title globalVerticalLine">模板信息</span>
          </div>
          <base-form
            ref="basicsForm"
            :formRow="topFormRow"
            :spanNumber="8"
            :isFunBtn="false"
            style="padding: 10px 0 0 15px"
            :rules="basicsRules"
            :spanWidth="'56px'"
          >
          </base-form>
        </div>
        <div class="dialogBox">
          <div class="title_box">
            <span class="title globalVerticalLine">数据源</span>
          </div>
          <div class="sqlSourseBox">
            <div class="sqlBox">
              <el-input type="textarea" :rows="5" v-model="sqlStr"></el-input>
              <el-button
                type="primary"
                style="margin: 10px 0; float: right"
                @click="checkSql"
                >SQL校验
              </el-button>
            </div>
            <div class="sourceBox" v-loading="SQLBtnLoading">
              <el-button
                type="primary"
                size="small"
                class="btn"
                v-for="(item, index) in dataSource"
                :key="index"
                @click="insertCustomText(item.COLUMN_NAME)"
                >{{ item.COLUMN_NAME }}
              </el-button>
            </div>
          </div>
        </div>
        <div class="OperationAreaBox">
          <div class="OperationArea">
            <div class="dialogBox" style="padding: 0">
              <div class="title_box" style="padding: 10px">
                <span class="title globalVerticalLine">消息内容配置区</span>
              </div>
              <div class="messageBox" style="padding: 0 10px">
                <div class="itemBox" style="margin-top: 10px">
                  <label>标题</label>
                  <div
                    class="assembleItem"
                    :class="{ active: areaTitle == '标题配置' }"
                    @click="settingContent('标题')"
                  >
                    <div
                      class="ItemInput"
                      v-html="
                        !messageData.messageTitle ||
                        messageData.messageTitle == '<p><br></p>'
                          ? '请输入标题'
                          : messageData.messageTitle
                      "
                      :style="{
                        color:
                          !messageData.messageTitle ||
                          messageData.messageTitle == '<p><br></p>'
                            ? '#d4d4d4'
                            : '#000',
                      }"
                    ></div>
                    <div
                      class="itemIcon el-icon-setting"
                      @click="settingContent('标题')"
                    ></div>
                  </div>
                </div>
                <div class="itemBox">
                  <label>内容</label>
                  <div
                    class="assembleItem"
                    :class="{ active: areaTitle == '内容配置' }"
                    @click="settingContent('内容')"
                   
                  >
                    <div
                      class="ItemInput ItemInputContent"
                      v-html="
                        !messageData.messageContents ||
                        messageData.messageContents == '<p><br></p>'
                          ? '请输入内容'
                          : messageData.messageContents
                      "
                      :style="{
                        color:
                          !messageData.messageContents ||
                          messageData.messageContents == '<p><br></p>'
                            ? '#d4d4d4'
                            : '#000',
                      }"
                       style="padding-top: 10px"
                    ></div>
                    <div
                      class="itemIcon el-icon-setting ItemIconContent"
                      @click="settingContent('内容')"
                    ></div>
                  </div>
                </div>
                <div class="messageBtnsBox">
                  <div class="btnTitle">
                    <div
                      style="width: 50px; text-align: center; margin-left: 11px"
                    >
                      按钮
                    </div>
                    <el-button type="text" @click="addMessageBtn"
                      >+ 增加</el-button
                    >
                  </div>
                  <div style="">
                    <div
                      class="btnsContianer"
                      v-for="(el, elIndex) in messageBtns"
                      :key="elIndex"
                    >
                      <div class="itemContent">
                        <div class="itemBox" style="margin-top: 10px">
                          <div
                            style="
                              width: 265px;
                              display: flex;
                              align-items: center;
                            "
                          >
                            <label style="margin-left: 8px">PC</label>
                            <el-input
                              class="btnClass"
                              v-model="el.pcTitle"
                              placeholder="按钮名称"
                              :class="btnClass[el.pcColor]"
                            ></el-input>
                            <div class="colorBox">
                              <div
                                v-for="(item1, index) in btnOption"
                                :key="index"
                                class="ColorBlock"
                                :style="{ background: item1 }"
                                @click="colorBoxClick(item1, el, 'pc')"
                              >
                                <i
                                  class="el-icon-check"
                                  style="font-size: 12px"
                                  v-if="el.pcColor == item1"
                                  :style="{
                                    color:
                                      el.pcColor == '#ffffff'
                                        ? '#000000'
                                        : '#ffffff',
                                  }"
                                ></i>
                              </div>
                            </div>
                          </div>
                          <div
                            class="assembleItem"
                            style="width: calc(100% - 265px)"
                            :class="{
                              active:
                                areaTitle == 'PC按钮配置' &&
                                currentIndex == elIndex,
                            }"
                            @click="settingBtnsContent('pc', el, elIndex)"
                          >
                            <div
                              class="ItemInput"
                              v-html="
                                !el.pcRoute || el.pcRoute == '<p><br></p>'
                                  ? '配置PC按钮'
                                  : el.pcRoute
                              "
                              :style="{
                                color:
                                  !el.pcRoute || el.pcRoute == '<p><br></p>'
                                    ? '#d4d4d4'
                                    : '#000',
                              }"
                            ></div>
                            <div
                              class="itemIcon el-icon-setting"
                              @click="settingBtnsContent('pc', el, elIndex)"
                            ></div>
                          </div>
                        </div>
                        <div class="itemBox">
                          <div
                            style="
                              width: 265px;
                              display: flex;
                              align-items: center;
                            "
                          >
                            <label style="margin-left: 8px">APP</label>
                            <el-input
                              class="btnClass"
                              v-model="el.appTitle"
                              placeholder="按钮名称"
                              :class="btnClass[el.appColor]"
                            ></el-input>
                            <div class="colorBox">
                              <div
                                v-for="(item, index) in btnOption"
                                :key="index"
                                class="ColorBlock"
                                :style="{ background: item }"
                                @click="colorBoxClick(item, el, 'app')"
                              >
                                <i
                                  class="el-icon-check"
                                  style="font-size: 12px"
                                  v-if="el.appColor == item"
                                  :style="{
                                    color:
                                      el.appColor == '#ffffff'
                                        ? '#000000'
                                        : '#ffffff',
                                  }"
                                ></i>
                              </div>
                            </div>
                          </div>
                          <div
                            class="assembleItem"
                            style="width: calc(100% - 265px)"
                            :class="{
                              active:
                                areaTitle == 'APP按钮配置' &&
                                currentIndex == elIndex,
                            }"
                            @click="settingBtnsContent('app', el, elIndex)"
                          >
                            <div
                              class="ItemInput"
                              v-html="
                                !el.appRoute || el.appRoute == '<p><br></p>'
                                  ? '配置APP按钮'
                                  : el.appRoute
                              "
                              :style="{
                                color:
                                  !el.appRoute || el.appRoute == '<p><br></p>'
                                    ? '#d4d4d4'
                                    : '#000',
                              }"
                            ></div>
                            <div
                              class="itemIcon el-icon-setting"
                              @click="settingBtnsContent('app', el, elIndex)"
                            ></div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="el-icon-delete itemDelete"
                        @click="deleteMessageBtn(elIndex)"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="OperationArea" style="margin-left: 10px">
            <div class="dialogBox">
              <div class="title_box">
                <span class="title globalVerticalLine">操作区</span>
              </div>
              <!-- <h3 style="text-align: center">{{ areaTitle }}</h3> -->
              <div v-if="showArea">
                <editorVue
                  :content="editorInnerHtml"
                  :readOnlys="readOnlys"
                  ref="editorVue"
                  :htmlContent="htmlContent"
                  @changeData="hChangeData"
                  @uploadImg="hUploadImg"
                ></editorVue>
                <!-- <div class="btnGroup">
                  <el-button
                    type="primary"
                    class="btn"
                    @click="confirmEditor(true)"
                    >确定</el-button
                  >
                  <el-button class="btn" @click="clearEditor">清空</el-button>
                </div> -->
              </div>
              <div v-else>
                <el-empty description="请点击左侧设置按钮"></el-empty>
              </div>
            </div>
          </div>
        </div>
      </div>
    </base-right-dialog>
  </div>
</template>

<script>
import baseRightDialog from "@/components/base/baseRightDialog";
import baseForm from "@/components/base/baseNewForm/index.vue";
import { encryp, decrypt } from "@/utils/cryptoEncryption";
import editorVue from "./editorVue.vue";
import { getApiModuleApi } from "@/api/apiChunks/index.js";
import {
  BillMachineCheckSql,
  BillMachineSaveDataSource,
  SaveMessageTemplate,
} from "@/api/apis/documentManagement";
export default {
  components: {
    baseRightDialog,
    baseForm,
    editorVue,
  },
  props: {
    billKindID: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "",
      topFormRow: [
        {
          elCol: [
            {
              label: "模版名称",
              prop: "templateName",
              tag: "elInput",
              placeholder: "请输入模版名称",
              span: 12,
            },
            {
              label: "模版类型",
              prop: "templateType",
              tag: "elRadio",
              options: [
                {
                  label: "卡片模版",
                  value: "卡片模版",
                },
                {
                  label: "文本模版",
                  value: "文本模版",
                },
              ],
              span: 12,
            },
          ],
        },
      ],
      basicsRules: {
        templateName: [
          {
            required: true,
            message: "请输入模版名称",
            trigger: "change",
          },
        ],
        templateType: [
          {
            required: true,
            message: "请选择模版类型",
            trigger: "change",
          },
        ],
      },
      sqlStr: "",
      dataSource: [],
      readOnlys: false,
      editorInnerHtml: "",
      messageData: {
        messageTitle: "",
        messageContents: "",
        // btns: [],
        dataSource: "",
      },
      messageBtns: [],
      btnOption: [
        "#ffffff",
        "#409EFF",
        "#67C23A",
        "#909399",
        "#E6A23C",
        "#F56C6C",
      ],
      btnClass: {
        "#ffffff": "wtBtn",
        "#409EFF": "blBtn",
        "#67C23A": "grBtn",
        "#909399": "greyBtn",
        "#E6A23C": "orBtn",
        "#F56C6C": "reBtn",
      },
      showArea: false,
      areaTitle: "",
      currentIndex: null,
      SQLBtnLoading: false,
      htmlContent: "",
    };
  },
  methods: {
    // 打开弹窗
    openDialog(type, row) {
      this.dialogVisible = true;
      if (type == "add") {
        this.dialogTitle = "新增";
        this.addMessageBtn();
      }
      if (type == "edit") {
        this.dialogTitle = "编辑";
        this.$nextTick(() => {
          this.$refs.basicsForm.choiceAssignment(row);
          this.messageData.messageTitle = row.messageTitle;
          this.messageData.messageContents = row.messageContents;
          this.messageBtns = row.btns ? row.btns :[];
          if (row.dataSource) {
            this.sqlStr = row.dataSource;
            this.checkSql();
          }
        });
      }
    },
    // 消息标题、消息内容被点击
    settingContent(type) {
      this.showArea = true;
      this.$nextTick(() => {
        if (type == "标题") {
          this.areaTitle = "标题配置";
          this.editorInnerHtml = this.$refs.editorVue.setEditorInnerHTML(
            this.messageData.messageTitle
          );
        }
        if (type == "内容") {
          this.areaTitle = "内容配置";
          if (this.$refs.editorVue) {
            this.editorInnerHtml = this.$refs.editorVue.setEditorInnerHTML(
              this.messageData.messageContents
            );
          }
        }
      });
    },
    // 按钮组被点击
    settingBtnsContent(type, row, rowIndex) {
      this.showArea = true;
      this.currentIndex = rowIndex;
      this.$nextTick(() => {
        if (type == "pc") {
          this.areaTitle = "PC按钮配置";
          if (this.$refs.editorVue) {
            this.editorInnerHtml = this.$refs.editorVue.setEditorInnerHTML(
              row.pcRoute
            );
          }
        }
        if (type == "app") {
          this.areaTitle = "APP按钮配置";
          if (this.$refs.editorVue) {
            this.editorInnerHtml = this.$refs.editorVue.setEditorInnerHTML(
              row.appRoute
            );
          }
        }
      });
    },
    // 富文本确定事件
    confirmEditor(type = true) {
      if (this.areaTitle == "标题配置") {
        this.messageData.messageTitle = this.editorInnerHtml;
      }
      if (this.areaTitle == "内容配置") {
        this.messageData.messageContents = this.editorInnerHtml;
      }
      if (this.areaTitle == "PC按钮配置") {
        this.$set(
          this.messageBtns[this.currentIndex],
          "pcRoute",
          this.editorInnerHtml
        );
      }
      if (this.areaTitle == "APP按钮配置") {
        this.$set(
          this.messageBtns[this.currentIndex],
          "appRoute",
          this.editorInnerHtml
        );
      }
      if (type) {
        this.currentIndex = null;
        this.editorInnerHtml = "";
        this.showArea = false;
      }
    },
    // 清空富文本
    clearEditor() {
      this.$refs.editorVue.editor.setHtml("<p></p>");
    },
    // 新增按钮
    addMessageBtn() {
      let obj = {
        pcTitle: "",
        pcColor: "#409EFF",
        pcRoute: "",
        appTitle: "",
        appColor: "#409EFF",
        appRoute: "",
      };
      this.messageBtns.push(obj);
    },
    // 按钮删除
    deleteMessageBtn(index) {
      this.messageBtns.splice(index, 1);
    },
    // 消息颜色块被点击
    colorBoxClick(color, row, type) {
      if (type == "pc") {
        this.$set(row, "pcColor", color);
      }
      if (type == "app") {
        this.$set(row, "appColor", color);
      }
    },
    hChangeData(editDataHtml) {
      // 获取最新的html数据
      // this.content = editDataHtml;
      this.editorInnerHtml = editDataHtml;
      this.confirmEditor(false);
    },
    hUploadImg(file, insertFn, url) {
      if (
        this.areaTitle == "APP按钮配置" ||
        this.areaTitle == "PC按钮配置" ||
        this.areaTitle == "标题配置"
      ) {
        this.$vmNews(this.areaTitle + "不支持图片 插入");
        return;
      }
      // 插入图片，调接口返回图片url,通过插入conteng
      // let imgUrl =
      // 	"https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800";
      insertFn(url);

      // 设置只读
      // this.readOnlys = true;
    },
    // 数据源被点击
    insertCustomText(key) {
      if (this.$refs.editorVue) {
        this.$refs.editorVue.editor.insertText("${" + key + "}");
      }
    },
    // SQL校验
    async checkSql() {
      if (!this.sqlStr) {
        this.$vmNews("请输入SQL！", "warning");
        return;
      }
      if (this.dataSource.length > 0) {
        this.$confirm("当前操作会覆盖右侧数据源，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.BillMachineCheckSql();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消操作",
            });
          });
      } else {
        this.BillMachineCheckSql();
      }
    },
    async BillMachineCheckSql() {
      // let column = this.sqlStr
      //   .substring(
      //     this.sqlStr.indexOf("select") + 6,
      //     this.sqlStr.indexOf("from")
      //   )
      //   .split(",")
      //   .map((column) => column.trim())
      //   .join(", ");
      // let tablesList = [];
      // if (this.sqlStr.indexOf("where") != -1) {
      //   let tables = this.sqlStr.substring(
      //     this.sqlStr.indexOf("from") + 4,
      //     this.sqlStr.indexOf("where")
      //   );
      //   tablesList.push(tables);
      // } else {
      //   const regex = /join(.*?) on/g;
      //   let match;
      //   while ((match = regex.exec(this.sqlStr)) !== null) {
      //     tablesList.push(match[1]);
      //   }
      //   if (this.sqlStr.indexOf("left") != -1) {
      //     let tables = this.sqlStr.substring(
      //       this.sqlStr.indexOf("from") + 4,
      //       this.sqlStr.indexOf("left")
      //     );
      //     tablesList.push(tables);
      //   } else if (this.sqlStr.indexOf("right") != -1) {
      //     let tables = this.sqlStr.substring(
      //       this.sqlStr.indexOf("from") + 4,
      //       this.sqlStr.indexOf("right")
      //     );
      //     tablesList.push(tables);
      //   }
      // }
      this.SQLBtnLoading = true;
      setTimeout(() => {
        this.SQLBtnLoading = false;
      }, 5000);
      let params = {
        // sqlStr: encryp(this.sqlStr),
        // column: column,
        // tables: tablesList.join(","),
        sql:this.sqlStr
      };
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "checkSql",
        },
        {
          ...params,
        }
      );
      this.SQLBtnLoading = false;
      if (res.status == 200 || res.status == "200") {
        this.sqlCheck = true;
        this.dataSource = res.attribute;
      }
      // let res = await BillMachineCheckSql(params);
      // this.SQLBtnLoading = false;
      // if (res.code == 1) {
      //   this.sqlCheck = true;
      //   this.dataSource = res.data[0];
      // }
    },
    handleConfirmClick() {
      this.$refs.basicsForm.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          this.$tipConfirm("请输入必填项");
          return;
        } else {
          let data = this.$refs.basicsForm.ruleForm;
          let params = {
            ...data,
            ...this.messageData,
            dataSource: this.sqlStr,
            state: 1,
            billKindID: this.billKindID,
            btns: JSON.stringify(this.messageBtns),
          };
          if (!params.messageTitle) {
            this.$vmNews("请配置消息标题", "warning");
            return;
          }
          if (!params.messageContents) {
            this.$vmNews("请配置消息内容", "warning");
            return;
          }
          this.openLoading("submit");
          if (params.id == "" || params.id == null || params.id == undefined) {
            this.SaveMessageTemplate(params);
          } else {
            this.updateMessageTemplate(params);
          }
        }
      });
    },
    async SaveMessageTemplate(params) {
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "saveEntity",
        },
        {
          ...params,
        }
      );
      if (res.status == 200 || res.status == "200") {
        this.$vmNews("保存成功！", "success");
        this.handleClose();
        this.$emit("handleConfirmClick");
      }
    },
    async updateMessageTemplate(params) {
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "updateEntity",
        },
        {
          ...params,
        }
      );
      if (res.status == 200 || res.status == "200") {
        this.$vmNews("修改成功！", "success");
        this.handleClose();
        this.$emit("handleConfirmClick");
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.$nextTick(() => {
        this.$refs.basicsForm.resetFields();
        this.messageData = {
          messageTitle: "",
          messageContents: "",
          dataSource: "",
        };
        this.sqlStr = "";
        this.dataSource = [];
        this.messageBtns = [];
        this.currentIndex = null;
        this.areaTitle = "";
        this.editorInnerHtml = "";
        if (this.$refs.editorVue) {
          this.clearEditor();
          this.showArea = false;
        }
      });
    },
    // 重置所有
    resetAll() {
      this.$confirm("当前操作会重置所有，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$nextTick(() => {
            this.$refs.basicsForm.resetFields();
            this.messageData = {
              messageTitle: "",
              messageContents: "",
              dataSource: "",
            };
            this.sqlStr = "";
            this.dataSource = [];
            this.messageBtns = [];
            this.currentIndex = null;
            this.areaTitle = "";
            this.editorInnerHtml = "";
            if (this.$refs.editorVue) {
              this.clearEditor();
              this.showArea = false;
            }
            this.addMessageBtn();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.dialogContainer {
  width: 100%;
  height: 100%;
  padding: 10px 0;

  .dialogBox {
    background: #ffffff;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    // border-bottom: 10px solid #f5f5f5;

    .title_box {
      width: 100%;
      border-bottom: 1px solid #fafafa;
      padding-bottom: 10px;

      .title {
        font-size: 16px;
        color: #000;
        padding-left: 8px;
        text-align: left;
      }
    }
  }

  .sqlSourseBox {
    width: 100%;
    display: flex;
    padding: 10px 10px 0 10px;
    margin-left: 11px;

    .sqlBox {
      width: 48%;
    }

    .sourceBox {
      width: 50%;
      margin-left: 15px;
      height: 160px;
      overflow-y: auto;
      padding-left: 10px;

      .btn {
        margin: 0 8px 8px 0;
      }
    }
  }

  .OperationAreaBox {
    width: 100%;
    display: flex;
    padding-bottom: 40px;

    .OperationArea {
      width: 50%;

      .dialogBox {
        height: 70vh;
      }

      .btnGroup {
        float: right;
        margin: 10px 0;
      }
    }
  }

  .messageBox {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    height: calc(100% - 40px);
    overflow-y: auto;

    .itemBox {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      label {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        text-align: center;
        margin-left: 11px;
        font-family: PingFangSC, PingFang SC;
      }
      .assembleItem.active {
        border-color: #55aaff;
      }
      .assembleItem {
        display: flex;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        width: calc(100% - 50px);
        padding: 0 8px;
        outline: 0;
        position: relative;
        font-size: 14px;

        .ItemInput {
          width: calc(100% - 50px);
          height: 36px;
          line-height: 36px;
          box-sizing: border-box;
          overflow: hidden;
          /*溢出隐藏*/
          /* 对于连字情况或者纯字母，可以解决 */
          word-break: break-all;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .itemIcon {
          background-color: #ccc;
          color: #333333;
          width: 47px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 3px 3px 0;
          position: absolute;
          right: 0;
          height: 36px;
          line-height: 36px;
        }

        .ItemInputContent {
          height: 180px;
          line-height: unset;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 5;
          white-space: pre-wrap;
        }

        .ItemIconContent {
          height: 180px;
          line-height: 180px;
        }
      }
    }

    .messageBtnsBox {
      // height: calc(100% - 250px);
      // overflow-y: auto;
      display: flex;
      flex-direction: column;

      .btnTitle {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .Add {
          cursor: pointer;
          color: #1477f3;
        }
      }
      .btnClass {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
        margin: 0 10px;
      }
      ::v-deep .btnClass .el-input__inner {
        text-align: center;
      }
      ::v-deep .btnClass.wtBtn .el-input__inner {
        background-color: #fff;
        color: #000;
      }
      ::v-deep .btnClass.blBtn .el-input__inner {
        background-color: #409eff;
        color: #ffffff;
      }
      ::v-deep .btnClass.grBtn .el-input__inner {
        background-color: #67c23a;
        color: #ffffff;
      }
      ::v-deep .btnClass.greyBtn .el-input__inner {
        background-color: #909399;
        color: #ffffff;
      }
      ::v-deep .btnClass.orBtn .el-input__inner {
        background-color: #e6a23c;
        color: #ffffff;
      }
      ::v-deep .btnClass.reBtn .el-input__inner {
        background-color: #f56c6c;
        color: #ffffff;
      }
    }
  }

  .btnsContianer {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 10px 10px 10px 0;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: calc(100% - 20px);
    margin-left: 20px;
  }

  .itemContent {
    width: calc(100% - 30px);
    overflow-y: auto;
  }

  .itemDelete {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    cursor: pointer;
    color: #fa0303;
  }

  .colorBox {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    display: flex;
    flex-wrap: wrap;
    margin-right: 5px;
  }

  .ColorBlock {
    width: 13px;
    height: 13px;
    background: #6dd338;
    border-radius: 4px;
    margin: 2px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
}

.globalVerticalLine {
  &::before {
    content: "";
    background: #2261f6;
    display: inline-block;
    width: 3px;
    height: 18px;
    position: relative;
    margin-right: 10px;
    top: 4px;
  }
}
::v-deep .el-form-item__label .label {
  font-size: 14px;
  color: #666666;
}
</style>
