<template>
  <user-dashboard-container page-class="drafts" panel-title="لیست پیشنویس ها">
    <div class="tableBox">
      <table class="drafts">
        <thead>
          <tr>
            <th class="index">ردیف</th>
            <th class="description">توضیحات</th>
            <th class="brand">نوع</th>
            <th class="quantity">تعداد کالاها</th>
            <th class="details">جزئیات</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="transactionDrafts.length">
            <tr v-for="(item, index) in transactionDrafts" :key="item._id" :title="item.description">
              <td class="index">
                <span>{{ index + 1 }}</span>
              </td>

              <td class="description">
                <span v-if="item.description" class="singleLineTxt">{{ item.description }}</span>
                <span v-else style="color: gray">بدون توضیحات</span>
              </td>

              <td class="brand">
                <!-- <img src="/assets/img/verity-small.png" alt="verity" v-if="item.db_name === 'verity'" />
								<img src="/assets/img/panatech-small.png" alt="panatech" v-if="item.db_name === 'panatech'" /> -->
                <i
                  v-if="item.db_name === 'verity'"
                  class="fas fa-phone-laptop"
                  title="لوازم جانبی کامپیوتر و موبایل"
                ></i>
                <i v-if="item.db_name === 'panatech'" class="fas fa-photo-video" title="لوازم صوتی و تصویری خودرو"></i>
              </td>

              <td class="quantity">
                <span>{{ totalItemsCount(item) }}</span>
              </td>

              <td class="details">
                <button class="trashIcon-btn" title="حذف پیشنویس" @click="removeDraft(item._id)">
                  <i class="fal fa-trash-alt"></i>
                </button>

                <nuxt-link
                  :to="{
                    name: 'account-drafts-draftID',
                    params: {
                      draftID: item._id
                    }
                  }"
                  class="btn btn-primary"
                >
                  تکمیل فرم
                </nuxt-link>
              </td>
            </tr>
          </template>
          <tr v-else>
            <td class="noItem">
              <span>هیچ اطلاعاتی وجود ندارد</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <table-notice />
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountDraftList',
  layout: 'user',
  async asyncData({ $axios, $auth, error }) {
    try {
      const transactionDrafts = await $axios.get('/api/user/transactionDrafts')
      return {
        transactionDrafts: transactionDrafts.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      transactionDrafts: null
    }
  },
  methods: {
    totalItemsCount(draft) {
      const items = draft.items
      let count = 0
      items.forEach(item => (count += item.MjQty))
      return count
    },
    removeDraft(id) {
      this.$confirm('این فرم از پیشنویس ها حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/user/transactionDraft/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data.message
              })
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: 'مشکلی در حذف پیشنویس پیش آمده'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>
