<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>
  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() {
      // 根据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");
        } else {
          console.log("edit");
        }
      },
      //完成
      complete() { },
      returnTypeData(item) {
        this.formData[item.name] = item.val
      },
    }
}
</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;
        }
      }

      .first-step {
        margin-top: 20px;

        .p-title {
          padding-left: 10px;
          margin-bottom: 15px;
        }

        .basic-item-icon {
          position: relative;

          .require {
            position: absolute;
            left: 67px;
            top: 11px;
            color: #f56c6c;
          }

          .upload-message {
            position: absolute;
            left: 160px;
            top: 105px;
            font-size: 12px;
            color: #f56c6c;
          }

          .img-delete {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 84px;
            height: 100px;
            background: #000;
            opacity: 0.7;
            z-index: 999;

            i {
              color: #fff;
              margin-top: 39px;
              margin-left: 0px;
            }
          }
        }

        .word-num {
          font-size: 12px;
          color: #999;
          padding-top: 5px;
        }

        .line {
          margin-left: 10px;
          width: 20px;
        }

        .bg-uploader {
          .bg-img {
            float: left;
            width: 84px;
            height: 100px;
          }

          .limit-text {
            float: left;
            margin-left: 10px;
            margin-top: -10px;

            p {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .el-upload__tip {
          position: absolute;
          top: -6px;
          left: 130px;
        }
      }
    }
  }

  .required-label .el-form-item__label::before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
</style>
