<!--
 * @Description: 新加坡CAC-title
 * @Version: 2.0
 * @Author: Viborder
 * @Date: 2023-07-17 10:41:00
 * @LastEditors: miyuan
 * @LastEditTime: 2025-09-28 11:20:26
 * @company: NUCTECH
 * @Mailbox: nuctech@nuctech.com
 * @FilePath: \sgp-common-web\src\components\common\title.vue
-->
<template>
  <div class="panelTitle" :class="{ panelTitleLeft: panelTitleInit.point === 'left' }">
    <div class="panel-title">
      <div class="panel-title-left" :title="panelTitleInit.title">{{ panelTitleInit.title }}</div>
      <div class="operate-menu">
        <slot></slot>
        <div
          class="toggle-menu"
          @click="togglePanel(panelTitleInit.flag)"
          v-if="panelTitleInit.isShow || false"
        >
          <i class="iconfont" v-show="panelTitleInit.flag">&#xe66d;</i>
          <i class="iconfont" v-show="!panelTitleInit.flag">&#xe696;</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'SgpTitle',
  data () {
    return {}
  },
  mounted () { },
  methods: {
    togglePanel (parm) {
      this.panelTitleInit.flag = !parm
      this.$emit('upDownStatus', this.panelTitleInit.flag)
    }
  },
  computed: {},
  watch: {},
  props: ['panelTitleInit'],
  components: {}
}
</script>

<style lang="scss" scoped>
.panelTitle {
  width: 100%;

  .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 50px;
    padding-top: 0;
    box-sizing: border-box;
    margin: 0 20px;
    border-bottom: 1px #ddd solid;

    .operate-menu {
      display: flex;
      align-items: center;

      &:hover {
        cursor: pointer;
      }

      .toggle-menu {
        display: none;
        padding-right: 20px;
      }
    }

    .el-button--mini {
      padding: 4px 15px;
    }

    .el-button:last-child {
      margin-right: 10px;
    }

    .panel-title-left {
      // background: $titleLeftUrl no-repeat right -9px;
      align-self: flex-start;

      // 标题左侧文字
      height: 50px;
      overflow: hidden;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      line-height: 50px;

      // padding-right: $dis10 * 6;
      // padding-left: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;

      color: #333;
    }

    .panel-title-right {
      .el-button--mini {
        padding: 4px 15px;
      }
    }
  }
}

.panelTitle.panelTitleLeft {
  background: #edf0f3;

  .panel-title {
    border: none;
  }
}
</style>
