<template>
  <div class="index-home">
    <el-row>
      <el-col :span="8">
        <div class="i-user-info">
          <img class="img" v-if="headPhotoUrl" :src="headPhotoUrl" />
          <p class="name">{{ $t1("您好") }}，{{ userInfo.nickName }}</p>
          <p>{{ companyInfo.companyName }}</p>
        </div>
        <div class="notice-box">
          <div class="txt" @click="openMoreNotifyMessage()">
            <i class="iconfont icon-xiaoxitongzhi"></i>
            <span
              v-if="unreadMessageNum > 0"
              v-html="
                $t1('您 有{number}条 未读消息，请及时查看。', {
                  number: `<b>${
                    unreadMessageNum > 99 ? '99+' : unreadMessageNum
                  }</b>`,
                })
              "
            >
            </span>
            <span v-else-if="unreadMessageNum == 0">
              {{ $t1("您 暂无 未读消息。") }}
            </span>
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t1('刷新')"
            placement="top"
          >
            <el-button type="text" @click="getUnreadMessageNum(true)"
              ><i class="el-icon-refresh"></i
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t1('查看更多')"
            placement="top"
          >
            <el-button
              type="text"
              @click="openMoreNotifyMessage()"
              class="more"
            >
              <i class="el-icon-news"></i>
            </el-button>
          </el-tooltip>
        </div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="float: left">
              <i class="el-icon-chat-line-round ico"></i>
              {{ $t1("公告") }}
            </span>
            <el-button type="text" @click="openSystemNoticeDialog()"
              ><span class="more">MORE+</span></el-button
            >
          </div>
          <div class="home-notice-list">
            <div
              v-for="(systemNotice, index) in systemNotices"
              :key="index"
              class="item"
              @click="openSystemNoticeDialog(systemNotice)"
              :title="systemNotice.title"
            >
              {{ systemNotice.title }}
              <span class="time">{{
                systemNotice.modifyDate.substring(0, 10)
              }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="homeConfig.toDoSpan || 16" style="padding-left: 6px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="float: left">
              <i class="el-icon-chat-line-round ico"></i>
              {{ $t1("待办事项") }}
            </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t1('刷新')"
              placement="top"
            >
              <el-button
                type="text"
                @click="getWfInfoList(true)"
                class="more"
                style="right: 107px"
              >
                <i class="el-icon-refresh"></i>
              </el-button>
            </el-tooltip>
            <el-button type="text" @click="toWorkflowManage()" class="more">
              <i class="el-icon-news"></i>
              <span>{{ $t1("查看更多+") }}</span>
            </el-button>
          </div>
          <div class="need-to">
            <vxe-grid
              :data="unDoWfRows"
              ref="table-wf"
              v-bind="wfOption"
              @resizable-change="$vxeTableUtil.onColumnWitchChange"
              @custom="$vxeTableUtil.customHandle"
            ></vxe-grid>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" v-show="homeConfig.showFastTrack !== false">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="float: left">
              <i class="el-icon-star-off ico"></i>
              {{ $t1("快捷通道") }}
            </span>
            <el-button type="text" @click="showCommMenuDialog = true"
              ><span class="more">MORE+</span></el-button
            >
          </div>
          <div class="fast-box">
            <div class="item" v-for="commMenu in commMenus" :key="commMenu.id">
              <a href="javascript:void(0);" @click="rourteTo(commMenu)">
                <p>
                  <i
                    :class="
                      !!commMenu.menuImg ? 'iconfont ' + commMenu.menuImg : null
                    "
                  ></i
                  ><span>{{ commMenu.menuName }}</span>
                </p>
              </a>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
                  <span style="float:left">
                    <i class="el-icon-message ico"></i>
                    消息通知
                  </span>
            <el-button type="text" @click="openNotifyTemplateGroupDialog" class="more" style="right:100px">
              <i class="el-icon-receiving"></i>
              <span>选择分组</span>
            </el-button>
            <el-button type="text" @click="openMoreNotifyMessage()" class="more">
              <i class="el-icon-news"></i>
              <span>查看更多+</span>
            </el-button>
          </div>
          <div class="home-notice-list to-reed" style="height: 400px;">
            <div v-for="(notifyMessage,index) in notifyMessages" class="item"
                 :class="{noread:notifyMessage.readed == 0}"
                 :title="notifyMessage.content"  @click="checkNotifyMessage(notifyMessage,index)">
              <div class="clearfix">
                <el-tag type="warning">{{
                    notifyMessage.notifyTypeName
                  }}
                </el-tag>
                <span class="time">{{
                    notifyMessage.createDate
                  }}</span>
                <div class="btns fr">
                  <el-link type="primary" @click.stop="openNotifyMessageDialog(notifyMessage)"><i class="el-icon-files"></i>
                  </el-link>
                </div>
              </div>
              <span class="name">{{ notifyMessage.content }}</span>
            </div>
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    <slot></slot>
    <systemNoticeInfoDialog
      v-if="showSystemNoticeInfoDialog"
      :visiable.sync="showSystemNoticeInfoDialog"
      :param="csnRow"
      :appendToTop="true"
    ></systemNoticeInfoDialog>

    <commMenuDialog
      v-if="showCommMenuDialog"
      :visiable.sync="showCommMenuDialog"
      @confirm="commMenuCallBack"
    ></commMenuDialog>
    <wfContentDialog
      v-if="showWfDialog"
      :visible.sync="showWfDialog"
      @close="wfClose"
      :option.sync="wfContentOption"
    ></wfContentDialog>

    <notifyMessageDialog ref="notifyMessageDialog"></notifyMessageDialog>

    <notifyMessageInfoDialog
      v-if="showNoticeDialog"
      :visiable.sync="showNoticeDialog"
      :dataId.sync="notifyMessageInfoId"
      @readHanlde="notifyMessageReadHanlde"
    ></notifyMessageInfoDialog>

    <el-dialog
      :title="$t1('选择分组')"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-if="showGroupDialog"
      :visible.sync="showGroupDialog"
      :modal="false"
      custom-class="el-dialog dialog-style list-dialog"
      width="355px"
      :destroy-on-close="true"
    >
      <div class="cont group-list">
        <div
          class="item"
          v-for="(notifyTemplate, index) in notifyTemplates"
          :key="index"
          @click="openMoreNotifyMessage(notifyTemplate.notifyType)"
        >
          <i class="iconfont icon-fenzu"></i>
          <span class="name">{{ notifyTemplate.ntName }}</span>
          <!--          <span class="nums">99+</span>-->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import systemNoticeInfoDialog from "@base/views/user/system_notice/infoDialog.vue";
import commMenuDialog from "@base/views/user/commMenu/index.vue";
import notifyMessageDialog from "@base/views/user/notify_message/dialog.vue";
import notifyMessageInfoDialog from "@base/views/user/notify_message/infoDialog";

import { getToken } from "@base/utils/auth";
import wfContentDialog from "@base/views/user/wf/wf_manage/wfContentDialog";
import corejsConfig from "@/corejsConfig";
import { getLogicParamValue } from "@base/api/user";

export default {
  name: "home",
  components: {
    systemNoticeInfoDialog,
    commMenuDialog,
    notifyMessageDialog,
    notifyMessageInfoDialog,
    wfContentDialog,
  },
  data() {
    return {
      showNoticeDialog: false,
      showGroupDialog: false,
      notifyTemplates: [],
      userInfo: {},
      companyInfo: {},
      systemNotices: [],
      showSystemNoticeInfoDialog: false,
      csnRow: null,
      headPhotoUrl: "",
      dialogVisible: true,
      unDoWfRows: [],
      wfOption: {},
      showWfDialog: false,
      wfContentOption: {},
      showWfContent: true,
      wfContent: null,
      wfDataId: "",
      showCommMenuDialog: false,
      commMenus: [],
      notifyMessages: [],
      notifyMessageInfoIndex: null,
      notifyMessageInfoId: null,
      unreadMessageNum: 0,
      activating: true,
      wfTimer: null,
      homeConfig: corejsConfig.homeConfig || {},
    };
  },
  activated() {
    this.activating = true;
    if (this.wfTimer) {
      this.timerExcFun(true);
    }
  },
  deactivated() {
    this.activating = false;
  },
  beforeDestroy() {
    this.clearTimer();
  },
  created() {
    this.getUserInfo();
    this.initSystemNotice();
    this.initCommMenu();
    this.initNotifyMessage();
    this.initWfParam();
    this.initWfTimer();
    //初始化流程待办路由
    this.initWorkflowManageRoute();
  },
  methods: {
    initWorkflowManageRoute() {
      //初始化流程待办路由
      getLogicParamValue({
        data: { paramCode: "workflowManageRoute" },
        success: (res) => {
          let value = res?.objx;
          this.workflowManageRoute = value || "/basic/wf/wf_manage/list";
        },
      });
    },
    toWorkflowManage() {
      this.$router.push(this.workflowManageRoute);
    },
    wfClose() {
      this.timerExcFun(true);
    },
    initWfTimer() {
      this.wfTimer = setInterval(() => {
        this.timerExcFun(false);
      }, 10000);
      this.timerExcFun(true);
    },
    timerExcFun(isLoading) {
      if (!this.activating) {
        return;
      }
      this.getWfInfoList(isLoading);
      this.getUnreadMessageNum(isLoading);
      this.$emit("timerHandle");
    },
    clearTimer() {
      clearInterval(this.wfTimer);
      this.wfTimer = null;
    },
    getUserInfo() {
      this.$http({
        url: USER_PREFIX + "/user/currentUser",
        method: "post",
        success: (res) => {
          let userInfo = res.objx;
          this.headPhotoUrl = userInfo.headPhotoUrl
            ? userInfo.headPhotoUrl
            : require("@/resources/images" + "/default-header.png");

          this.userInfo = userInfo;
        },
      });
      this.$http({
        url: USER_PREFIX + "/company_info/getCurrent",
        method: `post`,
        success: (res) => {
          this.companyInfo = res.objx || {};
        },
      });
    },
    initSystemNotice() {
      this.$http({
        url: USER_PREFIX + "/system_notice/listPage",
        data: { publish: true, searchCount: false },
        method: "post",
        success: (res) => {
          this.systemNotices =
            res.objx && res.objx.records ? res.objx.records : [];
        },
      });
    },
    openSystemNoticeDialog(row) {
      this.csnRow = row || null;
      this.showSystemNoticeInfoDialog = true;
    },
    initUnDoWfInfo() {
      this.$http({
        url: AGILEBPM_PREFIX + "/wf_manage/listPage",
        data: { type: 0, searchCount: false },
        method: "post",
        success: (res) => {
          this.unDoWfRows = res.objx.records || [];
        },
      });
    },
    initWfTableList() {
      let that = this;
      let paramColumns = this.wfParamDTOs.map((item) => {
        return {
          title: this.$t1(item.paramName),
          field: item.paramKey,
          width: 150,
        };
      });
      var statuses = {
        running: this.$t1("审核中"),
        back: this.$t1("已驳回"),
        end: this.$t1("已完成"),
      };
      let tableOption = {
        vue: this,
        tableRef: "table-wf",
        tableName: "home-table-wf",
        config: {
          height: "auto",
        },
        columns: [
          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
          {
            title: this.$t1("单据类型"),
            field: "objTypeName",
            width: 150,
            fixed: "left",
          },
          {
            title: this.$t1("流程主题"),
            field: "name",
            width: 150,
          },
          {
            title: this.$t1("启动人"),
            field: "starterName",
            width: 150,
          },
          {
            title: this.$t1("当前任务"),
            field: "taskName",
            width: 150,
          },
          {
            title: this.$t1("当前任务用户"),
            field: "candidateNames",
            width: 150,
          },
          {
            title: this.$t1("启动时间"),
            field: "createDate",
            width: 150,
          },
          ...paramColumns,
          {
            width: 47,
            fixed: "right",
            title: "",
            sortable: false,
            slots: {
              default: ({ row }) => {
                return [
                  <a
                    href="javascript:void(0);"
                    class="a-link"
                    onclick={() => {
                      this.openWfDialog(row);
                    }}
                  >
                    <el-tooltip
                      enterable={false}
                      effect="dark"
                      content={this.$t1("查看")}
                      placement="top"
                      popper-class="tooltip-skin"
                    >
                      <i class="el-icon-edit" />
                    </el-tooltip>
                  </a>,
                ];
              },
            },
          },
        ],
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
        this.wfOption = opts;
      });
    },
    openWfDialog(row) {
      this.wfContentOption = {
        objId: row.objId,
        url: row.url,
        objTypeCode: row.objTypeCode,
        formCode: row.formCode,
      };
      this.showWfDialog = true;
    },
    commMenuCallBack(datas) {
      this.commMenus = datas || [];
    },
    initCommMenu() {
      this.$http({
        url: USER_PREFIX + "/comm_menu/currentList",
        data: { longOne: 0 },
        method: "POST",
      }).then((resultMsg) => {
        this.commMenus = resultMsg.objx || [];
      });
    },
    initNotifyMessage() {
      return;
      this.$http({
        url: USER_PREFIX + "/notify_message/listPage",
        data: { searchCount: false },
        method: "post",
        success: (res) => {
          this.notifyMessages =
            res.objx && res.objx.records ? res.objx.records : [];
        },
      });
    },
    openNotifyMessageDialog(row) {
      if (row.jumpContent) {
        this.$refs.notifyMessageDialog.open(row, () => {
          row.readed = 1;
        });
      }
    },
    openMoreNotifyMessage(notifyType) {
      let data = { notifyType: notifyType || "" };
      let view = {
        name: "notify_message:list",
        query: data,
      };
      this.$store.dispatch("tagsView/delCachedView", view).then(() => {
        this.$router.replace(view);
      });

      if (notifyType) {
        this.showGroupDialog = false;
      }
    },
    checkNotifyMessage(row, index) {
      this.showNoticeDialog = true;
      this.notifyMessageInfoIndex = index;
      this.notifyMessageInfoId = row.id;
    },
    notifyMessageReadHanlde() {
      this.notifyMessages[this.notifyMessageInfoIndex].readed = 1;
    },
    openNotifyTemplateGroupDialog() {
      this.$http({
        url: USER_PREFIX + `/notify_template/listPage`,
        method: `post`,
        data: { searchCount: false },
        isLoading: true,
        // loadingTarget: document.body,
        success: (res) => {
          this.notifyTemplates =
            res.objx && res.objx.records ? res.objx.records : [];
          this.showGroupDialog = true;
        },
      });
    },
    rourteTo(route) {
      if (route.type == 4) {
        this.jumpOutLink(route);
      } else if (route.type == 3) {
        let menuCode = route.menuCode;
        let path = "/user/outLink/index/" + menuCode;
        this.$router.push({ path: path, query: { url: route.url } });
      } else {
        let path = this.getPath(route);
        if (!path) return;
        this.$router.push(path);
      }
    },
    getPath(route3) {
      let item = null;
      let path = null;
      if (route3.type == 0) {
        //普通菜单
        if (route3.url) {
          path = route3.route || route3.url;
          let str = "/report/vform/render/";
          if (path.indexOf(str) == 0) {
          } else {
            let pIndex = path.indexOf("?");
            if (pIndex > 0) {
              path = path.substring(0, pIndex);
            }
          }
        }
      } else if (route3.type == 5) {
        //动态表单
        let url = route3.route || route3.url;
        path = url;
      }
      if (path && path.startsWith("@")) {
        path = null;
      }
      return path;
    },
    jumpOutLink(route) {
      let path = route.url;
      if (route.type == 4 && path) {
        if (path.indexOf("token={token}") >= 0) {
          path = path.replace("token={token}", "token=" + getToken());
        }
        window.open(path);
      }
    },
    initWfParam() {
      return this.$http({
        url: USER_PREFIX + "/wf_param/list",
        method: `post`,
        data: {},
        isLoading: true,
        // loadingTarget: document.body,
        modalStrictly: true,
        success: (res) => {
          this.wfParamDTOs = res.objx || [];
          this.initWfTableList();
        },
      });
    },
    getWfInfoList(isLoading) {
      if (!this.activating) {
        return;
      }
      this.$http({
        url: USER_PREFIX + "/wf_info/listPage",
        data: { type: 0, size: 20, searchCount: false },
        method: "post",
        isLoading: isLoading,
        modal: isLoading || false,
        // loadingTarget: document.body,
        success: (res) => {
          this.unDoWfRows =
            res.objx && res.objx.records ? res.objx.records : [];
        },
        failMsg: false,
        errorMsg: false,
        fail: (res, response) => {
          if (response && response.status == 200) {
            this.$errorMsg(res);
          }
        },
      });
    },
    getUnreadMessageNum(isLoading) {
      if (!this.activating) {
        return;
      }
      return this.$http({
        url: USER_PREFIX + "/notify_message/countMessage",
        method: `post`,
        data: {},
        isLoading: isLoading,
        modal: isLoading || false,
        // loadingTarget: document.body,
        success: (res) => {
          this.unreadMessageNum = res.objx || 0;
        },
        failMsg: false,
        errorMsg: false,
        fail: (res, response) => {
          if (response && response.status == 200) {
            this.$errorMsg(res);
          }
        },
      });
    },
    wfhandleCallback(flag) {
      if ([1, 2, 3].includes(flag)) {
        this.showWfDialog = false;
        this.wfClose();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";

body #app .index-home {
  margin: 3px 10px;
  height: calc(100vh - 38px);
  overflow: auto;

  #containt {
    margin: 0;
    background: none;
    height: auto;
    box-shadow: none;
  }

  .i-user-info {
    background: url(~@/resources/images/home-img.png) #2a6494 no-repeat 116%
      45px;
    margin-bottom: 6px;
    background-size: 181px;
    padding: 14px 38px 11px 16px;
    border-radius: 4px 4px;
    color: #fff;
    font-size: 12px;
    margin-top: 3px;
    height: 95px;
    overflow: hidden;

    .name {
      opacity: 1;
      font-weight: 600;
      margin: 9px 0 14px;
      font-size: 14px;
    }

    .img {
      width: 60px;
      height: 60px;
      float: left;
      border-radius: 50%;
      border: solid 4px rgba(255, 255, 255, 0.28);
      margin-right: 10px;
    }
  }

  .home-notice-list {
    height: 182px;
    margin: 0 -12px;

    .item {
      padding: 6px 12px;
      font-size: 12px;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .time {
        color: #b9b9b9;
        font-size: 12px;
        right: 12px;
      }

      &:hover {
        color: $baseColor;
        background-color: transparentize($baseColor, 0.97);

        .time {
          color: $baseColor;
        }
      }

      &.no-read:before {
        content: "";
        width: 6px;
        height: 6px;
        background-color: $red;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
        margin-bottom: 1px;
      }
    }

    &.to-reed {
      height: 300px;
      overflow: auto;
      margin: -8px -12px;

      .item {
        white-space: initial;
        padding: 8px 22px 2px;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 22px;
          right: 22px;
          border-top: dashed 1px #eee;
          height: 1px;
          bottom: 0;
        }

        &.noread {
          &:before {
            content: "";
            width: 6px;
            height: 6px;
            background-color: $red;
            border-radius: 50%;
            margin-right: 5px;
            display: inline-block;
            position: absolute;
            left: 10px;
            top: 16px;
          }
        }

        .el-tag {
          zoom: 0.95;
          padding: 0 5px;
          height: 24px;
          line-height: 24px;
        }

        // .noread{
        // 	position: absolute;right:0;top:0;
        // 	span{transform: rotate(47deg);
        // 	-ms-transform: rotate(47deg);
        // 	-moz-transform: rotate(47deg);
        // 	-webkit-transform: rotate(47deg);
        // 	-o-transform: rotate(47deg);
        // 	z-index: 3;
        // 	color: #FFF;
        // 	position: absolute;
        // 	right: 1px;
        // 	top: 2px;}
        // 	&:after{
        // 		content: "\e618";
        // 		font-size: 62px;
        // 		font-family: "iconfont";
        // 		color:$red
        // 	}
        // }
        .time {
          position: relative;
          right: 0;
          margin-left: 12px;
        }

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 3px;
          display: block;
          margin-bottom: 4px;
        }

        &:hover .name {
          color: $baseColor;
        }

        &:first-child:before {
          border-top: none;
        }

        .btns {
          text-align: right;

          .el-link {
            font-size: 12px;
            display: inline-block;
            margin-left: 14px;

            i {
              font-size: 12px;
              margin-right: 3px;
            }
          }
        }
      }
    }
  }

  .fast-box {
    margin: 6px 4px 4px;
    overflow: hidden;

    .item {
      width: 118px;
      text-align: center;
      float: left;
      margin-right: 14px;

      p {
        color: #2a6494;
        border: solid 1px #e2e2e2;
        margin: 3.5px 4px;
        width: calc(100% - 4px);
        border-radius: 6px;
        position: relative;
        height: 54px;
        line-height: 54px;
        text-align: left;
        padding-left: 14px;
        font-size: 12px;

        i {
          font-size: 14px;
          vertical-align: middle;
          margin-right: 2px;
        }

        span {
          vertical-align: middle;
        }

        &:before {
          content: "";
          width: 4px;
          height: 24px;
          display: inline-block;
          background: #225279b8;
          position: absolute;
          left: -1px;
          top: 50%;
          margin-top: -12px;
        }

        &:hover {
          background-color: $baseColor;
          color: #fff;
          border-color: $baseColor;

          &:before {
            background: #fff;
          }
        }
      }
    }
  }

  .need-to {
    height: 332px;
  }

  .table-box {
    width: 100%;
    font-size: 12px;

    th {
      line-height: 32px;
      background: #f7f7f7;
      font-weight: 400;
      color: #808080;
      padding: 0 6px;
    }

    td {
      text-align: center;
      line-height: 34px;
      color: #424242;
      border-bottom: solid 1px #eee;
      padding: 0 6px;
    }

    tr:last-child td {
      border-bottom: none;
    }
  }
}

