<template>
  <div v-loading="maskLoading">
    <div flex style="height: 100%; padding: 0 10px; background: #fff">
      <base-layout
        :defaultButtonSwitch="false"
        title="项目分类"
        :queryShow="false"
        ref="treeLayout"
        class="fenlei"
      >
        <div
          slot="main"
          style="overflow: auto; height: calc(100vh - 150px) !important"
        >
          <div class="addBtn" @click="classifyFuncBtn()">
            <i class="el-icon-plus"></i>
          </div>
          <div
            v-for="(item, index) in classifyList"
            :key="index"
            flex
            class="classifyBox"
            @click="listClick(item)"
            :class="{ active: item.id == projectClassificationID }"
          >
            <i class="el-icon-folder"></i>
            <div class="classifyName" flex>
              <p>{{ item.name }}</p>
            </div>
            <div class="treeItemBtn" v-if="item.id != '1'">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit"
                @click.stop="editProjectClassification(item)"
                style="color: #333"
              >
              </el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click.stop="deleteProjectClassification(item)"
                style="color: #ff3b30"
              >
              </el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-coordinate"
                @click.stop="permissionProjectClassification(item)"
                style="color: #333"
              >
              </el-button>
            </div>
          </div>
        </div>
      </base-layout>
      <layout-new
        ref="layoutNew"
        @pageChange="pageChange"
        :showTitle="false"
        @onFuncBtn="getFuncBtn"
        :defaultButtonList="defaultButtonList"
        :fixedButtonList="fixedButtonList"
        :fixedButton="false"
        @onFixedBtn="onFixedBtn"
        :isPage="listSwitchState"
      >
        <div
          slot="main"
          slot-scope="{ tableHeight }"
          style="height: 100%; padding: 0 10px"
        >
          <!--        列表显示模式和豆腐块显示模式-->
          <template v-if="listSwitchState">
            <base-table
              ref="customtable"
              :border="true"
              :showIndex="true"
              :tableHeight="tableHeight"
              :tableData="tableData"
              :tableColumn="tableColumn"
              :slotrow="false"
            >
              <!-- 触发方式 -->
              <template #triggerModeId="{ row }">
                <div v-if="row.triggerModeId == 2">定时触发</div>
                <div v-else-if="row.triggerModeId == 1">应用程序触发</div>
                <div v-else-if="row.triggerModeId == 3">手动触发</div>
                <div v-else-if="row.triggerModeId == 4">Webhook触发</div>
              </template>
              <!-- 发布状态 -->
              <template #isPublic="{ row }">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    class="label_class"
                    :style="{
                      'border-color': itemColor4(row) + '!important',
                      color: itemColor(row),
                      backgroundColor: itemColor2(row),
                    }"
                  >
                    {{ itemText(row) }}
                  </div>
                </div>
              </template>
              <template #operate="{ row }">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="配置"
                  placement="top"
                >
                  <i
                    class="el-icon-setting"
                    style="
                      color: #000;
                      font-size: 12px;
                      padding: 5px;
                      background-color: #ebebeb;
                      border-radius: 4px;
                      margin-right: 2px;
                    "
                    @click="settingHandle(row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除当前行"
                  placement="top"
                >
                  <i
                    class="el-icon-delete"
                    style="
                      color: red;
                      font-size: 12px;
                      margin-left: 2px;
                      padding: 5px;
                      background-color: #ebebeb;
                      border-radius: 4px;
                      margin-right: 2px;
                    "
                    @click="deleChunkData(row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看"
                  placement="top"
                >
                  <i
                    class="el-icon-view"
                    style="
                      color: #000;
                      font-size: 12px;
                      padding: 5px;
                      margin-left: 2px;
                      background-color: #ebebeb;
                      border-radius: 4px;
                    "
                    @click="viewChunkData(row)"
                  />
                </el-tooltip>
              </template>
            </base-table>
          </template>
          <template v-else>
            <div class="diamondChunk" ref="workBox">
              <div class="diamondList">
                <div
                  class="diamondItem"
                  v-for="(item, index) in tableData"
                  :key="index"
                  :style="'max-width:' + listMaxWidth + 'px'"
                  style="position: relative"
                >
                  <div class="tableInfo">
                    <div class="leftAva">
                      <template>
                        <div class="imgBox">
                          <img
                            src="./images/pingtai.svg"
                            v-if="item.triggerModeId == 2"
                          />
                          <img
                            src="./images/naozhong.svg"
                            v-else-if="item.triggerModeId == 1"
                          />
                          <img
                            src="./images/api.svg"
                            v-else-if="item.triggerModeId == 4"
                          />
                          <img
                            src="./images/point.svg"
                            v-else-if="item.triggerModeId == 3"
                          />
                        </div>
                      </template>
                      <div class="middleBox">
                        <i
                          class="el-icon-caret-right caretBox"
                          v-if="item.stepCount && item.stepCount >= 0"
                        ></i>
                        <div class="caretCount" v-if="item.stepCount > 0">
                          {{ "+" + item.stepCount }}
                        </div>
                        <i
                          class="el-icon-caret-right caretBox"
                          v-if="item.stepCount > 0 || item.lastAppIconUrl"
                        ></i>
                      </div>

                      <template
                        v-if="
                          item.lastAppIconUrl && item.lastAppIconUrl != null
                        "
                      >
                        <div class="lastAppImg">
                          <img
                            :src="
                              item.lastAppIconUrl
                                ? item.lastAppIconUrl.split('/wwwroot')[1]
                                : ''
                            "
                          />
                        </div>
                      </template>
                      <template
                        v-if="!item.lastAppIconUrl && item.stepCount >= 0"
                      >
                        <i class="el-icon-caret-right caretBox"></i>
                        <div class="imgBox">
                          <img src="./images/huaO.svg" />
                        </div>
                      </template>
                    </div>
                  </div>
                  <div class="ruler" style="margin-top: 10px">
                    <!-- 场景名称 -->
                    <div class="value" style="font-weight: bold">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="ruler">
                    <!-- 场景描述 -->
                    <div class="value" style="color: #999999">
                      {{ item.description }}
                    </div>
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      position: absolute;
                      right: 10px;
                      top: 20px;
                    "
                  >
                    <div
                      class="label_class"
                      :style="{
                        'border-color': itemColor4(item) + '!important',
                        color: itemColor(item),
                        backgroundColor: itemColor2(item),
                      }"
                    >
                      {{ itemText(item) }}
                    </div>
                  </div>
                  <div class="shadowBox">
                    <div @click="settingHandle(item)">
                      <div class="icon">
                        <i class="el-icon-setting"></i>
                      </div>
                      <div class="iconname">配置</div>
                    </div>
                    <div @click="deleChunkData(item)">
                      <div class="icon">
                        <i class="el-icon-delete" style="color: red"></i>
                      </div>
                      <div class="iconname" style="color: red">删除</div>
                    </div>
                    <div @click="viewChunkData(item)">
                      <div class="icon">
                        <i class="el-icon-view"></i>
                      </div>
                      <div class="iconname">查看</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div slot="fixedButton" style="margin-left: 10px">
          <div class="iconSwitchBox">
            <div
              class="iconSwitch"
              :style="{ background: !listSwitchState ? '#fff' : '#f5f5f5' }"
              @click="onFixedBtn(false)"
            >
              <span class="icon el-icon-menu"></span>
            </div>
            <div
              class="iconSwitch"
              :style="{ background: listSwitchState ? '#fff' : '#f5f5f5' }"
              @click="onFixedBtn(true)"
            >
              <span class="icon el-icon-tickets"></span>
            </div>
          </div>
        </div>
        <div slot="searchListNew" style="display: flex; padding: 0 5px">
          <el-input
            v-model="searchObj.name"
            placeholder="场景名称"
            clearable
            style="width: 200px; margin-right: 10px"
            @keydown.native.enter="searchhanlde"
          ></el-input>
          <el-select
            v-model="searchObj.triggerModeId"
            @change="searchhanlde"
            placeholder="请选择触发方式"
            clearable
          >
            <el-option
              v-for="(item, index) in triggerModeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </layout-new>
    </div>
    <addSence ref="addSence" @examineHandleClose="resetTable"></addSence>
    <projectClassificationRightDialog
      ref="projectClassificationRightDialog"
      @resetTable="resetAll"
    ></projectClassificationRightDialog>
    <authorizationDialog
      ref="authorizationDialog"
      @resetTable="resetAll"
    ></authorizationDialog>
    <addDialogChunk
      ref="addDialogChunk"
      @examineHandleClose="resetTable"
    ></addDialogChunk>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import layoutNew from "./compoment/baseLayout";
