
<!-- 完善信息 -->
<template>
  <view>
    <view class="body" :style="{ bottom: footerHeight + 'px'}">
      <!-- 操作step -->
      <view class="u-p-30">
        <steps :list="steps" :current="current"></steps>
      </view>
      <!-- 完成 -->
      <view v-if="current === 2">
        <view class="status u-text-center">
          <view class="circle" :class="[error ? 'circle--error':'']">
            <u-icon  size="36"
                    color="#fff"
                     :name="error ? 'close':'checkbox-mark'"
            ></u-icon>
          </view>
          <view class="u-m-t-40">
            <view class="status-text">
              {{
                error ? "提交失败" : "提交成功"
              }}
            </view>
            <view v-if="error" class="status-desc">请返回上一步重新提交</view>
            <view v-if="!error" class="status-desc">
              <view>确认后立刻跳转首页</view>
              <view>（{{time}}秒）后自动跳转</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 删除模态框 -->
      <!--      <u-modal v-model="modal.show" :content="modal.content"  @confirm="modalConfirm" ></u-modal>-->
    </view>
    <!-- 底部按钮 -->
    <view class="footer" id="footer">
      <view class="footer-btn u-p-t-12 u-p-r-60 u-p-b-12 u-p-l-60">
        <u-button type="primary" @click="back" shape="circle"
                  v-if="current === 2 && error" class="button--submit">返回</u-button>
      </view>
    </view>

    <u-toast ref="uToast" />
  </view>

</template>

<script>
import dom from "@/mixins/dom";
import UserSelect from "./components/UserSelect";
import Steps from "./components/Steps";

export default {
  name: "register",
  components: {Steps, UserSelect},
  mixins: [dom],
  data(){
    return{
      current: 2,
      userSelect: [
        {
          title: "我是面料供应商",
          desc: "Fabric supplier",
          imgSrc: "/static/images/index/userSelect/type_1.png",
          activeImgSrc: "/static/images/index/userSelect/type_1_active.png",
        },
        {
          title: "我要选款",
          desc: "I want to choose",
          imgSrc: "/static/images/index/userSelect/type_2.png",
          activeImgSrc: "/static/images/index/userSelect/type_2_active.png",
        },
        {
          title: "我是设计机构",
          desc: "Design agency",
          imgSrc: "/static/images/index/userSelect/type_3.png",
          activeImgSrc: "/static/images/index/userSelect/type_3_active.png",
        },
        {
          title: "我是检测机构",
          desc: "Testing institutions",
          imgSrc: "/static/images/index/userSelect/type_4.png",
          activeImgSrc: "/static/images/index/userSelect/type_4_active.png",
        }
      ],
      steps: [
        {
          title: '第一步',
          desc: '选择身份'
        },
        {
          title: '第二步',
          desc: '完善信息'
        },
        {
          title: '第三步',
          desc: '完成'
        }
      ],
      error: true,
      time: 3
    }
  },
  onLoad(options) {
    this.error = options.status === 'error';
    if(!this.error){
      this.success();
    }
  },
  onShow(){
    this.time = 3;
  },
  methods:{
    back(){
      this.$Router.back();
    },
    goIndex(){
      this.$Router.replace({
        path: '/pages/home/index'
      })
    },
    success() {
      let timer = setInterval(() => {
        this.time--;
        if (this.time === 0) {
          clearInterval(timer);
          this.goIndex();
        }
      }, 1000);
    },
  }
}
</script>

<style scoped lang="scss">
@import './css/index';
</style>
