<template>
  <Form ref="questionForm" :model="editQuestion" :label-colon="false">
    <div v-if="enabledEvaluationTag" class="evaluation-tag-row">
      <span class="evaluation-tag-label"
        >{{ t("survey_creator.question.evaluation_tag.label") }}：</span
      >
      <RadioGroup v-model="editQuestion.options.evaluationTag">
        <Radio label="TEACHER">{{
          t("survey_creator.question.evaluation_tag.TEACHER")
        }}</Radio>
        <Radio label="COURSE">{{
          t("survey_creator.question.evaluation_tag.COURSE")
        }}</Radio>
      </RadioGroup>
    </div>
    <Form-item
      :prop="'header.text.' + primaryLanguage"
      :rules="{
        required: true,
        message: t('survey_creator.question.textTitleRequiredTip'),
      }"
    >
      <label slot="label">
        <span></span>
        <span>{{ t("survey_creator.page.textTitle") }}</span>
      </label>
      <Input
        v-model.trim="editQuestion.header.text[primaryLanguage]"
        :autosize="{ minRows: 3, maxRows: 3 }"
        type="textarea"
        :placeholder="t('survey_creator.question.textTitleRequiredTip')"
      />
    </Form-item>
  </Form>
</template>

<script lang="ts">
import Vue from "vue";
import {
  Button,
  ButtonGroup,
  Checkbox,
  Form,
  FormItem,
  Input,
  Radio,
  RadioGroup,
} from "view-design";
import _ from "lodash";
import questionFormMixin from "../../../mixins/question-form-mixin";

export default Vue.extend({
  name: "title-form",
  components: {
    Form,
    FormItem,
    ButtonGroup,
    Button,
    Input,
    Checkbox,
    Radio,
    RadioGroup,
  },
  mixins: [questionFormMixin],
  data() {
    return {
      enabledEvaluationTag: false,
    };
  },
  created() {
    // @ts-ignore
    this.enabledEvaluationTag = _.get(
      this.$rootComponent,
      "options.enabledEvaluationTag",
      false
    );
    if (this.enabledEvaluationTag && !this.editQuestion.options.evaluationTag) {
      this.$set(this.editQuestion.options, "evaluationTag", "COURSE");
    }
  },
});
</script>

<style scoped lang="less">
.evaluation-tag-row {
  display: flex;
  align-items: center;
  padding: 8px 8px 12px;
  border-bottom: 1px solid #e8eaec;
  margin-bottom: 16px;

  .evaluation-tag-label {
    margin-right: 8px;
    font-size: 14px;
    color: #262833;
    white-space: nowrap;
  }
}
</style>
