<template>
  <page-header-wrapper>
    <div class="content">
      <div class="header ant-alert-info">
        <div>
          <a-icon type="arrow-left" class="icon" />
          <span class="title">新增</span>
        </div>
        <div class="info">
          <span>授权提示：</span>
          <span>授权公众号必须为认证的服务号！</span>
        </div>
      </div>
      <!--  -->
     <!-- <div class="mt-25">
      <a-radio-group class="mt-50">
        <a-radio-button @click="visible=false">
          基本设置
        </a-radio-button>
        <a-radio-button @click="visible=true">
          设备绑定
        </a-radio-button>
      </a-radio-group>
      </div> -->
      <!-- <div class="min mt-50" v-show="!visible">
        <a-form  :form="form" :label-col="{ span: 4,offset: 6 }" :wrapper-col="{ span: 8 }" @submit="handleSubmit">
          <a-form-item label="计划名称">
            <a-input v-decorator="['Name', { rules: [{ required: true, message: '必填项！' }] }]" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="选择公众号">
            <a-col :span="17">
              <a-select v-decorator="['appid', { rules: [{ required: true, message: '必填项' }] }]" placeholder="请选择" @change="handleSelectChange">

                <a-select-option value="male">
                  male
                </a-select-option>
                <a-select-option value="female">
                  female
                </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="3" offset="1">
              <a-button type="primary">点击授权</a-button>
            </a-col>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 4, offset: 12 }">
            <a-button type="primary" html-type="submit">
              下一步
            </a-button>
          </a-form-item>
        </a-form>
      </div> -->
      <a-card :bordered="false" style="margin-top:90px">
        <a-steps class="steps" :current="currentTab">
          <a-step title="基本信息" />
          <a-step title="绑定设备" />
          <a-step title="完成" />
        </a-steps>
          <step1 v-if="currentTab === 0" @nextStep="nextStep" :editInfo="editInfo"/>
          <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
          <step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
  export default {
    components:{
      Step1,
      Step2,
      Step3
    },
    data() {
      return {
        currentTab: 0,
        form: null,
        editInfo:{}
      }
    },
    mounted() {
      console.log(this.$route.query.item)
      if(this.$route.query.item){
        this.editInfo=JSON.parse(this.$route.query.item)
      }
    },
    methods: {
      nextStep () {
        if (this.currentTab < 2) {
          this.currentTab += 1
        }
      },
      prevStep () {
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      },
      finish () {
        this.currentTab = 0
      }
    },
  }
</script>

<style scoped="scoped">
  .content {
    position: relative;
    padding: 0;
    min-height: calc(100vh - 160px);

  }

  .min {
    margin-top: 70px;
  }

  .header {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    line-height: 35px;
    padding: 0 20px;
    font-weight: 600;
  }

  .icon {
    font-size: 16px;
    margin-right: 10px;
  }

  .title {
    font-size: 16px;
  }

  .info {
    font-size: 14px;
    margin-left: 50px;
    float: left;

  }
  .steps {
    max-width: 750px;
    margin: 10px auto 0;
  }
</style>
