<template>
    <section class="screen relative">

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

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

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

            <template
              v-if="components.upload === item.component"
            >
              <header class="skill-header row aCenter">
                <div class="skill-cer-icon"></div>
                <div>{{item.label}}</div>
              </header>
              <section class="skill-cer-upload">
                <v-upload
                  :upload="false"
                  v-model:value="item.value"
                >

                </v-upload>
              </section>
            </template>
            <template v-else>

              <aside class="rowACenter skill-select-item">

                <header class="skill-header row aCenter">
                  <div class="skill-cer-icon"></div>
                  <div>{{item.label}}</div>
                </header>

                <div class="flex-1"></div>

                <aside class="skill-select relative">
                  <a-select v-model:value="item.value" class="screen skill-select-target" :placeholder="item.placeholder">
                    <a-select-option
                      v-for="(cItem) in item.data"
                      :key="'option-'+cItem.value"
                      :value="cItem.value"
                    >{{cItem.label}}</a-select-option>
                  </a-select>
                  <svg t="1622876349167" class="absolute skill-select-down" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3183" width="200" height="200"><path d="M878.592 250.88q29.696 0 48.128 11.264t24.576 29.696 0 41.472-26.624 45.568q-82.944 92.16-159.744 180.224t-148.48 164.864q-19.456 20.48-45.568 31.744t-53.76 11.776-53.248-8.704-43.008-28.672q-39.936-44.032-82.944-90.112l-88.064-92.16q-43.008-46.08-85.504-90.624t-79.36-86.528q-17.408-19.456-22.528-40.448t1.024-38.4 23.552-28.672 45.056-11.264q35.84 0 98.816-0.512t137.728-0.512l153.6 0 150.528 0 125.952 0 79.872 0z" p-id="3184"></path></svg>
                </aside>

              </aside>

            </template>


          </div>

        </aside>

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

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

          <header class="skill-examples">
            <div class="skill-examples-title">示例图</div>
            <v-image class="skill-examples-image" :src="config.skill_image"></v-image>
          </header>

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

            <header class="skill-header row aCenter">
              <div class="skill-cer-icon"></div>
              <div>{{item.label}}</div>
            </header>

            <div class="flex-1"></div>

            <aside class="skill-select relative">
              <a-select v-model:value="item.value" class="screen skill-select-target" :placeholder="item.placeholder">
                <a-select-option
                    v-for="(cItem) in item.data"
                    :key="'option-'+cItem.value"
                    :value="cItem.value"
                >{{cItem.label}}</a-select-option>
              </a-select>
              <svg t="1622876349167" class="absolute skill-select-down" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3183" width="200" height="200"><path d="M878.592 250.88q29.696 0 48.128 11.264t24.576 29.696 0 41.472-26.624 45.568q-82.944 92.16-159.744 180.224t-148.48 164.864q-19.456 20.48-45.568 31.744t-53.76 11.776-53.248-8.704-43.008-28.672q-39.936-44.032-82.944-90.112l-88.064-92.16q-43.008-46.08-85.504-90.624t-79.36-86.528q-17.408-19.456-22.528-40.448t1.024-38.4 23.552-28.672 45.056-11.264q35.84 0 98.816-0.512t137.728-0.512l153.6 0 150.528 0 125.952 0 79.872 0z" p-id="3184"></path></svg>
            </aside>

          </aside>

        </aside>

      </section>

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


    </section>
</template>

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

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