<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="popup-report-container">
      <header class="popup-report-header row aCenter">
        <div class="flex-1">举报</div>
        <div @click="close" class="popup-report-close-wrap cursor-pointer animate-rotate-hover">
          <icon type="close" class="popup-report-close"></icon>
        </div>
      </header>
      <section class="flex-1 popup-report-content">
        <div v-for="(item,index) in inputData"
          :key="'popup-report-'+index"
          class="popup-report-item row"
        >
          <div class="popup-report-label">{{item.label}}</div>
          <div class="flex-1">
            <div class="popup-report-upload" v-if="item.component==='upload'">
              <v-upload :upload="false" @upload-success="uploadSuccess" v-model:value="item.value" ref="upload" uploadText=""></v-upload>
            </div>
            <aside class="popup-report-select relative" v-else-if="item.component==='select'">
              <a-select v-model:value="item.value" class="screen skill-select-target" :placeholder="item.placeholder">
                <a-select-option
                    v-for="(cItem) in controlData"
                    :key="'option-'+cItem.value"
                    :value="cItem.value"
                >{{cItem.label}}</a-select-option>
              </a-select>
              <svg t="1622876349167" class="absolute popup-report-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>
            <div v-else class="popup-report-textarea flex">
              <div class="flex-1">
                <textarea :maxlength="item.maxLength" v-model="item.value" class="screen" :placeholder="item.placeholder"></textarea>
              </div>
              <div class="popup-report-length">{{item.value?item.value.length:0}}/{{item.maxLength}}</div>
            </div>
          </div>
        </div>
        <div class="popup-report-button center">
          <v-button class="popup-report-button-target" @submit-verify="submitVerify" @submit="submit" >发送</v-button>
        </div>
      </section>
    </section>
  </popup>
</template>

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

<style scoped lang="scss" src="../style.scss"></style>
<style lang="scss" src="../../popup-settle/components/skill-certification/global.scss"></style>
