<template>
  <div>
    <el-dialog title="اطلاعات کاربر" :visible.sync="centerDialogVisible" width="40%" center>
      <el-descriptions title="" direction="vertical" :column="4" border>
        <el-descriptions-item label="نام و نام خانودگی">{{
          requestData.userId?.first_name + ' ' + requestData.userId?.last_name
        }}</el-descriptions-item>
        <el-descriptions-item label="شماره همراه">{{ requestData.userId?.mobile_number }}</el-descriptions-item>
        <el-descriptions-item label="استان">{{ requestData.userId?.province_name }}</el-descriptions-item>
        <el-descriptions-item label="شهر">{{ requestData.userId?.city_name }}</el-descriptions-item>
        <el-descriptions-item label="کد ملی ">{{ requestData.userId?.national_code }}</el-descriptions-item>
        <el-descriptions-item label="نام فروشگاه">{{ requestData.userId?.shopName }}</el-descriptions-item>
        <el-descriptions-item v-if="requestData.status == 2" label="شماره پیگیری ">{{
          requestData.trackingNumber
        }}</el-descriptions-item>
      </el-descriptions>
      <CCardBody>
        <el-table :data="[requestData?.card]" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="holderName" label="نام صاحب کارت" width="200px"> </el-table-column>
          <el-table-column prop="PAN" label="شماره حساب" width="200px"> </el-table-column>
          <el-table-column prop="IBAN" label="شماره شبا" width=""> </el-table-column>
        </el-table>
      </CCardBody>

      <el-input
        v-if="requestData.status === 1"
        v-model="trackingNumber"
        placeholder="شماره پیگیری"
        style="display: inline-block; max-width: 500px; margin-top: 8px"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">بستن</el-button>
        <el-button
          v-if="requestData.status !== 2"
          type="primary"
          @click="patchIt(requestData._id, requestData.status, { trackingNumber })"
          >{{ requestData.status == 1 ? 'تایید واریز' : 'تایید' }}</el-button
        >
      </span>
    </el-dialog>

    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">درخواست های برداشت</CBreadcrumb>
    </CustomSubHeader>

    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardHeader>
            <slot name="header">
              <i class="fas fa-filter"></i>
              <b>فیلتر ها</b>
            </slot>
          </CCardHeader>

          <CCardBody>
            <CRow>
              <CCol sm="12">
                <CButtonGroup>
                  <CButton color="primary" :class="filterType === 'all' && 'selected'" @click="filterType = 'all'"
                    >همه</CButton
                  >
                  <CButton color="success" :class="filterType === 'dep' && 'selected'" @click="filterType = 'dep'">
                    واریز شده</CButton
                  >
                  <CButton color="success" :class="filterType === 'accept' && 'selected'" @click="filterType = 'accept'"
                    >تایید شده</CButton
                  >
                  <CButton color="warning" :class="filterType === 'pend' && 'selected'" @click="filterType = 'pend'"
                    >درانتظار
                  </CButton>
                </CButtonGroup>
              </CCol>
              <CCol sm="12">
                <el-divider></el-divider>
              </CCol>
              <CCol sm="12">
                <h4>جستجو در لیست:</h4>
                <el-input
                  v-model="filterText"
                  clearable
                  placeholder=""
                  style="display: inline-block; max-width: 500px; margin-top: 8px"
                ></el-input>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>

    <CCard>
      <CCardHeader >
        <slot  name="header">
          <CIcon name="cil-grid" />
          درخواست های برداشت
        </slot>
      </CCardHeader>

      <CCardBody>
        <el-table :data="paginatedItems" :row-class-name="hasUnread" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column label="مبلغ تومانی " width="150px">
            <template slot-scope="scope">
              {{ scope.row.amount }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="dollarAmount" label=" مبلغ دلاری" width="150px"> </el-table-column> -->

          <el-table-column label="نام فروشگاه" width="">
            <template slot-scope="scope">
              {{ scope.row.userId.shopName }}
            </template>
          </el-table-column>
          <el-table-column label="کدملی فروشنده" width="">
            <template slot-scope="scope">
              {{ scope.row.userId.national_code }}
            </template>
          </el-table-column>
          <el-table-column label=" نام و نام خانوادگی" width="">
            <template slot-scope="scope">
              {{ scope.row.userId.first_name + ' ' + scope.row.userId.last_name }}
            </template>
          </el-table-column>
          <el-table-column label=" شماره همراه" width="">
            <template slot-scope="scope">
              {{ scope.row.userId.mobile_number }}
            </template>
          </el-table-column>

          <el-table-column label="محل سکونت" width="">
            <template slot-scope="scope">
              {{ scope.row.userId.province_name + ', ' + scope.row.userId.city_name }}
            </template>
          </el-table-column>

          <el-table-column label="وضعیت" width="">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 2" color="info"> واریز شده</el-tag>
              <el-tag v-if="scope.row.status == 1" type="success">تایید شده</el-tag>
              <el-tag v-if="scope.row.status == 0" type="warning"> درانتظار</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="تاریخ درخواست" width="">
            <template slot-scope="scope">
              {{new Date(scope.row.created_at).toLocaleString('fa-IR')  }}
            </template>
          </el-table-column>
          <el-table-column label="بررسی" width="110" align="center">
            <template slot-scope="scope">
              <CButton :key="scope.row._id" color="info" variant="outline" @click="showDialog(scope.row)">
                <i class="fa fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
        <div style="direction:ltr; textAlign:center; marginTop:20px;">
          <el-pagination
          v-if="paginate"
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-count="totalPages"
          @current-change="handlePageChange"
          >
        </el-pagination>
        </div>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminGpsWithdraw',
  layout: 'admin',
  async asyncData({ $axios, error, query }) {
    try {
      const page = parseInt(query.page) || 1
      const rows = parseInt(query.rows) || 10
      const { data } = await $axios.get('/api/admin/gps/withdraw', {
        params: {
          page,
          rows
        }
      })

      return {
        requestsData: data.data,
        totalDocuments: data.totalDocuments || 0,
        totalPages: data.totalPages || 1
      }
    } catch (error) {
      console.log(error)
    }
  },
  data() {
    return {
      requestsData: [],
      totalDocuments: 0,
      totalPages: 1,
      centerDialogVisible: false,
      requestData: {},
      filterText: '',
      trackingNumber: null,
      pageSize: 10
    }
  },

  computed: {
    config() {
      return this.$config
    },
    filteredItems() {
      console.log('res data', this.requestsData)

      const filterUsersByType = this.requestsData.filter(item => {
        if (this.filterType === 'all') return item
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'dep') return item.status == 2
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'accept') return item.status == 1
        // eslint-disable-next-line eqeqeq
        else if (this.filterType === 'pend') return item.status == 0
        else return null
      })
      const filterText = this.filterText
      if (!this.filterText.length) return filterUsersByType
      else {
        return filterUsersByType.filter(item => {
          return (
            item.userId.mobile_number.includes(filterText) ||
            item.userId.national_code.includes(filterText) ||
            item.userId.last_name.includes(filterText) ||
            item.userId.first_name.includes(filterText)
          )
        })
      }
    },
    totalFilteredItems() {
      return this.filteredItems.length
    },
    paginatedItems() {
      return this.filteredItems
    },
    currentPage() {
      return parseInt(this.$route.query?.page) || 1
    },
    paginate() {
      return this.totalPages > 1
    },
    filterType: {
      get() {
        return this.$route.query?.filter
      },
      set(val) {
        this.$router.push({ name: 'admin-gps-withdraw', query: { filter: val } })
      }
    }
  },
  watch: {
    filterText() {
      this.fetchData(1)
    },
    filterType() {
      this.fetchData(1)
    },
    '$route.query.page'() {
      this.fetchData()
    }
  },
  methods: {
    async fetchData(page = null) {
      const currentPage = page || this.currentPage
      try {
        const { data } = await this.$axios.get('/api/admin/gps/withdraw', {
          params: {
            page: currentPage,
            rows: this.pageSize
          }
        })
        this.requestsData = data.data
        this.totalDocuments = data.totalDocuments || 0
        this.totalPages = data.totalPages || 1
      } catch (error) {
        console.log(error)
        this.$message({
          type: 'error',
          message: 'خطا در دریافت اطلاعات'
        })
      }
    },
    handlePageChange(page) {
      this.$router.push({
        name: 'admin-gps-withdraw',
        query: {
          ...this.$route.query,
          page
        }
      })
    },
    showDialog(data) {
      this.requestData = data
      this.centerDialogVisible = true
    },
    hasUnread({ row, rowIndex }) {
      return row.status === 0 ? 'unreadMsgInCv' : null
    },
    patchIt(id, status, data) {
      let st
      // eslint-disable-next-line eqeqeq
      if (status == 1) {
        st = 'deposit'
        if (!data?.trackingNumber) {
          return this.$message({
            type: 'warning',
            message: 'لطفا شماره پیگیری را وارد کنید'
          })
        }
      } else {
        st = 'accept'
      }

      this.$axios
        .patch(`/api/admin/gps/withdraw/${id}/${st}`, data)
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.trackingNumber = null
          this.centerDialogVisible = false

          this.$nuxt.refresh()
        })
        .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)
            return this.$message({
              type: 'warning',
              message: err.msg
            })
          }
        })
    }
  }
}
</script>
<style>
.unreadMsgInCv {
  background: rgba(orange, 0.1) !important;
}
</style>
