<template>
  <Card dis-hover class="mt-base">
    <Row type="flex" justify="space-between" align="middle">
      <Col>
        <div class="text">
          {{ t("survey_creator.question.evaluation.condition.else") }}
        </div>
      </Col>
      <Col>
        <FormItem
          :prop="'evaluationItems[' + position + '].text.' + primaryLanguage"
          :rules="{
            required: true,
            message: t(
              'survey_creator.question.evaluation.condition.evaluation_require_tip'
            ),
          }"
        >
          {{
            t("survey_creator.question.evaluation.condition.evaluation_label")
          }}
          <Input
            class="input"
            v-model.trim="evaluationItems[position].text[primaryLanguage]"
          />
        </FormItem>
      </Col>
    </Row>
  </Card>
</template>
<script lang="ts">
import Vue from "vue";
import QuestionFormMixin from "../../../../../mixins/question-form-mixin";
import { Card, Row, Col, FormItem, Input } from "view-design";
import _ from "lodash";

export default Vue.extend({
  name: "else",
  mixins: [QuestionFormMixin],
  components: {
    Card,
    Row,
    Col,
    FormItem,
    Input,
  },
  props: {
    value: {
      type: Array,
      required: true,
    },
    position: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      evaluationItems: this.value,
    };
  },
  created() {
    this.evaluationItems[this.position].conditions = [{ expr: "true" }];
  },
});
</script>
<style scoped lang="less">
.mt-base {
  margin-top: 12px;
}

.action {
  float: right;
}

.input {
  width: 100px;
}

.text {
  background-color: #ebf7ff;
  height: 32px;
  padding: 4px 18px;
  font-weight: 500;
  color: #515a6e;
}

/deep/ .ivu-card .ivu-form-item {
  margin-bottom: 4px;
  margin-top: 0;
}

/deep/ .ivu-card .ivu-form-item-error {
  margin-bottom: 24px;
  margin-top: 0;
}
</style>
