<template>
  <div>
    <Row
      type="flex"
      justify="start"
      :gutter="24"
      v-if="question.evaluationItems.length > 0"
    >
      <Col
        class="col-padding"
        v-for="item in question.evaluationItems"
        :key="item.id"
      >
        <Card class="evaluation-cards-default" dis-hover>
          <div slot="title" class="card-title">
            <Icon class="icon" type="ios-checkmark-circle-outline" :size="36" />
          </div>
          <div class="card-content">
            <Tooltip max-width="200">
              <p slot="content">{{ item.text | translate(true) }}</p>
              <p class="text">{{ item.text | translate(true) }}</p>
            </Tooltip>
            <component
              :is="question.options.evaluationType"
              :item="item"
            ></component>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import {
  Checkbox,
  Col,
  Row,
  CheckboxGroup,
  Card,
  Icon,
  Tooltip,
} from "view-design";
import LocaleMixin from "../../../mixins/locale-mixin";
import { QuestionEvaluationModel, QuestionType } from "@wg-npm/survey-core";
import Star from "./evaluation/star.vue";
import Expr from "./evaluation/expr.vue";
import _ from "lodash";

export default Vue.extend({
  name: "Evaluation",
  components: {
    Row,
    Col,
    Checkbox,
    CheckboxGroup,
    Card,
    Icon,
    Tooltip,
    STAR: Star,
    EXPR: Expr,
  },
  mixins: [LocaleMixin],
  props: {
    question: {
      type: Object as () => QuestionEvaluationModel,
      required: true,
    },
  },
});
</script>
