<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;
  }
  .conbox{
    height: calc(100vh - 220px);
    overflow-y: scroll;
  }
    .conbox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*宽度竖滚动条的尺寸*/
    height: 10px; /*高度横滚动条的尺寸*/
  }
  .conbox::-webkit-scrollbar-thumb {
    /*滚动条里面的条*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #eee;
  }
  .conbox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 5px;
    background   : #ffffff;
  }
  .listTitle{
    font-size: 18px
  }
</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-sm" label="新增活动" @click="addActiveList" />
        <q-btn color="accent" size="sm" label="保存" @click="save" />
      </div>
    </div>

    <div class="conbox">
      <ActiveForm :save-obj="activedata" :activeTypeOptions="activityTypeList" ref="childForm"
        @success="getactivedata" />

      <div class="">
       <div class="q-mt-lg q-mb-lg listTitle">
         活动列表
       </div>
        <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>
  </div>
</template>
<script>
  import DetailItem from "../../components/activity/activeDetail-item"
  import ActiveForm from '../../components/activity/active-from'
  export default {
    meta: {
      title: "活动详情"
    },
    components: {
      DetailItem,
      ActiveForm
    },
    data() {
      return {
        msg: {
          Id: 0,
          ActivityTitle: []
        },
        activeBaseData: {
            Id: 0, //活动编号(主键)
            ActivityName: "", //活动名称
            StartTime: "", //开始时间
            EndTime: "", //结束时间
            CoverImg: "", //封面图
            ActivityType: 0, //活动类型
            ActivityInfo: "", //活动详情
            SignStartTime: "", //报名开始时间
            SignEndTime: "", //报名截止时间
            IsFree: 1, //是否免费   1是  2否
            Price: 0, //价格
            PointNum: 0, //点数
            IsCancelConfirm: 1, //取消确定1是 2否
            Distinguish: 1, //是否区别性别 0区分 1不区分
            ManNum: 0, //男数量
            WoManNum: 0, //女数量
            AgeLimit: 1, //是否区别年龄 0区分 1不区分
            StartAge: 0, //最小年龄
            EndAge: 0, //最大年龄
            LnsideLimit: 1, //内部限制0-否，1-是
            LonLat: '', //经纬度（逗号分隔）
            LocationName: '', 
        },
        ActivityTitle: [{
          Title: "", //活动大标题
          TripSort: 0, //活动排序
          ActivityPlanList: [ //活动安排
            {
              TripSort: 0, //排序
              StartTime: "", //开始时间
              ActivityDuration: "", //活动时长（单位：分钟）
              LonLat: "", //活动地址经纬度
              LocationName: "", //活动地址
              TripTitle: "", //安排标题
              TripContent: "", //内容
              TripPicList: [] //图片
            }
          ]
        }],
        activedata: {

        },
        activityTypeList: [],
      }
    },

    mounted() {
      this.getActiveTypeList();
      if (this.$route.query.Id) {
        this.msg.Id = this.$route.query.Id
        if(this.msg.Id>0){
           this.getDetail()
        }
       
      }
    },
    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) {
        this.msg.ActivityTitle[index] = val
      },
      //保存信息
      save() {
        this.msg.ActivityTitle = this.ActivityTitle
        this.$refs.child.map(x => {
          x.ruleVerification();
        })
        let res = this.$refs.child.every(x => {
          return x.ruleVerification();
        })
        let res2 = this.$refs.childForm.saveRule()
        if (res && res2) {
          let msg = {
            ...this.msg,
            ...this.activeBaseData
          }

          this.apipostDS("/api/Education/SetActivity", msg, (res) => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
               this.$router.push("/activity/activityList")
            } else {
              this.Error(res.data.message);
            }
          })
        }
      },
      getDetail() {
        this.apipostDS("/api/Education/GetActivity", {
          Id: this.msg.Id
        }, (res) => {
          if (res.data.resultCode === 1) {
            this.ActivityTitle = res.data.data.ActivityTitleList
            this.activedata = res.data.data
          }
        })
      },
      //获取活动类型下拉
      getActiveTypeList() {
        this.apipostDS("/api/Education/GetCommerceActivityTypeList", {}, (res) => {
          if (res.data.resultCode === 1) {
            this.activityTypeList = res.data.data;
            this.activityTypeList.unshift({
              Id: -1,
              TypeName: "不限"
            })
          }
        })
      },
      //活动基础数据
      getactivedata(val) {
        this.activeBaseData = val
      }
    }
  }

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

</style>
