<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-customers'}">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol lg="6">
        <CCard>
          <CCardBody>
            <CForm>
              <template v-if="$route.params.profile !== 'new'">
                <h4>مشخصات مشتری</h4>
                <el-divider/>
              </template>
              <CRow>
                <CCol sm="12">
                  <CInput
                      label="نام"
                      disabled
                      :value="customer.first_name"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="نام خانوادگی"
                      disabled
                      :value="customer.last_name"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="کد مشتری"
                      disabled
                      :value="customer.business_code"
                  />
                  <p class="form-err" v-if="validation.username">{{ validation.username.msg }}</p>
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="تلفن همراه"
                      disabled
                      :value="customer.mobile_number"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="ایمیل"
                      disabled
                      :value="customer.email"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="کد ملی"
                      disabled
                      :value="customer.national_code"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="شغل"
                      disabled
                      :value="customer.job"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="تاریخ تولد"
                      disabled
                      :value="jDateOfCustomer(customer.birth_date)"
                  />
                </CCol>

                <CCol sm="12">
                  <CInput
                      label="تاریخ ازدواج"
                      disabled
                      :value="jDateOfCustomer(customer.marriage_date)"
                  />
                </CCol>
                <CCol sm="12">
                  <CInput
                      label="امتیاز"
                      disabled
                      :value="customer.score"
                  />
                </CCol>
                <CCol sm="12">
                  <CInput
                      label="موجودی کیف پول"
                      disabled
                      :value="customer.bagAmount + ' ریال'"
                  />
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h4>کد های تخفیف مشتری</h4>
            <el-divider></el-divider>
            <el-table
                :data="customer.discount_codes"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label="#">
              </el-table-column>

              <el-table-column
                  prop="discount_code"
                  label="کد"
                  width="">
              </el-table-column>

              <el-table-column
                  label="درصد تخفیف"
                  width="">
                <template slot-scope="scope">
                  {{ scope.row.discount_amount + '%' }}
                </template>
              </el-table-column>

              <el-table-column
                  label="استفاده شده"
                  width="">
                <template slot-scope="scope">
                  <span v-if="scope.row.used_by.includes(customer._id)">بله</span>
                  <span v-else>خیر</span>
                </template>
              </el-table-column>

              <el-table-column
                  prop="province"
                  label="تاریخ انقضا"
                  width="">
                <template slot-scope="scope">
                  {{ jDateDiscount(scope.row.discount_expire_date) }}
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <h4>آدرس های مشتری</h4>
            <el-divider></el-divider>
            <el-table
                :data="customer.addresses"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label="#">
              </el-table-column>

              <el-table-column
                  prop="title"
                  label="عنوان"
                  width="100">
              </el-table-column>

              <el-table-column
                  prop="province"
                  label="استان"
                  width="100">
              </el-table-column>

              <el-table-column
                  prop="city"
                  label="شهر"
                  width="100">
              </el-table-column>

              <el-table-column
                  prop="address"
                  label="آدرس"
                  width="600">
              </el-table-column>

              <el-table-column
                  label="ویرایش"
                  width="200"
                  align="center">
                <template slot-scope="scope">
                  <CButton color="danger" variant="outline" @click="deleteAddress(scope.row._id)" :key="scope.row._id + Math.random()">
                    <i class="far fa-trash-alt"></i>
                  </CButton>
                  <CButton
                      variant="outline"
                      title="بروزرسانی"
                      color="success"
                      :key="scope.row._id"
                      @click="openDialog(scope.row)">
                    <i class="far fa-eye"></i>
                  </CButton>
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <h4>لیست تراکنش ها</h4>
            <el-divider></el-divider>
            <el-table
                :data="payments.docs"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label="#">
              </el-table-column>

              <el-table-column
                  label="نوع تراکنش"
                  width="">
                <template slot-scope="scope">
                  <el-tag
                      type="success"
                      effect="dark">
                    <span>{{
                        scope.row.action === 'increaseBag' ? 'افزایش کیف پول' : scope.row.action === 'decreaseBag' ? 'کاهش کیف پول' : 'پرداخت اینترنتی'
                      }}
                    </span>
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column
                  label="وضعیت پرداخت"
                  width="">
                <template slot-scope="scope">
                  <el-tag
                      :type="scope.row.status === 'paid' ? 'success' : 'danger' "
                      effect="dark">
                    <span>{{ scope.row.status === 'paid' ? 'پرداخت موفق' : 'پرداخت ناموفق'}}</span>
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column
                  label="مبلغ"
                  width="">
                <template slot-scope="scope">
                  {{ scope.row.cost.toLocaleString() + ' ریال' }}
                </template>
              </el-table-column>

              <el-table-column
                  label="تاریخ و ساعت"
                  width="">
                <template slot-scope="scope">
                  {{ jDate(scope.row.created_at) }}
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
        <CCard class="col" v-if="payments.totalDocs>20">
          <CRow alignHorizontal="center" style="padding : 10px">
            <el-pagination :hide-on-single-page="true" layout="prev, pager, next" :page-size="payments.limit"
                           @current-change="handleCurrentChange" :current-page.sync="payments.page" :total="payments.totalDocs">
            </el-pagination>
          </CRow>
        </CCard>
      </CCol>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <h4>لاگ امتیازها</h4>
            <el-divider></el-divider>
            <el-table
                :data="customer.scoreLogs"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label="#">
              </el-table-column>

              <el-table-column
                  label="وضعیت"
                  width="">
                <template slot-scope="scope">
                  <el-tag
                      :type="scope.row.action === 'decrease'? 'danger' : 'success'"
                      effect="dark">
                    <span>{{scope.row.action === 'decrease' ? 'کاهش امتیاز' : 'افزایش امتیاز' }}</span>
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column
                  label="برای"
                  width="">
                <template slot-scope="scope">
                    <span>{{ forWhat(scope.row.forWhat)}}</span>
                </template>
              </el-table-column>

              <el-table-column
                  label="امتیاز"
                  prop="score"
                  width="">
              </el-table-column>

              <el-table-column
                  label="تاریخ و ساعت"
                  width="">
                <template slot-scope="scope">
                  {{ jDate(scope.row.created_at) }}
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
    <el-dialog
        title="آدرس"
        :visible.sync="dialogVisible"
        width="50%">
      <CInput
          label="عنوان"
          :class="validation.title ? 'err' : null"
          :description="validation.title ? validation.title.msg : null"
          v-model="address.title"/>
      <CInput
          label="استان"
          :class="validation.province ? 'err' : null"
          :disabled="true"
          :description="validation.province ? validation.province.msg : null"
          v-model="address.province"/>
      <CInput
          label="شهر"
          :class="validation.city ? 'err' : null"
          :disabled="true"
          :description="validation.city ? validation.city.msg : null"
          v-model="address.city"/>
      <CInput
          label="آدرس"
          :class="validation.address ? 'err' : null"
          :description="validation.address ? validation.address.msg : null"
          v-model="address.address"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="updateAddress">بروزرسانی</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment-jalaali"

