<template>
    <div class="badge" style="margin-bottom: 29px">
        <table style="width: 100%;" >
            <tr>
                <td style="width: 70px;font-weight: bold;">流转记录</td>
                <td>
                    <span style="display: inline-block; border-top: 1px solid #eee; width: 100%;padding-left: 20px"></span>
                </td>
                <td style="width: 130px; text-align: right">
                    <i :id="fold_icons" :class="status ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                    <a href="javascript:void(0)" @click="operation">{{status ? '收起' : '展开'}}</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
  export default {
    data: function() {
      return {
        fold_icons: this.contentBoxId + '_fold_icon',
        status: this.$parent.data.openMainFlowTable ? true : false
      };
    },
    methods: {
      operation: function() {
        this.status = !this.status;
        const el = document.getElementById(this.contentBoxId);
        if (el) {
          el.setAttribute('show', this.status ? '0' : '1');
        }
      }
    },
    props: {
      'content-box-id': [String]
    },
    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>
