<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="el-icon-arrow-up"></i>
                    <a href="javascript:void(0)" @click="operation">收起/展开</a> -->
                    <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: false
      };
    },
    methods: {
      operation: function() {
        /* let recordsObj = document.getElementById(this.contentBoxId);
        let iconObj = document.getElementById(this.fold_icons);
        let showValue = recordsObj.getAttribute('show');
        if (showValue === '1') {
          recordsObj.setAttribute('show', '0');
          iconObj.setAttribute('class', 'el-icon-arrow-down');
        } else {
          recordsObj.setAttribute('show', '1');
          iconObj.setAttribute('class', 'el-icon-arrow-up');
        } */
        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>

