<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="success" class="mr-auto" @click="post">افزودن</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="ticket.title"
                label="عنوان تیکت"
                horizontal
                :description="validation.title ? validation.title.msg : null"
                :class="validation.title ? 'err' : null"
              />

              <div class="form-group form-row mb-3" :class="validation.user_id ? 'err' : null">
                <CCol sm="3" class="col-form-label">
                  <label>کد مشتری</label>
                </CCol>
                <CCol sm="9">
                  <el-select v-model="ticket.user_id" filterable placeholder="" style="width: 100%">
                    <el-option-group :key="0" label="کد مشتری های وریتی">
                      <el-option
                        v-for="item in users"
                        :key="item._id + '_verityIDs'"
                        :label="item.verity_businessCode"
                        :value="item._id"
                      >
                      </el-option>
                    </el-option-group>

                    <el-option-group :key="1" label="کد مشتری های پاناتک">
                      <el-option
                        v-for="item in users"
                        :key="item._id + '_panatechIDs'"
                        :label="item.panatech_businessCode"
                        :value="item._id"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>
                  <small v-if="validation.user_id" class="form-text text-muted w-100">{{
                    validation.user_id.msg
                  }}</small>
                </CCol>
              </div>

              <CInput
                v-model="ticket.transaction_id"
                label="کد پذیرش"
                horizontal
                placeholder="اختیاری"
                :description="validation.transaction_id ? validation.transaction_id.msg : null"
                :class="validation.transaction_id ? 'err' : null"
              />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminAddTicket',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const users = await $axios.get('/api/admin/allUsers')
      return {
        users: users.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      title: 'افزودن تیکت برای مشتری',
      users: null,
      ticket: {
        title: '',
        transaction_id: '',
        user_id: ''
      },
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  methods: {
    post() {
      this.validation = {}
      this.$axios
        .post('/api/admin/addTicket', this.ticket)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'تیکت با موفقیت ثبت شد، پیام خودرا بنویسید.'
          })
          this.$router.push({ name: 'admin-tickets-ticket', params: { ticket: res.data._id } })
        })
        .catch(err => {
          if (err.response.data.status === 401) {
            return this.$message({
              type: 'warning',
              message: 'لطفا دوباره وارد حساب خود شوید'
            })
          }
          if (err.response.status === 422) this.validation = err.response.data.validation
          else console.log(err)
        })
    },
    mappedArray(arr) {
      return arr.map(item => {
        return {
          label: item.arpa_businessCode,
          value: item.arpa_businessCode
        }
      })
    }
  }
}
</script>
