<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-22 14:36:35
-->
<template>
  <div class="plan-management">
    <div class="plan-topBox">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="活动推荐" name="recommendView"></el-tab-pane>
        <!-- <el-tab-pane label="活动邀请" name="inviteView"></el-tab-pane> -->
      </el-tabs>
      <my-input @changeInput="changeInput" placeholder="请输入活动内容" @changeValue="changeValue"></my-input>
    </div>
    <div class="plan-bottomBox">
      <component :is="defaultRouter" :value="input" ref="myComponents"></component>
    </div>
  </div>
</template>
<script>
import inviteView from '../../components/invite.vue'
import recommendView from '../../components/recommend.vue'
import myInput from "@/views/components/myInput/index.vue"
export default {
  components:{inviteView,recommendView,myInput},
  data() {
    return {
      input: '',
      activeName: 'recommendView',
      defaultRouter:'recommendView',
      isClick:false,
    }
  },
  methods:{
    // 输入框的值
    changeInput(value){
      this.input = value;
      this.isClick = true;
    },
    // 监听输入框是否清空
    changeValue(value){
      if(this.isClick && value == ''){
        this.$refs.myComponents.getList('1')
        this.isClick = false;
      }
    },
    handleClick() {
      this.defaultRouter = this.activeName
    }
  },
  async created() {

  },
}
</script>
<style lang="scss" scoped>
.plan-management {
  padding: 0 20px 10px 20px;
  background-color: #fff;
  height: 100%;
  width: 100%;
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
  .plan-topBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 0 0;
    ::v-deep .el-tabs--top {
      height: 40px;
    }
  }
  .plan-bottomBox {
    margin-top: 30px;
  }
}
</style>