.box-card .more {
  background-color: #f7f7f7;
}

.group-list {
  padding: 18px 18px 6px 32px !important;
  height: 400px;
  overflow: auto;

  .item {
    position: relative;
    height: 36px;
    border: solid 1px #eee;
    line-height: 34px;
    border-radius: 2px;
    padding: 0 42px 0 14px;
    margin-bottom: 10px;
    cursor: pointer;

    &::before {
      content: "";
      width: 8px;
      height: 8px;
      border: solid 1px #eee;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: -16px;
      top: 13px;
    }

    &.checked {
      &:before {
        content: "";
        background-color: $baseColor;
        border-color: $baseColor;
      }

      background-color: transparentize($baseColor, 0.9);
      color: $baseColor;
      border-color: $baseColor;
    }

    i {
      font-size: 12px;
      vertical-align: middle;
    }

    .name {
      font-size: 12px;
      margin-left: 8px;
      vertical-align: middle;
    }

    .nums {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      right: 5px;
      top: 6px;
      color: #fff;
      font-size: 12px;
      background-color: $red;
      line-height: 22px;
      text-align: center;
    }
  }
}

.notice-box {
  background-color: #2a649429;
  border-radius: 0 0 4px 4px;
  padding: 9px 12px;
  margin-bottom: 5px;
  margin-top: -6px;
  position: relative;
  z-index: 2;
  font-size: 13px;
  color: #212121;
  overflow: hidden;

  .txt {
    line-height: 28px;
    font-size: 12px;
    position: relative;
    display: inline-block;
    cursor: pointer;

    &:before {
      content: "";
      background-color: $baseColor;
      width: 4px;
      height: 20px;
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 18px;
    }

    i {
      font-size: 14px;
      margin-right: 12px;
      vertical-align: middle;
    }

    > span {
      vertical-align: middle;
      height: 22px;
      line-height: 22px;
      display: inline-block;

      b {
        color: #fff;
        margin: 0 4px;
        font-size: 16px;
        vertical-align: middle;
        background: #ff5615;
        border-radius: 50%;
        display: inline-block;
        padding: 4px;
        font-weight: 200;
        line-height: 1;
      }
    }
  }

  .el-button {
    position: absolute;
    right: 46px;
    padding: 0;
    height: 22px;
    line-height: 22px;
    min-width: 22px;
    text-align: center;
    border-radius: 2px;
    top: 50%;
    margin-top: -11px;

    i {
      font-size: 15px;
    }

    &:hover {
      background-color: $baseColor;
      color: #fff;
    }

    &.more {
      right: 12px;
      background: #f7f7f7;

      &:hover {
        color: $baseColor;
      }
    }
  }

  ::v-deep .el-card.is-always-shadow {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 6%);
  }
}
</style>
