<template>
    <section class="screen fill-container">

      <section class="skill-cer-screen row jCenter relative">

        <aside class="jCenter fill-info-left">

          <div
            v-for="(item,index) in inputData.left"
            :key="'input-left-'+index"
          >

            <template
              v-if="components.upload === item.component"
            >
              <header class="skill-header fill-info-header row aCenter">
                <div class="skill-cer-icon"></div>
                <div>{{item.label}}</div>
              </header>
              <section class="rowACenter">
                <section class="fill-info-upload">
                  <v-upload
                      :upload="false"
                      v-model:value="item.value"
                      upload-text="选择封面"
                  >

                  </v-upload>
                </section>
                <section class="row wrap fill-info-photo">
                  <aside
                    v-for="(item,index) in item.data"
                    :key="'user-photo-'+index"
                    class="fill-info-item center"
                  >
                    <img :src="item.icon" />
                    <div class="row center">
                      <div class="fill-info-icon center"
                        :class="{'fill-icon-success':item.status}"
                      >
                        <svg t="1622880092411" v-if="item.status" class="screen" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4312" width="200" height="200"><path d="M416.832 798.08C400.64 798.08 384.512 791.872 372.16 779.52L119.424 525.76C94.784 500.992 94.784 460.8 119.424 436.032 144.128 411.264 184.128 411.264 208.768 436.032L416.832 644.928 814.4 245.76C839.04 220.928 879.04 220.928 903.744 245.76 928.384 270.528 928.384 310.656 903.744 335.424L461.504 779.52C449.152 791.872 432.96 798.08 416.832 798.08Z" p-id="4313" fill="#ffffff"></path></svg>
                        <svg t="1622879980730" v-else class="screen" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3457" width="200" height="200"><path d="M882.048 209.216L209.28 882.048c-18.624 18.56-48.768 18.56-67.328 0s-18.56-48.704 0-67.328L814.72 141.952c18.624-18.56 48.768-18.56 67.328 0 18.56 18.56 18.56 48.704 0 67.264z" fill="#ffffff" p-id="3458"></path><path d="M882.048 882.048c-18.56 18.56-48.704 18.56-67.328 0L141.952 209.216c-18.56-18.624-18.56-48.704 0-67.264 18.56-18.56 48.704-18.56 67.328 0L882.048 814.72c18.56 18.624 18.56 48.768 0 67.328z" fill="#ffffff" p-id="3459"></path></svg>
                      </div>
                      <div>{{item.label}}</div>
                    </div>
                  </aside>
                </section>
              </section>
            </template>
          </div>

        </aside>

        <div class="skill-cer-line fill-line"></div>

        <aside class="skill-cer-right jCenter">

          <aside
               v-for="(item,index) in inputData.right"
               :key="'input-right-'+index"
          >

            <template v-if="components.textarea === item.component">
              <header class="skill-header row aCenter">
                <div class="skill-cer-icon"></div>
                <div>{{item.label}}</div>
              </header>

              <div class="fill-textarea-container">
                <textarea class="fill-textarea"
                    :placeholder="item.placeholder"
                    v-model="item.value"
                ></textarea>
              </div>
            </template>

            <template v-else-if="components.audio === item.component">
              <header class="skill-header row aCenter">
                <div class="skill-cer-icon"></div>
                <div>{{item.label}}</div>
                <div v-if="item.warringLabel" class="fill-warring-label">{{item.warringLabel}}</div>
              </header>

              <section class="fill-audio">
                <sound-recording ref="sound" :upload="false" v-model:value="item.value" type="simplicity"></sound-recording>
              </section>

            </template>

            <template v-else>

              <section class="rowACenter fill-input-warp">
                <header class="skill-header fill-input-header row aCenter">
                  <div class="skill-cer-icon"></div>
                  <div>{{item.label}}</div>
                </header>
                <div class="flex-1 fill-input">
                  <input class="screen fill-input-target" :placeholder="item.placeholder" v-model="item.value" />
                </div>

              </section>

            </template>


          </aside>

        </aside>

      </section>

      <div class="center">
          <v-button class="real-name-button fill-button" @submit="submit" @submit-verify="submitVerify" >下一步</v-button>
      </div>


    </section>
</template>

<script>
import {
  icon,
  vUpload,
  vButton,
  vImage,
  soundRecording
} from '$components';
import {
  Select
} from 'ant-design-vue';
import props from '../props';
import mixins from '../mixins';
export default {
  name: "fill-information",
  components:{
    vImage,
    vButton,
    icon,
    vUpload,
    [Select.name]:Select,
    [Select.Option.displayName]:Select.Option,
    soundRecording
  },
  props,
  mixins
}
</script>

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