<template>
  <Drawer
    v-model="visibleDrawer"
    :styles="styles"
    :width="50"
    :closable="true"
    :mask-closable="false"
  >
    <div slot="header" class="title">
      <span>{{ t("survey_creator.question.jump.title") }}</span>
    </div>
    <div>
      <jump-setting-form
        class="question-form"
        ref="questionComponent"
        :question="selectedQuestion"
        :to-questions="toQuestions"
      />
    </div>
    <div class="drawer-footer">
      <Button type="primary" @click="saveJumpInfo">
        <span>{{ t("survey_creator.common.save") }}</span>
      </Button>
      <Button @click="cancel">{{ t("survey_creator.common.cancel") }}</Button>
    </div>
  </Drawer>
</template>

<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { Button, Drawer } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import { BaseQuestionModel } from "@wg-npm/survey-core";
import JumpSettingForm from "./forms/jump-setting-form.vue";

export default Vue.extend({
  name: "question-jump-setting-drawer",
  components: {
    Drawer,
    Button,
    JumpSettingForm,
  },
  inject: ["$rootComponent"],
  mixins: [LocaleMixin],
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    fromQuestion: {
      type: Object as () => BaseQuestionModel,
      required: false,
    },
    toQuestions: {
      type: Array,
      required: false,
    },
  },
  model: {
    prop: "visible",
    event: "input",
  },
  watch: {
    visible(val) {
      this.visibleDrawer = val;
    },
    visibleDrawer(val) {
      this.$emit("input", val);
      if (val) {
        this.$emit("on-open", val);
      } else {
        this.$emit("on-close", val);
      }
    },
  },
  data() {
    return {
      visibleDrawer: this.visible,
      styles: {
        height: "calc(100% - 53px)",
        overflow: "auto",
        position: "static",
      },
      selectedQuestion: null,
    };
  },
  created() {
    let question = _.cloneDeep(this.fromQuestion);
    // @ts-ignore
    if (_.size(_.get(question, "jumps", [])) === 0) {
      question.jumps = [];
    }
    this.selectedQuestion = question;
  },
  methods: {
    closeDrawer() {
      this.visibleDrawer = false;
    },
    saveJumpInfo() {
      const self = this;
      const questionComponent = this.$refs.questionComponent;
      if (questionComponent.editQuestion.jumps.length === 0) {
        self.closeDrawer();
        return;
      }
      questionComponent.$refs["questionForm"].validate((valid) => {
        if (valid) {
          self.$rootComponent.onQuestionCreateOrUpdate(
            questionComponent.editQuestion,
            this.operationType
          );
          self.closeDrawer();
        }
      });
    },
    cancel() {
      this.closeDrawer();
    },
  },
});
</script>
<style type="less">
.title {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #262833;
}
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
  z-index: 99;
}
.question-form {
  margin-bottom: 53px;
}
</style>
