<template>
  <Card :bordered="false" :dis-hover="true" :padding="0" class="question-row">
    <Divider class="question-type-desc" orientation="left">
      {{ t(`survey_creator.question.types.${question.type}`) }}
      <span
        v-if="enabledEvaluationTag && question.options.evaluationTag"
        class="evaluation-tag-label"
      >
        {{
          t(
            `survey_creator.question.evaluation_tag.${question.options.evaluationTag}`
          )
        }}
      </span>
    </Divider>
    <Row
      :gutter="20"
      align="middle"
      justify="start"
      style="flex-flow: nowrap"
      type="flex"
    >
      <Col class="question-row-move">
        <Icon color="#dcdee2" custom="i-icon icon-activity-drag" size="15" />
      </Col>
      <Col class="question-row-content">
        <question-default-layout :question="question" :survey="survey">
          <component
            :is="question.type"
            :question="question"
            :survey="survey"
          />
        </question-default-layout>
      </Col>
    </Row>
  </Card>
</template>

<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { Card, Col, Divider, Icon, Row } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import {
  BaseQuestionModel,
  QuestionType,
  SurveyModel,
} from "@wg-npm/survey-core";

import QuestionDefaultLayout from "./question-default-layout.vue";
import SingleSelection from "../common/question/single-selection.vue";
import MultiSelection from "../common/question/multi-selection.vue";
import ShortAnswer from "../common/question/short-answer.vue";
import FillBlank from "../common/question/fill_blank.vue";
import TextTitle from "../common/question/text-title.vue";
import Matrix from "../common/question/matrix.vue";
import Evaluation from "../common/question/evaluation.vue";
import Scoring from "../common/question/scoring.vue";

export default Vue.extend({
  name: "editor-question-row",
  components: {
    Row,
    Col,
    Divider,
    Card,
    Icon,
    QuestionDefaultLayout,
    [QuestionType.SINGLE_SELECTION]: SingleSelection,
    [QuestionType.MULTI_SELECTION]: MultiSelection,
    [QuestionType.SHORT_ANSWER]: ShortAnswer,
    [QuestionType.FILL_BLANK]: FillBlank,
    [QuestionType.TEXT_TITLE]: TextTitle,
    [QuestionType.MATRIX]: Matrix,
    [QuestionType.SCORING]: Scoring,
    [QuestionType.EVALUATION]: Evaluation,
  },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  data() {
    return {
      enabledEvaluationTag: false,
    };
  },
  created() {
    // @ts-ignore
    this.enabledEvaluationTag = _.get(
      this.$rootComponent,
      "options.enabledEvaluationTag",
      false
    );
  },
  props: {
    question: {
      type: Object as () => BaseQuestionModel,
      required: true,
    },
    index: {
      type: Number,
      required: true,
    },
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
});
</script>

<style lang="less" scoped>
.evaluation-tag-label {
  margin-left: 6px;
  font-size: 12px;
}
</style>