import { authApi } from "@/api/apis/auth";
import configData from "./configData";
import { dynamicWidth, dynamicHeight } from "@/utils/util.js";
import addSence from "@/views/LinkUp/compoment/addSence.vue";
import projectClassificationRightDialog from "@/views/projectClassification/rightDialog.vue";
import authorizationDialog from "@/views/projectClassification/authorizationDialog.vue";
import addDialogChunk from "./compoment/addDialogChunk.vue";
export default {
  components: {
    baseLayout,
    layoutNew,
    baseTable,
    addSence,
    projectClassificationRightDialog,
    authorizationDialog,
    addDialogChunk,
  },
  data() {
    return {
      maskLoading: false,
      classifyList: [],
      projectClassificationID: "", //项目分类id
      listMaxWidth: 0,
      listSwitchState: true,
      tableData: [],
      tableColumn: configData.tableColumn,
      pageModel: {
        page: 1,
        limit: 20,
        total: "",
      },
      searchObj: {
        name: "",
        triggerModeId: "",
      },
      triggerModeOptions: [
        { label: "应用程序触发", value: 1 },
        { label: "定时触发", value: 2 },
        { label: "手动触发", value: 3 },
        { label: "Webhook触发", value: 4 },
      ],
    };
  },
  computed: {
    fixedButtonList() {
      if (this.listSwitchState) {
        return [
          {
            icon: "el-icon-menu",
            title: "切换",
          },
        ];
      } else {
        return [
          {
            icon: "el-icon-s-data",
            title: "切换",
          },
        ];
      }
    },
    defaultButtonList() {
      // const containsAddOperate = this.BtnListData.some(
      //   (item) => item.nameCN === "新增"
      // );
      // if (containsAddOperate) {
      return [
        {
          icon: "el-icon-plus",
          menuName: "新增",
        },
      ];
      // } else {
      //   return [];
      // }
    },
  },
  mounted() {
    this.openLoading("detail");
    this.$refs.layoutNew.pageClear();
    this.GetProductionTableData();
    this.getTableData();
  },
  methods: {
    // 新增项目分类
    classifyFuncBtn() {
      this.$refs.projectClassificationRightDialog.openDialog("add");
    },
    // 编辑项目分类
    editProjectClassification(row) {
      this.openLoading("detail");
      this.$refs.projectClassificationRightDialog.openDialog("edit", row);
    },
    // 删除项目分类
    deleteProjectClassification(row) {
      this.$delConfirm().then(() => {
        this.openLoading("del");
        this.productionDeleteById(row.id);
      });
    },
    async productionDeleteById(id) {
      let param = {
        id: id,
      };
      let res = await authApi(
        "sysFlowClassService",
        "",
        "deleteFlowClass",
        "",
        param
      );
      if (res.status == "200") {
        this.$vmNews("删除成功", "success");
        this.resetAll();
      }
    },
    permissionProjectClassification(row) {
      this.$refs.authorizationDialog.openDialog(row);
    },
    resetAll() {
      this.pageModel.page = 1;
      this.projectClassificationID = "";
      this.$refs.layoutNew.pageClear();
      this.GetProductionTableData();
      this.getTableData();
    },
    // 获取项目分类
    async GetProductionTableData() {
      let param = {};
      let res = await authApi(
        "sysFlowClassService",
        "",
        "queryListJson",
        "",
        param
      );
      if (res.status == "200") {
        this.classifyList = res.attribute;
        this.classifyList.unshift({
          id: "1",
          name: "全部分类",
        });
      }
    },
    // 点击左侧
    listClick(item) {
      this.projectClassificationID = item.id;
      this.getTableData();
    },
    // 查询、筛选事件
    pageChange(model) {
      this.pageModel.page = model.page;
      this.pageModel.limit = model.limit;
      this.$refs.customtable.clearRadioIndex();
      this.getTableData();
    },
    // 按钮点击事件
    getFuncBtn(btnEven) {
      if (btnEven.menuName == "新增") {
        this.$refs.addDialogChunk.openDialog(
          "-4252471217359269890",
          "3-33003",
          "add",
          3
        );

        // this.$refs.addSence.openDialog("", "add", this.projectClassificationID);
      }
    },
    //hyt 2024/08/14 切换豆腐块
    onFixedBtn(flag) {
      this.$refs.layoutNew.pageClear();
      this.pageModel.page = 1;
      this.listSwitchState = flag;
      if (!this.listSwitchState) {
        this.pageModel.limit = 9999;
        localStorage.setItem("listSwitchState", "true");
      } else {
        this.pageModel.limit = 20;
        localStorage.removeItem("listSwitchState");
      }
      this.getTableData();
    },
    //配置方法
    settingHandle(row) {
      this.$refs.addDialogChunk.openDialog(
        row.id,
        row.name,
        "edit",
        row.triggerModeId
      );
    },
    // 查看
    viewChunkData(row) {
      this.$refs.viewDialogChunk.openDialog(
        row.sceneID,
        row.sceneName,
        row.triggerMode,
        row
      );
    },
    // 豆腐块删除事件
    deleChunkData(item) {
      this.$delConfirm().then((res) => {
        let params = {
          id: item.id,
        };
        this.deleteSence(params);
      });
    },
    async deleteSence(params) {
      let res = await authApi("sysFlowService", "", "deleteFlow", "", params);

      if (res.status == "200") {
        this.$vmNews("删除成功！", "success");
        this.resetTable();
      }
    },
    resetTable() {
      this.pageModel.page = 1;
      this.getTableData();
      this.$nextTick(() => {
        this.$refs.layoutNew.setPageNum(1);
      });
    },
    searchhanlde() {
      this.pageModel.page = 1;
      if (this.listSwitchState) {
        this.$refs.layoutNew.pageClear();
      }
      this.getTableData();
    },
    // 获得表格数据
    async getTableData() {
      this.maskLoading = true;
      let params = {
        ...this.searchObj,
        pageNum: this.pageModel.page,
        pageSize: this.pageModel.limit,
        classId: this.projectClassificationID,
      };
      if (params.classId == "1") {
        params.classId = "";
      }
      setTimeout(() => {
        this.maskLoading = false;
      }, 20000);
      let res = await authApi(
        "sysFlowService",
        "",
        "queryFlowPagedInfo",
        "",
        params
      );

      if (res.status == "200") {
        this.$nextTick(() => {
          this.$refs.layoutNew.setPageTotal(res.attribute.total);
          this.pageModel.total = res.attribute.total;
        });
        this.tableData = res.attribute.list;
        this.maskLoading = false;
        this.$nextTick(() => {
          this.watchSize();
        });
      }
    },
    watchSize() {
      if (!this.listSwitchState) {
        let boxWidth = this.$refs.workBox.offsetWidth - 6;
        let listMaxWidth = dynamicWidth(boxWidth, 400, 10);
        this.listMaxWidth = listMaxWidth;
      }
    },
    itemColor(val) {
      if (val.isPublic == 1) {
        return "#0EA63C";
      } else {
        return "#333";
      }
    },
    itemColor2(val) {
      if (val.isPublic == 1) {
        return "#f9fdf0";
      } else {
        return "#f4f4f4";
      }
    },
    itemColor4(val) {
      if (val.isPublic == 1) {
        return "#0EA63C";
      } else {
        return "#C9C9C9";
      }
    },
    itemText(val) {
      if (val.isPublic == 1) {
        return "已发布";
      } else {
        return "未发布";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$activeColor: var(--bg-color, #55aaff);

.classifyBox {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  align-items: center;
  display: flex;
  position: relative;
  i {
    vertical-align: middle;
  }
  .el-icon-folder {
    vertical-align: middle;
  }
  .classifyName {
    margin-left: 0.3125rem;
  }
  .treeItemBtn {
    position: absolute;
    right: 5px;
    display: none;
  }
  &:hover {
    .treeItemBtn {
      display: block;
    }
  }
}
.classifyBox:hover {
  background-color: rgb(238, 245, 254);
  cursor: pointer;
  // text-decoration: underline;
}

.classifyBox.active {
  background-color: rgb(238, 245, 254);
}

.fenlei {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid #ededed;
  padding-right: 5px;
  position: relative;
}

// -----------------------
.labelStateName {
  padding: 2px 8px;
  border-radius: 2px;
  color: #fff;
  background: #3876ee;
  margin-left: 5px;
}

> .el-dialog--center .el-dialog__body {
  padding-top: 0 !important;
}

.diamondChunk {
  height: calc(100vh - 140px);
  overflow: auto;

  .diamondList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .diamondItem {
      min-width: 400px;
      height: 160px;
      border-radius: 8px;
      border: 1px solid #e5e5e5;
      margin: 10px 5px;
      padding: 20px 10px;
      position: relative;
      flex: 1;

      .tableInfo {
        display: flex;
        //align-items: center;
        justify-content: flex-start;

        .leftAva {
          // width: 44px;
          // height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }
        .lastAppImg {
          width: 44px;
          height: 44px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .caretBox {
          color: #d8d8d8;
          margin-right: 10px;
        }
        .imgBox {
          margin-right: 10px;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #f18709;

          img {
            width: 60%;
            height: 60%;
          }
        }

        .rightInfo {
          flex: 1;
          margin-left: 15px;

          .infotitle {
            display: flex;
            align-items: center;
            font-size: 18px;
            color: #333;
            align-items: center;

            .text {
              display: -webkit-box;
              /*作为弹性伸缩盒子模型显示。*/
              -webkit-box-orient: vertical;
              /*作为弹性伸缩盒子模型显示。*/
              -webkit-line-clamp: 1; //*显示的行*/
              overflow: hidden;
              /*溢出隐藏*/
              /* 对于连字情况或者纯字母，可以解决 */
              word-break: break-all;
              max-width: 100px;
            }

            .classify {
              margin-left: 10px;
              height: 16px;
              background: #fff;
              border-radius: 2px;
              font-size: 12px;
              color: #ff8b0f;
              text-align: center;
              border: 1px solid #ff8b0f;
              padding: 0 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              min-width: 30px;
              max-width: 100px;
            }
          }

          .switchList {
            margin-top: 9px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            > div {
              color: #999;
              font-size: 14px;
              display: flex;
              align-items: center;
              flex: 1;

              .littletitle {
                width: 60px;
                text-align: right;
                margin-right: 10px;
              }

              .value {
                flex: 1;
              }

              &:nth-child(2) {
                flex: 0.7;
              }
            }
          }

          .infoChunk {
            margin-top: 9px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            > div {
              color: #999;
              font-size: 14px;
              display: flex;
              align-items: center;
              flex: 1;

              .littletitle {
                width: 60px;
                text-align: right;
                margin-right: 10px;
              }

              .value {
                flex: 1;
                display: -webkit-box;
                /*作为弹性伸缩盒子模型显示。*/
                -webkit-box-orient: vertical;
                /*作为弹性伸缩盒子模型显示。*/
                -webkit-line-clamp: 1; //*显示的行*/
                overflow: hidden;
                /*溢出隐藏*/
                /* 对于连字情况或者纯字母，可以解决 */
                word-break: break-all;
              }

              &:nth-child(2) {
                flex: 0.7;
              }
            }
          }
        }
      }

      .ruler {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-top: 5px;

        .rulerTitle {
          width: 60px;
          color: #999;
          margin-right: 10px;
        }

        .value {
          flex: 1;
          color: #333;
          display: -webkit-box;
          /*作为弹性伸缩盒子模型显示。*/
          -webkit-box-orient: vertical;
          /*作为弹性伸缩盒子模型显示。*/
          -webkit-line-clamp: 2; //*显示的行*/
          overflow: hidden;
          /*溢出隐藏*/
          /* 对于连字情况或者纯字母，可以解决 */
          word-break: break-all;
        }
      }

      .functionContent {
        display: flex;
        font-size: 14px;
        margin-top: 5px;

        .functionTitle {
          width: 60px;
          color: #999;
          margin-right: 10px;
        }

        .value {
          flex: 1;
          color: #333;
          display: -webkit-box;
          /*作为弹性伸缩盒子模型显示。*/
          -webkit-box-orient: vertical;
          /*作为弹性伸缩盒子模型显示。*/
          -webkit-line-clamp: 2; //*显示的行*/
          overflow: hidden;
          /*溢出隐藏*/
          /* 对于连字情况或者纯字母，可以解决 */
          word-break: break-all;
        }
      }

      .shadowBox {
        display: none;
        width: 100%;
        height: 80px;
        background: #000000;
        border-radius: 0px 0px 8px 8px;
        opacity: 0.7;
        position: absolute;
        bottom: 0;
        left: 0;

        > div {
          .icon {
            font-size: 22px;
          }
        }
      }

      &:hover {
        .shadowBox {
          display: flex;
          justify-content: center;
          align-items: center;

          > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            margin: 0 10%;

            .iconname {
              margin-top: 7px;
            }
          }
        }
      }
    }
  }
}

.middleBox {
  display: flex;
  align-items: center;

  .caretCount {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 10px;
    background: #f2f2f2;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
}
.switchList {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > div {
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex: 1;

    .littletitle {
      width: 60px;
      text-align: right;
      margin-right: 10px;
    }

    .value {
      flex: 1;
    }

    &:nth-child(2) {
      flex: 0.7;
    }
  }
}

.switchListTwo {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > div {
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: center;

    .littletitle {
      text-align: left;
      margin-right: 10px;
    }

    .value {
    }
  }
}

.textChunk {
  display: -webkit-box;
  /*作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient: vertical;
  /*作为弹性伸缩盒子模型显示。*/
  -webkit-line-clamp: 1; //*显示的行*/
  overflow: hidden;
  /*溢出隐藏*/
  /* 对于连字情况或者纯字母，可以解决 */
  word-break: break-all;
  max-width: 100px;
}

.classify {
  margin-left: 5px;
  height: 16px;
  background: #fff;
  border-radius: 2px;
  font-size: 12px;
  color: #ff8b0f;
  text-align: center;
  border: 1px solid #ff8b0f;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  max-width: 100px;
}

/* 切换图标样式 */
.iconSwitchBox {
  width: 60px;
  height: 32px;
  border-radius: 4px;
  background-color: #f5f5f5;
  padding: 2px;
  display: flex !important;
  align-items: center;
  font-size: 12px !important;

  .iconfont {
    font-size: 12px !important;
  }
}

.iconSwitch {
  width: 50%;
  border-radius: 3px;
  text-align: center;
  height: 100%;
  line-height: 28px;
  cursor: pointer;
}

/* 标签统一样式 */
.label_class {
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
  border: 1px solid;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  overflow: hidden;
  width: max-content !important;
  font-weight: normal;
}

.addBtn {
  position: absolute;
  background: #f5f5f5;

  top: 18px;
  right: 13px;
  border-radius: 4px;
  padding: 3px 5px;
  font-weight: bold;

  i {
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
}
</style>