<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-surveys-private' }">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol xl="12">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput v-if="survey.code" :value="survey.code" label="شماره پذیرش دائم" disabled />
              <CInput
                v-for="item in surveyOptions"
                :key="item.fieldName"
                :value="surveyOptionsValues.get(survey[item.fieldName])"
                :label="item.title"
                disabled
              />
              <CTextarea :value="survey.description" :rows="5" label="نظرات ، پیشنهادات و انتقادات" disabled />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AdminSurveyDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const survey = await $axios.$get(`/api/admin/surveys/${params.survey}`)
      return {
        survey
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'مشاهده جزعیات نظرسنجی',
      survey: null
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    ...mapGetters({
      surveyOptions: 'front/surveyOptions',
      surveyOptionsValues: 'front/surveyOptionsValues'
    })
  }
}
</script>
