<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
<!--      <CButton size="sm" color="success" class="mr-auto" @click="addInfo">بروزرسانی</CButton>-->
    </CustomSubHeader>
    <CCard>
      <CCardBody>
        <CCol lg="6" sm="12">
          <el-switch
              style="display: flex; direction: ltr!important; justify-content: right"
              v-model="notif.multi"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="ارسال عمومی"
              inactive-text="ارسال اختصاصی">
          </el-switch>
          <!--            <el-checkbox v-model="notif.multi" label="ارسال عمومی"/>-->
        </CCol>
        <CCol class="mt-4" v-if="!notif.multi" lg="6" sm="12">
          <el-select
              v-model="notif.user_id"
              filterable
              style="width: 300px;margin-top: 20px;margin-bottom: 10px;">
            <el-option
                v-for="item in users"
                :key="item._id"
                :value="item._id"
                :label="item.business_code + ' ' + '(' + item.first_name + ' ' + item.last_name + ')'"/>
          </el-select>
        </CCol>
        <CCol class="mt-4" sm="12" lg="6">
          <CInput
              :class="validation.title ? 'err' : null"
              label="عنوان"
              :description="validation.title ? validation.title.msg : null"
              v-model="notif.title"
          />
        </CCol>
        <CCol class="mt-4" sm="12" lg="6">
          <CTextarea
              :class="validation.body ? 'err' : null"
              label="متن پیام"
              :description="validation.body ? validation.body.msg : null"
              v-model="notif.body"
          />
        </CCol>
        <CCol class="mt-4" sm="12" lg="6">
          <el-button type="success" @click="sendNotification">ارسال</el-button>
        </CCol>

      </CCardBody>
    </CCard>


  </div>
</template>

<script>
import moment from 'moment-jalaali'


export default {
  data() {
    return {
      title: 'ارسال نوتیفیکیشن',
      list_title: 'لیست',
      // base data
      notif: {
        multi: true,
        user_id: '',
        title: '',
        body: '',
      },
      users: null,
      // validation
      validation: {}
    }
  },
  methods: {
    sendNotification() {
      this.validation = {}
      this.$axios.post('/api/admin/notification', this.notif)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'نوتیفیکیشن با موفقیت ارسال شد'
            })
            this.$nuxt.refresh()
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422) {
              this.$message({
                type: 'warning',
                message: 'پارامترها را بررسی کنید'
              })
              this.validation = err.response.data.validation;
            } else console.log(err.response.data);
          });
    },
    jDate(date) {
      return moment(date, 'X').format('jYYYY/jMM/jDD')
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, error , params}) {
    try {
      const users = await $axios.get(`/api/admin/users/getAll/${params?.branch}`)
      return {
        users: users.data,
      }

    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اطلاعات مورد نظر پیدا نشد",
        });
    }
  }
}
</script>


<style lang="scss">
.el-button:focus {
  outline-color: #39f !important;
}

#map {
  width: 100vh;
  height: 50vh;
}

.holder-logo {
  left: 0;
}

.mapboxgl-ctrl-attrib-button {
  display: none;
}
</style>
