<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="14">
          <p class="p-title">{{curmbSecond}}</p>
          </el-col>
      </el-row>
      <div class="first-step" v-if="active === 0">
        <base-info :formData="formData" @returnTypeData="returnTypeData" @returnIsNext="returnIsNext" ref="child">
        </base-info>
      </div>
    </div>
  </div>
</template>
<script>
  let vm = null;
  import BreadCrumb from "@/components/yqrange/breadcrumb-range.vue";
  import { openLoading, closeLoading } from "../../utils/utils";
  import BaseInfo from '@/components/activitymanagement/baseinfo.vue';
  import { getActivityInfoReq} from '@/utils/activitymanagement/activitymanagementApi';
  import {getMemberSelectOrgSaveReq} from "../../utils/yqrange/yqrangeApi";
  export default {
    name: "create-range",
    components: {
      BreadCrumb,
      BaseInfo
    },
    data() {
      return {
        id: null,
        enterType: 1,//1.creat 2.edit
        curmbFirst: '活动管理',
        curmbSecond: '新建活动',
        curmbThird:'',
        jumPathThird: '/activity-management',
        jumPathFouth:'',
        active: 0,
        //页面展示位置
        stepData: [true, false],
        formData: {
          activityId: 0,//活动ID，新增时为空
          titleManager: '',//后台标题方便管理
          titleViewMain: '',//前端主标题
          titleViewSub: '',//前端副标题
          circleId: "",//圈子ID
          beginTime:'',//开始时间
          endTime:'',//结束时间
          appModuleDto: {
            linkType: 4, // 跳转类型:1 链接，4 模块， 8 无跳转
            name: "", // 模块名称
            paramFlag: 0, // 是否有参数标志1为有2为没有参数
            paramList: [
              {
                id: "",
                seqNo: '',  // 选择参数的索引值
                value: '',
                key: '', // 参数名称，默认param
                type:''  // 模块参数类型:1 int类型字符串 4String类型 8时间戳类型字符串
              }
            ],
            paramList2: [],
            type: 0 // 类型:1 列表页，4 详情页
          },
          auditFlag:2,
          listImage: '',//活动列表页图片
          introImage:'',//介绍页图片url
          imgUrl1More: {},
          imgUrl2More: {},
          backgroundColor2NotJoin:"#0D9078",//立即报名按钮颜色
          backgroundColor2Joining:"#86C7BB",//审核中按钮颜色
          backgroundColor2Joined:"#0D9078",//参与活动按钮颜色
          foregroundColor2NotJoin:"#FFFFFF",//立即报名按钮文字颜色
          foregroundColor2Joining:"#FFFFFF",//审核中按钮文字颜色
          foregroundColor2Joined:"#FFFFFF",//参与活动按钮文字颜色
        },
      }
    },
    created() {
      vm = this;
      // 根据ID是否有值判断编辑还是create
      // debugger
      const { enterType, id, roleType } = this.$route.query;
      this.id = id;
      this.enterType = enterType;
      this.roleType = roleType;

      if(this.enterType == 2){
        this.curmbSecond = "编辑活动"
      }
      this.curmbThird = this.curmbSecond;

      if(roleType == null || roleType == undefined){
        let highMainManager = localStorage.getItem('highMainManager');
        let mainManager = localStorage.getItem('mainManager');
        let manager = localStorage.getItem('manager');
        let ordinary = localStorage.getItem('ordinary');
        if(highMainManager == 1){
          this.roleType = 4;
        }
        else if(mainManager == 1){
          this.roleType = 2;
        }
        else if(manager == 1){
          this.roleType = 1;
        }
        else if(ordinary == 1){
          this.roleType = 0;
        }
      }

      this.formData.roleType = this.roleType;

      //edit
      if (this.enterType == 2 && this.id != null) {
        this.getActivityInfo();
      }

    },
    methods: {
      //下一步
      nextStep() {
        // debugger
        this.$refs.child.submitForm();
      },

      //完成
      complete() {

        console.log(this.formData.id);
        let req = {
          circleId: this.formData.id,
        };
        openLoading(vm);
        getMemberSelectOrgSaveReq(req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
            this.$message.success('操作成功');
            const _this = this;
            setTimeout(function () {
              _this.$router.go(-1)
            }, 2000);
            // vm.$router.push({ path: "yq-range" });
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });

      },
      //  修改编辑基础信息
      returnIsNext(flag) {
        if (flag == true) {
          vm.commitActivityInfo();
        }
      },
      returnTypeData(item) {
        vm.formData[item.name] = item.val
      },
      //获取活动详情
      getActivityInfo() {
        getActivityInfoReq(this.id).then(res => {
          // closeLoading(this);
          if (res.code == "000000") {
            this.formData = { ...this.formData, ...res.data };

          } else {
            vm.$message(res.message);
          }
        }).catch(err => {
          vm.$message.error('请求失败');
        });
      },
      //更新活动信息
      commitActivityInfo() {
        let req = vm.formData;
        vm.POST("circle/sso/activity/save", req).then(res => {
          if (res.code == "000000") {
            this.$message.success('保存成功');
            const _this = this;
            setTimeout(function () {
              _this.$router.go(-1)
            }, 100);

          } else {
            this.$message(res.message);
          }
        });
      },
    }
  }
</script>
<style lang="scss">
  .yqrange-index-wrapper {
    .yqrange-index-content {
      background: #fff;
      padding: 10px;

      .step-content {
        overflow: hidden;
        height: 60px;
        padding: 15px 0 50px 0;
        border-bottom: 1px solid #efefef;

        .is-text {
          display: none;
        }

        .el-steps--simple {
          background: #fff;
          padding: 10px 8%;
        }

        .step-num {
          display: block;
          margin-top: 1.5px;
          font-size: 12px;
          border: 1px solid #999 !important;
          border-radius: 50%;
          width: 25px;
          height: 18px;
          line-height: 15px;
          text-align: center;
          color: #999;
        }

        .el-step__title.is-wait {
          color: #999;
        }

        .el-step__title.is-process {
          color: #449284;
        }

        .is-finish {
          color: #999 !important;
        }

        .on-step {
          color: #449284;
          border: 1px solid #449284 !important;
        }
      }
    }
  }
</style>
