<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" :class="{ 'on-step': stepData[0] }">1</span>
            <el-step title="基础信息"></el-step>
            <span class="step-num" :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="showStorage" size="small" @click="storage">暂存</el-button>
          <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">
        </base-info>
      </div>
    </div>
  </div>
</template>
<script>
  let vm = null;
  import BreadCrumb from "@/components/breadcrumb.vue";
  import BaseInfo from '@/components/yqrange/baseinfo.vue';
  export default {
    name: "create-range",
    components: {
      BreadCrumb,
      BaseInfo
    },
    data() {
      return {
        id: null,
        enterType: 1,//1.creat 2.edit
        curmbFirst: '云鹊小圈',
        curmbSecond: '新建小圈',
        active: 0,
        //页面展示位置
        stepData: [true, false, false],
        showStorage: true,
        formData: {
          projectName: '',
          imgUrl1: '',
          imgUrl1More: {},
          imgUrl2: '',
          imgUrl2More: {},
          introduce: '',
          contentRole: '',
        }
      }
    },
    created() {
      vm = this;

      // 根据ID是否有值判断编辑还是create
      // debugger
      const { enterType, id } = this.$route.query;
      this.id = id;
      this.enterType = enterType;
      if (enterType == 1) {
        //edit
        console.log("add");
      } else {
        console.log("edit");
      }

    },
    methods: {
      //暂存
      storage() { },
      //下一步
      nextStep() {
        // debugger
        if (this.enterType == 1) {
          //edit
          console.log("add");

          this.commitQuanziInfo();
        } else {
          console.log("edit");
        }
      },
      //完成
      complete() { },
      returnTypeData(item) {
        this.formData[item.name] = item.val
      },
      commitQuanziInfo() {
        let req = {
          name: this.formData.projectName,
          headUrl: this.formData.imgUrl1,
          coverUrl: this.formData.imgUrl2,
          introduce: this.formData.introduce,
          dynamicFlag: this.formData.contentRole,
        };
        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);
            this.formData.id = res.id
          } 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>