<template>
  <div class="bpighouse">
    <div class="rect rect-table">
      <!-- 按钮：入栏/出栏 or 出栏统计 -->
      <el-form inline size="mini">
        <el-form-item>
          <el-button
            type="danger"
            @click="inOut = !inOut"
            :disabled="inOut">
            未认养 / 已认养
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="danger"
            @click="inOut = !inOut"
            :disabled="!inOut">
            出栏统计
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 入栏 / 出栏 饼状图 -->
      <transition name="echartDiv" mode="out-in">
        <in-and-out v-if="inOut"></in-and-out>
        <statistics v-else></statistics>
      </transition>
    </div>
  </div>
</template>
<script>
import InAndOut from './pbadopt-charts/in-and-out.vue'
import Statistics from './pbadopt-charts/statistics.vue'
export default {
  data() {
    return {
      inOut: true
    }
  },
  components: {
    InAndOut,
    Statistics
  }
}
</script>
<style scoped>
.rect {
  background-color: #fff;
  padding: 30px 15px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  margin-left: 20px;
}
.rect-form {
  padding-bottom: 10px;
}
/* .rect-table {
  margin-top: 20px;
} */
.demo-table-expand {
  font-size: 0;
  margin-left: 40px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
.el-table .height {
  background: rgba(254, 254, 254, 0.5);
}
/deep/ .el-table--mini td, .el-table--mini th {
  padding: 3px 0 !important;
  height: 20px !important;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
  color: rgb(24,144,255);
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__inner:hover {
  border-color: rgb(24,144,255);
}
/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: rgb(24,144,255);
}
/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(24,144,255);
  border-color: rgb(24,144,255);
}
/* 离开/进入动画 */
.echartDiv-enter-from, .echartDiv-leave-to {
  opacity: 0;
}
.echartDiv-enter-active, .echartDiv-leave-active {
  transition: opacity 1.5s ease;
}
</style>