<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">

    <section class="real-name-container relative">
      <header class="rowACenter real-name-header">
        <div class="real-name-title flex-1">实名认证</div>
      </header>
      <div @click="close" class="real-name-close-wrap cursor-pointer absolute animate-rotate-hover">
        <icon type="close" class="real-name-close"></icon>
      </div>

      <section class="real-name-screen row relative">

        <aside class="input-real-container">

          <div
            v-for="(item,index) in inputData.left"
            :key="'real-name-'+index"
            class="row aCenter input-real"
            :class="{'input-real-margin':index!==0}"
          >
            <div class="real-circular"></div>
            <div class="real-input-label">{{item.label}}</div>
            <div class="real-input-container rowACenter">
              <div class="flex-1">
                <input
                    class="flex-1"
                    :placeholder="item.placeholder"
                    :type="item.type || 'text'"
                    v-model="item.value"
                    :maxlength="item.maxlength || 50"
                    :disabled="item.disabled"
                />
              </div>
              <div v-if="item.code" class="real-code-button center"
                @click="triggerTimeDate(item,inputData.left)"
                   :class="{
                      'real-code-disabled': timeFormat
                   }"
              >{{timeFormat || timeConfig.default}}</div>

            </div>
          </div>

        </aside>

        <div class="real-line"></div>

        <aside class="upload-real jCenter">
          <header class="rowACenter">
            <div class="real-circular"></div>
            <div class="real-input-label upload-real-label">上传身份证</div>
          </header>
          <section class="upload-real-group rowACenter">
            <v-upload
              :upload="false"
              v-for="(item,index) in inputData.right"
              :key="'real-upload-'+index"
              class="upload-real-item"
              :class="{'upload-real-item-margin':index!==0}"
              v-model:value="item.value"
              :ref="item.key"
            >
              <template v-slot:upload>
                <section class="screen">
                  <img class="upload-real-icon" :src="item.icon" />
                  <div class="upload-real-input-label center">{{item.label}}</div>
                </section>
              </template>
            </v-upload>
          </section>
        </aside>

      </section>

      <div class="center">
          <v-button class="real-name-button" @submit-verify="submitVerify" @submit="submit">提交审核</v-button>
      </div>


    </section>

  </popup>
</template>

<script>
import {
  Popup,
  icon,
  vUpload,
  vButton
} from '$components';
import mixins from '../mixins';
export default {
  name: "popup-real-name",
  components:{
    vButton,
    Popup,
    icon,
    vUpload
  },
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>

<style lang="scss" src="../global.scss"></style>