<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>
