<style scoped>
.header-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
  .p_title {
    color: #000000;
    font-size: 20px;
    /* height: 30px !important; */
    display: flex;
    align-items: center;
}
.activeDetail{
    overflow-y: scroll;
}
</style>
<template>
  <div class="page-body activeDetail">
    <div class="header-box">
      <div class="flex">
          <q-btn color="accent" size="sm" class="q-mr-md" label="返回" @click="goBack" />
                <span class="p_title">活动详情</span>
      </div>
      <div>
           <q-btn color="accent" size="sm" class="q-mr-md" label="新增活动" @click="addActiveList" />
            <q-btn color="accent" size="sm"  label="保存" @click="save" />
      </div>
     
    </div>
    <div class="">
      <div v-for="(item,index) in ActivityTitle" :key="item.id" class="flex " >
        <DetailItem :itemData="item" :index="index+1" @success="getItemData($event,index)" ref="child"/>

        <el-tooltip class="item" effect="dark" content="删除当前活动" placement="top"  v-if="index>0">
                      <i class="iconfont icon-img_delete_small q-ml-sm" style="color: #2961FE" @click="delActiveList(index)"></i>
        </el-tooltip>

      </div>
        
    </div>
    
  </div>
</template>
<script>
import DetailItem from "../../components/activity/activeDetail-item"
  export default {
    meta: {
      title: "活动详情"
    },
    components: {
      DetailItem
    },
    data() {
      return {
       msg:{
         Id:0,
         ActivityTitle:[]
       },
       ActivityTitle:[
         {
            Title:"",//活动大标题
            TripSort:0,//活动排序
            ActivityPlanList:[//活动安排
                {
                    TripSort:0,//排序
                    StartTime:"",//开始时间
                    ActivityDuration:"",//活动时长（单位：分钟）
                    LonLat:"",//活动地址经纬度
                    LocationName:"",//活动地址
                    TripTitle:"",//安排标题
                    TripContent:"",//内容
                    TripPicList:[]//图片
                }
            ]
        }
       ],
       item:{
         
       }
      }
    },

     mounted(){
          if(this.$route.query.Id){
            this.msg.Id=this.$route.query.Id
          }
      },
    methods: {
      goBack(){
          this.$router.go(-1)
      },
      
      addActiveList(){
        let obj={
          Title:"",//活动大标题
            TripSort:this.ActivityTitle.length,//活动排序
            ActivityPlanList:[//活动安排
                {
                    TripSort:0,//排序
                    StartTime:"",//开始时间
                    ActivityDuration:"",//活动时长（单位：分钟）
                    LonLat:"",//活动地址经纬度
                    LocationName:"",//活动地址
                    TripTitle:"",//安排标题
                    TripContent:"",//内容
                    TripPicList:[]//图片
                }
            ]
        }
        
        this.ActivityTitle.push(obj)
      },
      delActiveList(index){
         this.ActivityTitle.splice(index,1)
      },
      getItemData(val,index){
        console.log('119', val,index)
        this.msg.ActivityTitle[index]=val
      },
      //保存信息
      save() {
        this.msg.ActivityTitle=this.ActivityTitle
        console.log(this.$refs)
        // this.$refs.Name.validate();
        // this.$refs.StartTime.validate();
        // this.$refs.EndTime.validate();
        // this.$refs.SignStartTime.validate();
        // this.$refs.SignEndTime.validate();
        // if (!this.$refs.Name.hasError &&
        //   !this.$refs.StartTime.hasError &&
        //   !this.$refs.EndTime.hasError &&
        //   !this.$refs.SignStartTime.hasError &&
        //   !this.$refs.SignEndTime.hasError) {

          // this.apipostDS("/api/Education/GetSetActivityPlan", this.msg, (res) => {
          //   console.log(136,res)
          //   if (res.data.resultCode === 1) {
          //     this.Success(res.data.message);
          //   } else {
          //     this.Error(res.data.message);
          //   }
          // })
        // }
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
