<template>
  <div class="window-height regist-box column">
    <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height full-width">
      <div class="w-600 col q-py-lg flex items-center">
        <div class="form-box-diy col">
          <div class="text-center">
            <img src="../../assets/images/big-logo.png" height="60" alt="" />
          </div>
          <q-card class="mycard q-mt-lg q-pa-xl">
            <q-tab-panels v-model="stateManager.currentSetup" animated>
              <q-tab-panel name="1">
                <div class="text-h5 pfb q-mb-md text-center">创建账号</div>
                <div class="text-center q-mb-lg">
                  <span class="text-grey-5 pfb text-subtitle">已经有账号了？</span>
                  <router-link :to="{ path: '/auth/login' }" class="text-primary pfb text-subtitle">点击登录</router-link>
                </div>
                <div class="text-body pfb">手机号：</div>
                <div class="q-mt-xs row">
                  <q-input standout v-model="userModel.mobile" mask="###########" class="col" @update:model-value="validateSendStatus" dense :ref="setValidateRules" :rules="userRule.mobileRule" />
                  <div class="q-ml-md">
                    <q-btn color="accent" :loading="stateManager.subCode" class="btn-fixed-width-102 ellipsis" :disable="stateManager.sendCodeStatus != 1" unelevated @click="sendCode">
                      {{ stateManager.sendCodeStatus != 2 ? '发送验证码' : `${stateManager.countDown}秒后重发` }}
                    </q-btn>
                  </div>
                </div>
                <div class="text-body pfb q-mt-md">验证码：</div>
                <div class="q-mt-xs">
                  <verifyCodeBox :digit="stateManager.verifyCodeLength" v-model="userModel.verfityCode"></verifyCodeBox>
                </div>
                <div class="q-mt-md">
                  <div class="col text-body pfb">密码：</div>
                </div>
                <div class="q-mt-xs">
                  <q-input standout v-model="userModel.password" type="password" dense :ref="setValidateRules" :rules="userRule.passwordRule" />
                </div>
                <div class="q-mt-md">
                  <div class="col text-body pfb">确认密码：</div>
                </div>
                <div class="q-mt-xs">
                  <q-input standout v-model="userModel.confirmPwd" type="password" dense :ref="setValidateRules" :rules="userRule.confirmPwdRule" />
                </div>
                <div class="q-mt-md">
                  <q-btn :loading="stateManager.subSetupOne" :color="stateManager.isSended && userModel.verfityCode.length == stateManager.verifyCodeLength ? 'primary' : 'secondary'" class="full-width" :disable="!stateManager.isSended || userModel.verfityCode.length != 6" unelevated @click="submitValidateCode">下一步</q-btn>
                </div>
              </q-tab-panel>
              <q-tab-panel name="2">
                <div class="text-h5 pfb q-mb-md text-center">补充资料填写</div>
                <div class="text-body pfb">注册账号：</div>
                <div class="q-mt-xs din" style="font-size: 32px">
                  {{ userModel.mobile == '' ? '17308037817' : userModel.mobile }}
                </div>
                <div class="q-mt-md">
                  <div class="text-body pfb q-mt-md">企业名称：</div>
                </div>
                <div class="q-mt-xs">
                  <q-input standout v-model="userModel.companyName" dense :ref="setValidateRules" :rules="userRule.companyNameRule" />
                </div>
                <div class="text-body pfb q-mt-md">姓名：</div>
                <div class="q-mt-xs">
                  <q-input standout v-model="userModel.username" dense :ref="setValidateRules" :rules="userRule.usernameRule" />
                </div>
                <div class="text-body pfb q-mt-md">联系人姓名：</div>
                <div class="q-mt-xs">
                  <q-input standout v-model="userModel.username" dense :ref="setValidateRules" :rules="userRule.usernameRule" />
                </div>
                <div class="text-body pfb q-mt-md">所属行业</div>
                <div class="q-mt-xs">
                  <q-select standout dense v-model="userModel.industry" :ref="setValidateRules" :options="stateManager.induArray" option-label="key" :rules="userRule.industryRule" behavior="menu" option-value="value" map-options></q-select>
                </div>
                <div class="text-body pfb q-mt-md">企业规模</div>
                <div class="q-mt-xs">
                  <q-select standout dense v-model="userModel.scale" :ref="setValidateRules" :options="stateManager.scaleArray" option-label="key" :rules="userRule.scaleRule" behavior="menu" option-value="value" map-options></q-select>
                </div>
                <div class="q-mt-lg text-center">
                  <q-btn class="pfb" color="primary" :loading="stateManager.subRegist" unelevated label="立即注册" style="width: 10rem" @click="doRegist"></q-btn>
                </div>
              </q-tab-panel>
            </q-tab-panels>
          </q-card>
        </div>
      </div>
    </q-scroll-area>
  </div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import useUserRegistModule from '../../module/user/registModule'
import verifyCodeBox from '../../components/common/verifyCode.vue'
import useScrollModule from '../../module/scrollbar/scrollModule'
export default defineComponent({
  components: {
    verifyCodeBox
  },
  setup() {
    let { setTitle } = useMetaModule()
    setTitle('创建账户')
    let { userModel, setValidateRules, userRule, validateSendStatus, stateManager, sendCode, checkCodeStatus, submitValidateCode, doRegist } = useUserRegistModule()
    let { scrollStyle } = useScrollModule()
    onMounted(() => {
      checkCodeStatus()
    })

    return { userModel, userRule, setValidateRules, validateSendStatus, stateManager, sendCode, submitValidateCode, scrollStyle, doRegist }
  }
})
</script>

<style>
.regist-box {
  background-image: url(../../assets/images/14.png);
  background-attachment: fixed;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.btn-fixed-width-102 {
  width: 102px;
  padding: 7px 14px;
}
.w-600 {
  width: 600px;
  margin: 2rem auto;
}
</style>
