<template>
  <user-dashboard-container page-class="survey" panel-title="نظر سنجی">
    <form class="form form_3" @submit.prevent="post">
      <div v-if="code" class="mb-5">
        <h3>
          شما درحال ثبت نظر برای فرم
          <b style="color: #065495">{{ code }}</b>
          هستید:
        </h3>
      </div>
      <div v-for="item in surveyOptions" :key="item.fieldName" class="mb-5" style="width: 100%">
        <div class="mb-3">
          <label>{{ item.title }}</label>
        </div>

        <el-radio-group v-model="survey[item.fieldName]">
          <el-radio-button
            v-for="option in surveyOptionsValues.keys()"
            :key="option + '_Option_' + item.fieldName"
            :label="option"
          >
            {{ surveyOptionsValues.get(option) }}
          </el-radio-button>
        </el-radio-group>
      </div>

      <hr />

      <div class="formRow">
        <label for="description">نظرات ، پیشنهادات و انتقادات (اختیاری):</label>
        <textarea
          id="description"
          v-model="survey.description"
          name="description"
          placeholder="نظرات ، پیشنهادات و انتقادات را میتوانید اینجا بنویسید"
          cols="30"
          rows="10"
        ></textarea>
      </div>

      <div class="formBtnRow">
        <button class="btn btn-primary" type="submit" :disabled="disabledBtn">ثبت نظر</button>
      </div>
    </form>
  </user-dashboard-container>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AccountSurveyPage',
  layout: 'user',
  data() {
    return {
      survey: this.initForm()
    }
  },
  computed: {
    ...mapGetters({
      surveyOptions: 'front/surveyOptions',
      surveyOptionsValues: 'front/surveyOptionsValues'
    }),
    code() {
      return this.$route?.query?.code
    },
    disabledBtn() {
      return (
        !this.survey.purchasedProduct ||
        !this.survey.guaranteeWorkFlow ||
        !this.survey.employeeResponsibility ||
        !this.survey.serviceQuality ||
        !this.survey.serviceTime ||
        !this.survey.repairQuality ||
        !this.survey.coast
      )
    }
  },
  methods: {
    initForm() {
      const survey = {
        purchasedProduct: 0,
        guaranteeWorkFlow: 0,
        employeeResponsibility: 0,
        serviceQuality: 0,
        serviceTime: 0,
        repairQuality: 0,
        coast: 0,
        description: ''
      }
      return survey
    },
    post() {
      if (this.disabledBtn) return
      this.$axios.$post('/api/user/survey', { ...this.survey, code: this.code || '' }).then(res => {
        this.$message.success('با تشکر از زمانی که گذاشتید، نظر شما ثبت شد.')
        if (this.code) {
          return this.$router.push({ name: 'account-guarantee', query: { type: 'atl' } })
        }
        this.survey = this.initForm()
      })
    }
  }
}
</script>
