<template>
  <Page title="企业信息">
    <EnterpriseCert ref="certRef" />
    <template #slot-operation>
      <van-button type="primary" class="page-rnr-main-btn-before" round color="linear-gradient(120deg, #EDF3FF 0%, #E9F0FF 97%)" @click="handleToBefore">上一步</van-button>
      <van-button type="primary" class="page-rnr-main-btn-next" round color="linear-gradient(120deg, #4F4CFB 0%, #376FF4 97%)" @click="handleToNext">下一步</van-button>
    </template>
  </Page>
</template>

<script>
import { SET_ENTERPRISE_CERT } from '@/store/modules/markup'
import Page from '@/components/Page'
import EnterpriseCert from '@/components/EnterpriseCert'

export default {
  name: 'EnterpriseCertInfo',
  components: { Page, EnterpriseCert },
  methods: {
    /**
     * 跳转到上一页
     */
    handleToBefore() {
      // 回退到上个页面
      this.$router.back()
    },

    handleToNext() {
      // 开始校验
      try {
        const formData = this.$refs.certRef.validate()
        // 将值保存到缓存中
        this.$store.commit(`markup/${SET_ENTERPRISE_CERT}`, formData)
        // 开始跳转页面
        this.$router.push({ name: 'MarkupEnterpriseCertImage' })
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

<style lang="scss">
.page-rnr-main-fixed-btn-group {
  display: flex;
  justify-content: space-between;
  .page-rnr-main-btn-before {
    color: #242424 !important;
    flex: 1;
    height: 96px;
  }
  .page-rnr-main-btn-next {
    flex: 2;
    margin-left: 40px;
    height: 96px;
  }
}
</style>
