<template>
  <Row type="flex" justify="start" :gutter="6" align="middle">
    <Col class="label">
      {{ t("survey_creator.question.evaluation.condition.question") }}
    </Col>
    <Col :span="5">
      <FormItem
        :prop="`evaluationItems[${itemIndex}].conditions[${index}].payload.scope`"
        :rules="{
          required: true,
          type: 'array',
          trigger: 'change',
          min: 1,
          message: t('survey_creator.question.notEmpty'),
        }"
      >
        <question-select
          v-model="value.scope"
          :question="question"
        ></question-select>
      </FormItem>
    </Col>
    <Col class="label">
      {{ t("survey_creator.question.evaluation.condition.question_result") }}
    </Col>
    <Col :span="5">
      <FormItem
        :prop="`evaluationItems[${itemIndex}].conditions[${index}].payload.values`"
        :rules="{
          required: true,
          type: 'array',
          trigger: 'change',
          min: 1,
          message: t('survey_creator.question.notEmpty'),
        }"
      >
        <Select
          v-model="value.values"
          :placeholder="
            t('survey_creator.question.evaluation.condition.choose_result')
          "
          :max-tag-count="1"
          multiple
        >
          <Option
            v-for="(choice, index) in choices"
            :value="choice"
            :key="index"
          >
            {{ choice }}
          </Option>
        </Select>
      </FormItem>
    </Col>
    <Col class="label">
      {{ t("survey_creator.question.evaluation.condition.question_count") }}
    </Col>
    <Col :span="3">
      <FormItem
        :prop="`evaluationItems[${itemIndex}].conditions[${index}].payload.operator`"
        :rules="{
          required: true,
          trigger: 'change',
          message: t('survey_creator.question.notEmpty'),
        }"
      >
        <Select
          v-model="value.operator"
          :placeholder="
            t('survey_creator.question.evaluation.condition.operator')
          "
        >
          <Option
            v-for="(operator, index) in operators"
            :value="operator"
            :key="index"
          >
            {{ operator }}
          </Option>
        </Select>
      </FormItem>
    </Col>
    <Col :span="3">
      <FormItem
        :prop="`evaluationItems[${itemIndex}].conditions[${index}].payload.size`"
        :rules="{
          required: true,
          type: 'number',
          trigger: 'change',
          message: t('survey_creator.question.notEmpty'),
        }"
      >
        <InputNumber v-model="value.size" :min="0" :max="value.scope.length" />
      </FormItem>
    </Col>
  </Row>
</template>
<script lang="ts">
import Vue from "vue";
import {
  Row,
  Col,
  Select,
  OptionGroup,
  Option,
  InputNumber,
  FormItem,
} from "view-design";
import _ from "lodash";
import QuestionFormMixin from "../../../../../mixins/question-form-mixin";
import ExprMixin from "./expr-mixin";
import QuestionSelect from "./question-select.vue";

export default Vue.extend({
  name: "assign",
  mixins: [QuestionFormMixin, ExprMixin],
  components: {
    Row,
    Col,
    Select,
    OptionGroup,
    Option,
    FormItem,
    InputNumber,
    QuestionSelect,
  },
  created() {
    this.value.operator = _.unescape(this.value.operator);
  },
  methods: {
    generateExpr() {
      let ids = `${_.map(this.value.scope, (e) => {
        return `"` + e + `"`;
      })}`;
      let answers = `${_.map(this.value.values, (e) => {
        return `"` + e + `"`;
      })}`;
      return `$count($[id in [${ids}]][answer in [${answers}]]) ${this.value.operator} ${this.value.size}`;
    },
  },
});
</script>
<style scoped lang="less">
.label {
  text-align: right;
  margin-bottom: 24px;
  padding-right: 2px;
}
</style>
