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

    <div class="comment-container relative rowACenter">

      <div @click="close" v-if="!buttonAsync" class="absolute comment-icon cursor-pointer animate-rotate-hover">
        <icon type="close" class="comment-icon-target"></icon>
      </div>

      <div class="comment-introduce center">
        <v-image mode="center" background-color="transparent" :src="game.game_ico" class="comment-introduce-icon"></v-image>
        <div class="comment-introduce-title line-1">{{game.game_name}}</div>
        <span class="comment-introduce-price"><span>¥</span><span class="comment-price">{{game.price}}</span><span>/局</span></span>
      </div>
      <section class="flex-1 comment-input">
        <aside class="comment-input-item row"
          v-for="(item,index) in inputData"
          :key="'input-item-'+index"
        >
          <div class="comment-input-label">{{item.label}}</div>
          <a-rate class="comment-rate" v-if="item.component==='rate'" v-model:value="item.value" />
          <div v-else class="comment-input-content flex-1">
            <textarea v-model="item.value"
                      :placeholder="item.placeholder"
                      :maxlength="item.maxLength"
            ></textarea>
          </div>
        </aside>
        <footer class="row">
          <div class="comment-input-label"></div>
          <div class="flex-1 center">
            <v-button class="comment-button"
              @submit-verify="submitVerify"
              @submit="submit"
            >发表</v-button>
          </div>
        </footer>
      </section>

    </div>

  </popup>
</template>

<script>
import {
  Popup,
  vButton,
  icon
} from '$components';
import {
  Rate
} from 'ant-design-vue';
import mixins from '../mixins';
import props from '../props';
import VImage from "$components/v-image/lib/main";
export default {
  name: "popup-comment",
  mixins,
  props,
  components:{
    VImage,
    Popup,
    vButton,
    icon,
    [Rate.name]:Rate
  }
}
</script>

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