<template>
  <Row type="flex" justify="start" align="middle" :gutter="30">
    <Col>
      <Icon type="ios-arrow-forward" />
      {{ t("survey_creator.survey.question_count") }}：
      <span class="count">{{ questionCount }}</span>
    </Col>
    <Col>
      {{ t("survey_creator.survey.total_score") }}：
      <span class="max-score">{{ totalScore }}</span>
    </Col>
    <Col>
      {{ t("survey_creator.survey.layout") }}：
      <RadioGroup
        :value="
          survey.options.layout ? survey.options.layout : layoutOptions[0]
        "
        @on-change="onLayoutChange"
      >
        <Radio
          v-for="layoutOption in layoutOptions"
          :key="layoutOption"
          :label="layoutOption"
        >
          {{ t(`survey_creator.common.layout.${layoutOption}`) }}
        </Radio>
      </RadioGroup>
    </Col>
  </Row>
</template>

<script lang="ts">
import Vue from "vue";
import { Row, Col, Icon, Radio, RadioGroup } from "view-design";
import { SurveyLayout, SurveyModel } from "@wg-npm/survey-core";
import LocaleMixin from "../../mixins/locale-mixin";

export default Vue.extend({
  name: "editor-options",
  components: { Row, Col, Icon, RadioGroup, Radio },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
  data() {
    return {
      layoutOptions: [SurveyLayout.HORIZONTAL, SurveyLayout.VERTICAL],
    };
  },
  computed: {
    questionCount() {
      return this.survey.statistics.questionCount;
    },
    totalScore() {
      return this.survey.statistics.maxScore;
    },
  },
  methods: {
    onLayoutChange(val) {
      this.$rootComponent.onLayoutChange(val);
    },
  },
});
</script>
