<template>
    <div class="badge" style="margin-bottom: 29px">
        <table style="width: 100%;" >
            <tr>
                <td :style="{'width': titleWidth+'px','font-weight':'bold'}">{{title}}</td>
                <td>
                    <span style="display: inline-block; border-top: 1px solid #eee; width: 100%;padding-left: 20px"></span>
                </td>
                <td style="width: 76px; text-align: right;" @click="operation">
                    <i :class="status ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" style="cursor: pointer;padding-left:0;"></i>
                    <a href="javascript:void(0)">{{status ? t(`toolbar.expand`) : t(`toolbar.packUp`)}}</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
  export default {
    props: {
      'badge-id': [String],
      title: [String],
      titleWidth: [Number],
    },
    data: function() {
      return {
        status: this.$parent.data.openMainFlowTable ? false : true
      };
    },
    mounted(){
      if(this.badgeId == 'main-flow-records'){
        // 主流程
        this.status = this.$parent.data.openMainFlowTable ? false : true
      }else{
        this.status = false
      }
    },
    methods: {
      operation: function() {
        this.status = !this.status;
        const el = document.getElementById(this.badgeId);
        if (el) {
          el.setAttribute('show', this.status ? '0' : '1');
        }
      }
    },
    beforeDestroy() {
      this.status = false;
    }
  };
</script>

<style scoped>
    .badge {
        margin-bottom: 29px;
    }

    a,
    .el-icon-arrow-down,
    .el-icon-arrow-up {
        color: #67BCFF;
    }

    .el-icon-arrow-down,
    .el-icon-arrow-up {
        font-size: 18px;
        font-weight: bold;
        padding: 0 10px;
    }

</style>
