<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">
          <p class="p-title">{{curmbSecond}}</p>
          <!--<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>-->

      <el-dialog
        title=""
        :show-close="false"
        :visible.sync="confirmVisible"
        :close-on-click-modal="false"
        width="600px"
        center
      >
        <p style="text-align: center;">{{confirmMessage}}</p>
        <span slot="footer" class="dialog-footer">
        <!--<el-button @click="confirmDelete">删 除</el-button>-->
        <el-button type="primary" @click="hideConfirm">确定</el-button>
      </span>
      </el-dialog>


    </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"),
          roleType: null,
          type: 0,
          deptId: "",
          allowShare: 1
        },
        confirmMessage: "",
        confirmVisible: false,
      }
    },
    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 != null && this.roleType != null){
        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.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) {
          vm.commitQuanziInfo();
        }
      },
      returnTypeData(item) {
        vm.formData[item.name] = item.val
      },
      //获取圈子详情
      getCircleInfo() {
        getCircleInfoReq(this.id).then(res => {
          // closeLoading(this);
          if (res.code == "000000") {
            this.formData = { ...this.formData, ...res.data };
            if(vm.formData.deptId == 0){
              vm.formData.deptId = "";
            }
          } else {
            vm.$message(res.message);
          }
        }).catch(err => {
          vm.$message.error('请求失败');
        });
      },
      commitQuanziInfo() {
        let req = vm.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];
            this.$message.success('保存成功');
            const _this = this;
            setTimeout(function () {
              _this.$router.go(-1)
            }, 100);

          }
          else if(res.code == "224027"){

            vm.confirmMessage = `圈子已被加入广场中，请先至广场管理移除该圈子后再操作`;
            vm.confirmVisible = true;


            // this.$confirm(`圈子已被加入广场中，请先至广场管理移除该圈子后再操作`, '', {
            //   confirmButtonText: '确定',
            //   type: 'warning',
            //   customClass: 'range-make-box',
            // }).then(() => {
            //   //  confirm
            // }).catch(() => {
            //   //  cancel
            // });
          }
          else {
            this.$message(res.message);
          }
        });
      },

      hideConfirm(){
        vm.confirmVisible = false;
      }
    }
  }
</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>
