<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="14">
          <el-steps :active="active" simple class>
            <span class="step-num" v-bind:class="{ 'on-step': stepData[0] }">1</span>
            <el-step title="基础信息"></el-step>
            <span class="step-num" v-bind:class="{ 'on-step': stepData[1] }">2</span>
            <el-step title="选择成员">2</el-step>
          </el-steps>
        </el-col>
        <el-col :span="5" :offset="5">
          <el-button v-if="active<1" size="small" type="primary" @click="nextStep">下一步</el-button>
          <el-button v-if="active>=1" size="small" type="primary" @click="complete">完成</el-button>
        </el-col>
      </el-row>
      <div class="first-step" v-if="active === 0">
        <p class="p-title">基础信息</p>
        <base-info :formData="formData" @returnTypeData="returnTypeData" @returnIsNext="returnIsNext" ref="child">
        </base-info>
      </div>
      <div class="second-step" v-else-if="active === 1">
        <organzation :formData="formData" ref="org"></organzation>
      </div>
    </div>
  </div>
</template>
<script>
  let vm = null;
  import BreadCrumb from "@/components/breadcrumb.vue";
  import { openLoading, closeLoading } from "../../utils/utils";
  import BaseInfo from '@/components/yqrange/baseinfo.vue';
  import Organzation from '@/components/yqrange/organzation.vue';
  import { getCircleInfoReq, getMemberSelectOrgSaveReq } from '@/utils/yqrange/rangeApi';
  export default {
    name: "create-range",
    components: {
      BreadCrumb,
      BaseInfo,
      Organzation
    },
    data() {
      return {
        id: null,
        enterType: 1,//1.creat 2.edit
        curmbFirst: '云鹊小圈',
        curmbSecond: '新建小圈',
        active: 0,
        //页面展示位置
        stepData: [true, false],
        formData: {
          id: null,
          name: '',
          headUrl: '',
          imgUrl1More: {},
          imgUrl2More: {},
          introduce: '',
          dynamicFlag: '',
          idType: localStorage.getItem("storageIdType")
        }
      }
    },
    created() {
      vm = this;
      // 根据ID是否有值判断编辑还是create
      // debugger
      const { enterType, id } = this.$route.query;
      this.id = id;
      this.enterType = enterType;

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

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

      //完成
      complete() {
        if(this.$refs.org.selectionList == null || this.$refs.org.selectionList == ""){
          this.$message.warning('请选择机构');
          return;
        }
        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) {
          this.commitQuanziInfo();
        }
      },
      returnTypeData(item) {
        this.formData[item.name] = item.val
      },
      //获取圈子详情
      getCircleInfo() {
        getCircleInfoReq(this.id).then(res => {
          // closeLoading(this);
          if (res.code == "000000") {
            this.formData = { ...this.formData, ...res.data };
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      commitQuanziInfo() {
        let req = this.formData;
        console.log("commitQuanziInfo() : name = " + req.name + ", headUrl = " + req.headUrl
          + ", coverUrl = " + req.coverUrl + ", introduce = " + req.introduce + ", dynamicFlag = " + req.dynamicFlag)
        vm.POST("circle/circle/save", req).then(res => {
          if (res.code == "000000") {
            // console.log(res);
            console.log(this.$refs);
            vm.formData.id = res.data;
            this.active = 1;
            this.stepData = [false, true];


          } else {
            //
          }
        });
      },
    }
  }
</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>