export default {
  data() {
    return {
      title: 'مشاهده پروفایل مشتری',
      customer: null,
      payments : null,
      dialogVisible: false,
      validation: {},
      address: {}
    }
  },
  computed: {
    pageQuery() {
      return this.$route.query.page;
    }
  },
  watch:{
    pageQuery(newPage, oldPage) {
      this.$nuxt.refresh();
    }
  },
  methods: {
    forWhat(status) {
      switch (status) {
        case 'birthDate':
          return 'تولد'
        case 'marriageDate':
          return 'سالگرد ازدواج'
        case 'buy':
          return 'خرید'
        case 'register':
          return 'ثبت نام'
        case 'invite':
          return 'دعوت دوستان'
        case 'emailVerify':
          return 'تایید ایمیل'
        default :
          return 'نامشخص'
      }
    },
    handleCurrentChange(page) {
      // if (!_.isEmpty(this.search)) {
      //   this.handleSearch(page);
      // } else {
      this.$router.push({
        name: "admin-customers-profile",
        query: {
          page: page
        }
      });
      // }
    },
    openDialog(address) {
      this.address = address
      this.dialogVisible = true
    },
    updateAddress() {
      this.validation = {}
      this.$axios.put(`/api/admin/address/${this.address._id}`, this.address)
          .then(res => {
            this.dialogVisible = false;
            this.$message({
              type: 'success',
              message: 'آدرس با موفقیت ثبت شد'
            })
            this.$nuxt.refresh()
          })
          .catch(err => {
            console.log(err.response.data)
            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);
          })
    },
    deleteAddress(id) {
      this.$confirm("آدرس حذف شود؟", "اخطار", {
        confirmButtonText: "بله",
        cancelButtonText: "لغو",
        type: "warning",
      })
          .then(async () => {
            this.validation = {}
            this.$axios.delete(`/api/admin/address/${id}`)
                .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 === 404) {
                    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);
                })
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "عملیات لغو شد",
            });
          });
    },
    imagePreview(e) {
      this.customer.profile_pic = URL.createObjectURL(e.target.files[0])
    },
    jDate(date) {
      return moment(date).format('jYYYY/jMM/jDD HH:MM')
    },
    jDateOfCustomer(date) {
      if (date){
        return moment(date).format('jYYYY/jMM/jDD')
      }
    },
    jDateDiscount(date) {
      return moment(date , 'X').format('jYYYY/jMM/jDD')
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append("first_name", this.customer.first_name)
      data.append("last_name", this.customer.last_name)
      data.append("mobile_number", this.customer.mobile_number)
      data.append("email", this.customer.email)
      data.append("username", this.customer.username)
      data.append("permissions", JSON.stringify(this.customer.permissions))
      data.append("password", this.customer.password)
      data.append("password_confirmation", this.customer.password_confirmation)
      if (this.$refs.profile_pic.files[0]) data.append("profile_pic", this.$refs.profile_pic.files[0])

      this.$axios.put(`/api/admin/admin/${this.customer._id}`, data, this.axiosConfig)
          .then(response => {
            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 === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, query , error}) {
    try {
      const customer = await $axios.get(`/api/admin/user/${params.profile}`)
      const payments = await $axios.get(`/api/admin/payments/${params.profile}?page=${query.page || 1}`)
      return {
        customer: customer.data,
        payments: payments.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>

