<template>
  <Form ref="questionForm" :model="editQuestion" :label-colon="false">
    <Row>
      <Form-item
        :prop="'header.text.' + primaryLanguage"
        :rules="{
          required: true,
          message: t('survey_creator.question.titleRequiredTip'),
        }"
        :label="t('survey_creator.page.question')"
      >
        <Checkbox v-model="editQuestion.options.required"
          >{{ t("survey_creator.question.questionRequired") }}
        </Checkbox>
        <Row>
          <Col :span="23" :offset="-1">
            <Input
              v-model.trim="editQuestion.header.text[primaryLanguage]"
              :placeholder="t('survey_creator.question.titleRequiredTip')"
            />
          </Col>
        </Row>
      </Form-item>
    </Row>
    <Row>
      <Form-item
        :label="t('survey_creator.question.evaluation.selectedType')"
        :label-width="labelWidth"
      >
        <Select
          v-model="editQuestion.options.evaluationType"
          style="width: 200px"
          @on-change="onChange"
        >
          <Option v-for="item in evaluationTypes" :value="item" :key="item"
            >{{ t(`survey_creator.question.evaluation.type.${item}`) }}
          </Option>
        </Select>
      </Form-item>
    </Row>
    <component
      :is="editQuestion.options.evaluationType"
      v-model="editQuestion.evaluationItems"
      :question="question"
    ></component>
  </Form>
</template>
<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import {
  Col,
  Form,
  FormItem,
  Row,
  Select,
  Checkbox,
  Option,
  Input,
} from "view-design";
import { SurveyLayout, EvaluationType } from "@wg-npm/survey-core";
import draggable from "vuedraggable";
import questionFormMixin from "../../../mixins/question-form-mixin";
import Star from "./evaluation/star.vue";
import Expr from "./evaluation/expr.vue";
import { ExprEvaluationItemType } from "@wg-npm/survey-core/src/models";

export default Vue.extend({
  name: "evaluation-form",
  components: {
    Form,
    FormItem,
    Row,
    Col,
    draggable,
    Option,
    Select,
    Checkbox,
    Input,
    [EvaluationType.STAR]: Star,
    [EvaluationType.EXPR]: Expr,
  },
  mixins: [questionFormMixin],
  data() {
    return {
      labelWidth: 80,
      layoutOptions: [SurveyLayout.HORIZONTAL, SurveyLayout.VERTICAL],
      evaluationTypes: [EvaluationType.STAR, EvaluationType.EXPR],
      realColumns: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.editQuestion.evaluationItems ||
        this.$set(this.editQuestion, "evaluationItems", []);
      this.editQuestion.options.evaluationType ||
        this.$set(
          this.editQuestion.options,
          "evaluationType",
          EvaluationType.STAR
        );
    },
    onChange(value) {
      if (value == EvaluationType.EXPR) {
        _.forEach(this.editQuestion.evaluationItems, (item, index) => {
          // @ts-ignore
          _.set(item, "type", ExprEvaluationItemType.IF);
        });
        // @ts-ignore
        _.set(
          this.editQuestion.evaluationItems[
            _.size(this.editQuestion.evaluationItems) - 1
          ],
          "type",
          ExprEvaluationItemType.ELSE
        );
      }
    },
  },
});
</script>

<style scoped lang="less">
/deep/ .ivu-table-cell-slot .ivu-form-item {
  margin-bottom: 4px;
  margin-top: 0;
}

/deep/ .ivu-table-cell-slot .ivu-form-item-error {
  margin-bottom: 24px;
  margin-top: 0;
}

/deep/ .ivu-form-item {
  width: 100%;
}
</style>
