<template>
  <Tooltip max-width="200">
    <span v-html="this.descTitle" slot="content"></span>
    <span v-html="this.desc" class="desc"> </span>
  </Tooltip>
</template>

<script lang="ts">
const SPLIT_LENGTH = 60;
import Vue from "vue";
import { ExprConditionType } from "@wg-npm/survey-core/src/models";
import LocaleMixin from "../../../../mixins/locale-mixin";
import _ from "lodash";
import { Tooltip } from "view-design";
import { ExprEvaluationQuestion } from "@wg-npm/survey-core/src/expr-evaluation-question";

export default Vue.extend({
  name: "expr-if",
  mixins: [LocaleMixin],
  components: { Tooltip },
  inject: ["$rootComponent"],
  data() {
    return {
      desc: "",
      descTitle: "",
    };
  },
  created() {
    this.initialDesc();
  },
  props: {
    conditions: {
      type: Array,
      required: true,
    },
  },
  computed: {
    questions() {
      return _.cloneDeep(this.$rootComponent.currentSurvey.questions);
    },
  },
  watch: {
    conditions: {
      handler(val) {
        this.initialDesc();
      },
      deep: true,
    },
  },
  methods: {
    getDesc(condition) {
      let payload = condition.payload;
      if (condition.type == ExprConditionType.SCORE) {
        return this.t(
          "survey_creator.question.evaluation.condition.score_template",
          [
            payload.minScore,
            payload.leftOperator,
            payload.rightOperator,
            payload.maxScore,
          ]
        );
      } else {
        let numbers = new ExprEvaluationQuestion(
          this.questions,
          payload.scope
        ).calculateNumbers();
        let scope = _.join(
          _.map(numbers, (number) => {
            if (_.isArray(_.head(number))) {
              return _.join(
                _.map(number, (e) => _.join(e, "-")),
                ", "
              );
            }
            return _.join(number, "-");
          }),
          ", "
        );
        if (condition.type == ExprConditionType.ASSIGN) {
          return this.t(
            "survey_creator.question.evaluation.condition.assign_template",
            [
              scope,
              _.join(payload.values, "、"),
              _.unescape(payload.operator),
              payload.size,
            ]
          );
        } else if (condition.type == ExprConditionType.AUTO) {
          return this.t(
            "survey_creator.question.evaluation.condition.auto_template",
            [scope, _.join(payload.values, "、")]
          );
        }
        return "";
      }
    },
    getChineseLength(_str) {
      _str = _.trim(_str);
      let strLength = _str.length;
      if (!strLength) {
        return 0;
      }
      let chinese = _str.match(/[\u4e00-\u9fa5]/g);
      return chinese ? chinese.length : 0;
    },
    initialDesc() {
      let desc = "";
      let ds = _.map(this.conditions, (c) => {
        return this.getDesc(c);
      });
      desc = _.join(ds, "<br>");
      this.desc = desc;
      let strLength = desc.length;
      let cLength = this.getChineseLength(desc.substring(0, SPLIT_LENGTH));
      if (strLength > SPLIT_LENGTH) {
        this.desc =
          desc.substring(0, SPLIT_LENGTH - _.ceil(cLength / 2)) + "...";
      }
      this.descTitle = desc;
    },
  },
});
</script>
