<template>
  <Page class="page-rnr-person-file">
    <template #slot-title>
      <span>{{ currentFlow }}/{{ totalFlow }}</span>
      <span>证件信息</span>
    </template>
    <template #slot-before-main>
      <div class="page-rnr-person-file-tip">文件类型为图片文件，允许支持的照片格式包括bmp、jpg/jpeg、png，小于500K。</div>
    </template>
    <div class="page-rnr-main-card">
      <ErrorWrap :error-message="inputError.certPic" :error="!!inputError.certPic">
        <van-cell id="contractPic" :required="true" title="证件信息" class="van-field">
          <template #label>
            <BridgeUpload
              :max-count="3"
              :compress="{}"
              :security="true"
              :customer="true"
              v-model="formData.certPic"
            >
              <div class="page-rnr-main-card-upload-normal">
                <div class="icon-upload-camera" />
              </div>
            </BridgeUpload>
          </template>
        </van-cell>
      </ErrorWrap>
    </div>
    <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 Page from '@/components/Page'
import ErrorWrap from '@/components/ErrorWrap'
import BridgeUpload from '@/components/BridgeUpload'
import { validate } from '@/utils/validate'
import flowMixin from '@/minxin/flow'
import { SET_PERSON_PAPER } from '@/store/modules/markup'

export default {
  name: 'MarkupPersonCard',
  components: { Page, BridgeUpload, ErrorWrap },
  mixins: [flowMixin],
  data() {
    const { customerType } = this.$store.getters.personRnr
    return {
      inputError: {},
      countTime: 59,
      isSend: false,
      showSms: false,
      customerType,
      formData: {
        certPic: []
      }
    }
  },
  methods: {
    /**
     * 调到到下一页：腾讯的实名认证平台
     */
    async handleToNext() {
      // 校验不通过的字段
      const failFiled = this.validate()
      // 如果当前有字段没校验通过
      if (failFiled) {
        return
      }
      // 保存到store中
      this.$store.commit(`markup/${SET_PERSON_PAPER}`, this.formData)
      // 跳转到支付结果页
      this.routerToNextPage('MarkupPersonNotification')
    },

    /**
     * 校验用户输入
     */
    validate(ruleKeys = ['certPic']) {
      // 错误的字段，错误的信息
      const [failField, failMessage] = validate(this.formData, ruleKeys)
      // 如果当前有错误信息
      ruleKeys.forEach(key => {
        this.$set(this.inputError, key, failField === key ? failMessage : '')
      })
      return failField
    },

    /**
     * 跳转到上一页
     */
    handleToBefore() {
      // 回退到上个页面
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
.page-rnr-person-file {
  .page-rnr-main {
    margin-top: 0px;
  }
  .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;
    }
  }
  .icon-upload-camera {
    background-image: url(../../../assets/rnr/ico_camera.png);
    background-size: 100% 100%;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .page-rnr-main-card-upload-normal {
    background-image: url(../../../assets/rnr/ico_pic.png);
    background-color: #F7F8FA;
    background-size: 196px 196px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    width: 196px;
    height: 196px;
  }
  .page-rnr-main-btn {
    font-size: 32px !important;
    &.disabled {
      color: #CACACA !important;
    }
  }
  .van-cell__label {
    .page-rnr-flex {
      display: flex;
      justify-content: space-between;
    }
  }
  .page-rnr-person-file-tip {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    padding: 14px 48px 18px;
  }
  .van-dialog {
    box-sizing: border-box;
    width: 685px;
    padding: 0 40px 50px;
    .van-dialog__header {
      padding: 60px 0 12px;
    }
    .van-field__button {
      padding-left: 30px;
      .page-rnr-main-btn {
        color: #0761F3;
        font-size: 32px;
        font-weight: 400;
      }
    }
    .page-rnr-main-btn-confirm {
      margin-top: 44px;
    }
  }
}
</style>
