<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="help._creator && help._creator.first_name" type="primary">
        <span>ایجاد یا اصلاح کننده: </span>
        <span> {{ help._creator.first_name + ' ' + help._creator.last_name }} </span>
      </el-tag>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin' }">برگشت به صفحه داشبورد</CButton>
      <CButton size="sm" color="success" style="margin-right: 10px" :disabled="pending" @click="upload"
        >بروزرسانی</CButton
      >
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CRow form class="form-group" :class="validation.description && 'err'">
                <CCol tag="label" sm="12" class="col-form-label">صفحه آموزش ثبت گارانتی را انتخاب کنید</CCol>
                <CCol sm="12">
                  <el-select v-model="help.helpId" filterable style="width: 100%">
                    <el-option v-for="item in learnings" :key="item._id" :label="item.title" :value="item._id" />
                  </el-select>
                  <small v-if="validation.helpId" class="form-text text-muted w-100">
                    {{ validation.helpId.msg }}
                  </small>
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminHelp',
  layout: 'admin',
  async asyncData({ $axios, error }) {
    try {
      const help = await $axios.get(`/api/public/help`)
      const learnings = await $axios.get(`/api/public/learning/page/all`)
      return {
        help: help.data || {
          helpId: ''
        },
        learnings: learnings.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'راهنمای ثبت گارانتی',
      help: null,
      learnings: null,
      validation: {},
      pending: false
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  methods: {
    upload() {
      this.pending = true
      this.validation = {}
      this.$axios
        .put(`/api/admin/help`, this.help)
        .then(response => {
          this.pending = false
          if (response.data) {
            this.$message({
              message: 'صفحه با موفقیت بروزرسانی شد.',
              type: 'success'
            })
          }
        })
        .catch(error => {
          this.pending = false
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    }
  }
}
</script>
