<template>
  <div class="study-tbbd">
    <div class="tbbd-right" >
      <syffList :study="studyInfo" @showDetail="showDetailCallback"/>
    </div>
  </div>
</template>

<script>
import syffList from './syffList.vue'
export default {
  name: 'StudySyff',
  props: {
    study:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  watch:{
    study: {
      immediate: true,
      deep:true,
      handler(v) {
        this.studyInfo = _.merge({studySubjectId:''},v)
      },
    },
  },
  components: {syffList},
  computed: {},
  filters: {},
  data() {
    return {
      showDetail:false,
      studyInfo:{
        studySubjectId:''
      }
    }
  },
  created() {},
  methods: {
    changeSubject(val){
      this.studyInfo.studySubjectId = val
    },
    showDetailCallback(val){
      this.showDetail=val
      this.$emit('showDetail',val)
    }
  }
}
</script>
<style lang="scss" scoped>
.study-tbbd {
  display: flex;
  flex-direction: row;
  .tbbd-left {
    background: #fff;
    padding: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    width: 350px;
  }
  .tbbd-right{
    flex-grow: 1;
    overflow: hidden;
  }
}
</style>
