<template>
  <div class="page">
    <el-card class="tree-box" shadow="always" :body-style="{ padding: '5px' }" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">选择档案门类</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
    </el-card>
    <el-card class="form-box" ref='cardForm'>

    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        status: false
      }
    },
    watch: {
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '22%';
            cardForm.width = '77%';
          }
        }
      }
    },
    methods: {
      btns() {
        this.status = !this.status
      },
    }
  }

</script>
<style lang='scss' scoped>
  .page {
    display: flex;
    justify-content: space-around;

    .tree-box {
      width: 22%;

      background-color: #fff;
      padding: 5px 10px;


      .clearfix {
        font-weight: 600;
        font-size: 17px;
        letter-spacing: 3px;
      }
    }

    .form-box {
      width: 77%;

      background-color: #fff;
      padding: 5px 10px;
    }
  }

</style>
