<template>
  <Row
    :gutter="8"
    class="editor-question-toolbar"
    type="flex"
    justify="center"
    align="middle"
  >
    <Col style="width: 32px" v-if="enabledJump">
      <Badge :count="jumps.length">
        <Tooltip
          :content="t('survey_creator.common.tips.jump')"
          :transfer="true"
        >
          <img
            style="margin-top: 4px; cursor: pointer"
            src="../../images/jump.svg"
            @click="onJump"
          />
        </Tooltip>
      </Badge>
    </Col>
    <Col v-if="edit && editable">
      <clickable-icon
        :tooltip="t('survey_creator.common.tips.edit')"
        type="ios-create-outline"
        @click="onEdit"
      ></clickable-icon>
    </Col>
    <Col v-if="copy && editable">
      <clickable-icon
        :tooltip="t('survey_creator.common.tips.copy')"
        type="ios-copy-outline"
        @click="onCopy"
      ></clickable-icon>
    </Col>
    <Col v-if="enableDelete && editable">
      <clickable-icon
        :tooltip="t('survey_creator.common.tips.delete')"
        type="ios-trash-outline"
        @click="onDelete"
      ></clickable-icon>
    </Col>
  </Row>
</template>

<script lang="ts">
import Vue from "vue";
import { Col, Row, Badge, Tooltip, Modal } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import ClickableIcon from "../common/clickable-icon.vue";
import _ from "lodash";
import { SurveyModel } from "@wg-npm/survey-core";

export default Vue.extend({
  name: "editor-question-toolbar",
  components: { Row, Col, ClickableIcon, Badge, Tooltip, Modal },
  mixins: [LocaleMixin],
  props: {
    edit: {
      type: Boolean,
      required: false,
      default: true,
    },
    copy: {
      type: Boolean,
      required: false,
      default: true,
    },
    enableDelete: {
      type: Boolean,
      required: false,
      default: true,
    },
    enabledJump: {
      type: Boolean,
      required: false,
      default: false,
    },
    question: {
      type: Object,
      required: true,
    },
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
  computed: {
    jumps() {
      // @ts-ignore
      return _.get(this.question, "jumps", []);
    },
    editable() {
      // @ts-ignore
      return _.get(this.question, "options.editable", true);
    },
  },
  methods: {
    onEdit() {
      this.$emit("on-edit");
    },
    onCopy() {
      this.$emit("on-copy");
    },
    onDelete() {
      //如果题目的选项设置了逻辑跳转，或题目是逻辑跳转的目标题目，则删除需提示。否则直接删除
      let surveyAllJumpQuestionIds = _.map(
        _.flatMap(this.survey.questions, (question) =>
          // @ts-ignore
          _.get(question, "jumps", [])
        ),
        "toQuestionId"
      );

      if (
        this.jumps.length > 0 ||
        _.includes(surveyAllJumpQuestionIds, this.question.id)
      ) {
        // @ts-ignore
        Modal.confirm({
          title: this.t("survey_creator.question.jump.delete_question"),
          content: this.t("survey_creator.question.jump.delete_question_desc"),
          onOk: () => {
            this.$emit("on-delete");
          },
        });
      } else {
        this.$emit("on-delete");
      }
    },
    onJump() {
      this.$emit("on-jump");
    },
  },
});
</script>
