<template>
  <Page class="page-rnr-person-idcard">
    <template #slot-title>
      <span>{{ currentFlow }}/{{ totalFlow }}</span>
      <span>证件信息</span>
    </template>
    <template #slot-before-main>
      <div class="page-rnr-person-idcard-tip">文件类型为图片文件，允许支持的照片格式包括bmp、jpg/jpeg、png，小于500K。</div>
    </template>
    <div class="page-rnr-main-card">
      <!-- 身份证选择上传 -->
      <FormRender
        ref="formRenderRef"
        v-if="formData.certType === 'IDCARD'"
        v-model="formData"
        :schema="SCHEMA1"
        @change="handleFormDataChange"
      />
      <!-- 其他证件照片的选择上传 -->
      <FormRender
        ref="formRenderRef"
        v-else
        v-model="formData"
        :schema="SCHEMA2"
        @change="handleFormDataChange"
      />
    </div>
    <MustKnow v-if="formData.certType === 'IDCARD'" />
    <template slot="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 :disabled="!formData.certPic[0] || !formData.certPic[1]" 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 cache from '@/utils/cache'
import { cuscImageUpload } from '@/api/rnr'
import Page from '@/components/Page'
import MustKnow from '@/components/MustKnow'
import FormRender from '@/components/FormRender'
import { SET_PERSON_IDCARD } from '@/store/modules/rnr'
import flowMixin from '@/minxin/flow'

export default {
  name: 'RnrPersonCard',
  components: { Page, FormRender, MustKnow },
  mixins: [flowMixin],
  data() {
    const { CARD_TYPE } = this.$store.getters.dict
    return {
      formData: {
        certType: 'IDCARD',
        certPic: []
      },
      SCHEMA1: {
        certType: {
          label: '证件类型',
          type: 'rnr-select',
          rules: [
            { required: true }
          ],
          options: CARD_TYPE
        },
        certPic: {
          type: 'rnr-idcard',
          compress: {},
          api: file => cuscImageUpload({ file }).then(resp => resp.uuid),
          rules: [
            { required: true },
            {
              validator(value) {
                // 如果人像面没有上传
                if (!value[0] || value[0].length === 0) {
                  return { result: false, message: '请上传身份证人像面' }
                }
                if (!value[1] || value[1].length === 0) {
                  return { result: false, message: '请上传身份证国徽面' }
                }
                return true
              }
            }
          ]
        }
      },
      SCHEMA2: {
        certType: {
          label: '证件类型',
          type: 'rnr-select',
          rules: [
            { required: true }
          ],
          options: CARD_TYPE
        },
        certPic: {
          type: 'rnr-file',
          size: 'large',
          compress: {},
          maxCount: 2,
          api: file => cuscImageUpload({ file }).then(resp => resp.uuid),
          rules: [
            { required: true },
            {
              validator(value) {
                // 如果人像面没有上传
                if (!value[0] || value[0].length === 0) {
                  return { result: false, message: '请上传证件信息正面' }
                }
                if (!value[1] || value[1].length === 0) {
                  return { result: false, message: '请上传证件信息反面' }
                }
                return true
              }
            }
          ]
        }
      }
    }
  },
  methods: {
    /**
     * 表单项改变方法
     * @param value 当前双向绑定的值
     * @param key 当前改变的字段key
     */
    handleFormDataChange(value, key) {
      if (key === 'certType') {
        this.formData.certPic = []
      }
    },

    /**
     * 调到到下一页：腾讯的实名认证平台
     */
    async handleToNext() {
      // 开始校验数据
      this.$refs.formRenderRef.validate()
      // 取出双向绑定的身份证照片id
      const { certType, certPic } = this.formData
      // 将当前数据保存到store中
      this.$store.commit(`rnr/${SET_PERSON_IDCARD}`, { certType, certPic: certPic.map(pic => pic.uuid) })
      // 当前证件照片的识别key
      const CERT_PIC_STORAGE_KEY = `cert-pic-${Date.now()}`
      // 将证件信息保存到缓存中
      cache.set(CERT_PIC_STORAGE_KEY, certPic, { noStorage: true })
      // 跳转到基本信息页
      this.routerToNextPage('RnrPersonBase', { certPicKey: CERT_PIC_STORAGE_KEY })
    },

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

<style lang="scss">
.page-rnr-person-idcard {
  padding-bottom: 72px;
  .page-rnr-main {
    margin-top: 0px !important;
    .rnr-idcard, .rnr-file {
      padding: 48px 0;
    }
  }
  .page-rnr-person-idcard-tip {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    padding: 14px 48px 18px;
  }
  .page-rnr-main-fixed-btn-group {
    display: flex;
    justify-content: space-between;
    .page-rnr-main-btn-before {
      color: #242424 !important;
      flex: 1;
      height: 96px;
      margin-right: 12px;
    }
    .page-rnr-main-btn-next {
      flex: 2;
      height: 96px;
    }
  }
}
</style>
