<template>
  <user-dashboard-container page-class="guarantee-details agent-guarantee-details" panel-title="جزئیات">
    <div class="agentActions">
      <div class="row">
        <div class="col-12 col-lg-6">
          <div class="statuses">
            <h3>تغییر وضعیت فرم:</h3>
            <div class="btns">
              <!--------------- recieved status btn --------------->
              <button
                class="btn btn-primary"
                :disabled="transaction.status !== 'saved'"
                @click="changeStatus('recieved')"
              >
                {{ getStatusName('recieved') }}
              </button>

              <!--------------- ongoing status btn --------------->
              <button
                class="btn btn-primary"
                :disabled="transaction.status !== 'recieved'"
                @click="changeStatus('ongoing')"
              >
                {{ getStatusName('ongoing') }}
              </button>

              <!--------------- waiting status btn --------------->
              <button
                class="btn btn-primary"
                :disabled="
                  transaction.status === 'saved' ||
                  transaction.status === 'recieved' ||
                  transaction.status === 'delivered' ||
                  transaction.status === 'waiting'
                "
                @click="changeStatus('waiting')"
              >
                {{ getStatusName('waiting') }}
              </button>

              <!--------------- delivered status btn --------------->
              <el-popover v-model="deliverPopover" placement="bottom" width="160" @click="deliveryPopover = true">
                <el-input v-model="deliveryCode" placeholder="کد ارسال مرسوله"></el-input>
                <div class="mt-1" style="text-align: center">
                  <el-button
                    size="mini"
                    type="text"
                    class="agentsStatus-popover-insideBtn"
                    @click="changeStatus('delivered')"
                    >ارسال</el-button
                  >
                </div>
                <button
                  slot="reference"
                  class="btn btn-primary"
                  :disabled="
                    transaction.status === 'saved' ||
                    transaction.status === 'recieved' ||
                    transaction.status === 'delivered'
                  "
                >
                  {{ getStatusName('delivered') }}
                </button>
              </el-popover>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 mt-4 mt-lg-0">
          <div class="timeLine">
            <h3>تاریخچه وضعیت های فرم:</h3>
            <ul>
              <li v-for="item in statusHistory" :key="item._id" :class="item.status">
                <span> {{ getStatusName(item.status) }} </span>
                <span> {{ $jDateTime(item.date) }} </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <form action="" class="form form_3">
      <div class="userInfo">
        <div class="formRow">
          <label>کد مشتری:</label>
          <input type="text" disabled :value="transaction.BusinessID" />
        </div>
        <div class="formRow">
          <label>نام و نام خانوادگی:</label>
          <input type="text" disabled :value="transaction.TransCCustom1" />
        </div>
        <div class="formRow">
          <label>شماره تماس:</label>
          <input type="text" disabled :value="transaction.cTel1" />
        </div>

        <div class="formRow">
          <label>شماره پذیرش موقت:</label>
          <input type="text" disabled :value="transaction.TempReceiptTransNumber" />
        </div>
        <div class="formRow">
          <label>شماره پذیرش دائم:</label>
          <input type="text" disabled :value="transaction.ItemReceptionTransNumber || '-'" />
        </div>
        <div class="formRow">
          <label>تاریخ ارسال فرم:</label>
          <input type="text" disabled :value="$jDate(transaction.TempReceiptTransDate)" />
        </div>
      </div>

      <div class="formRow">
        <label>آدرس:</label>
        <textarea name="" rows="3" disabled :value="transaction.cAddress1"></textarea>
      </div>
      <div class="formRow">
        <label>توضیحات فرم:</label>
        <textarea name="" rows="3" disabled :value="transaction.Description"></textarea>
      </div>
    </form>

    <hr />

    <div class="formDB">
      <template v-if="transaction.db_name === 'verity'">
        <i class="fas fa-phone-laptop"></i>
        <span>لوازم جانبی کامپیوتر و موبایل</span>
      </template>
      <template v-if="transaction.db_name === 'panatech'">
        <i class="fas fa-photo-video"></i>
        <span>لوازم صوتی و تصویری خودرو</span>
      </template>
    </div>

    <div class="tableBox">
      <table class="formItems">
        <thead>
          <tr>
            <th class="index">ردیف</th>
            <th class="itemName">نام کالا</th>
            <th class="quantity">تعداد</th>
            <th class="itemSerial">سریال گارانتی</th>
            <th class="date">تاریخ اتمام گارانتی</th>
            <th v-if="selectorAvailable" class="selector">
              <el-checkbox :value="allItemsAreinDraftsItems" @change="addAllItemsToAgentsDraftItems" />
            </th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="(item, index) in transaction.items" :key="index + '_guaranteeItemsList'" :title="item.ItemName">
            <td class="index">
              <span>{{ index + 1 }}</span>
            </td>
            <td class="itemName">
              <span class="singleLineTxt">{{ getItemName(item.ItemID) || 'درحال بارگیری ...' }}</span>
            </td>
            <td class="quantity">
              <span>{{ item.MjQty }}</span>
            </td>
            <td class="itemSerial">
              <span>{{ item.SerialNo1 || '-' }}</span>
            </td>
            <td class="date">
              <span>{{ item.GEndDate || '-' }}</span>
            </td>
            <td v-if="selectorAvailable" class="selector">
              <el-checkbox
                :value="isInAgentDraftsItem(item.ItemID, item.SerialNo1)"
                @change="addSelectedItemsToAgentDraftItems(item.ItemID, item.SerialNo1)"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <table-notice />

    <div class="addToDraftsBtn">
      <button v-if="agentDraftItems.length" class="btn btn-primary" @click="showDraftsModal = true">
        <span>افزودن موارد انتخاب شده به پیشنویس ها</span>
        <i class="fas fa-link"></i>
      </button>
    </div>

    <template #body>
      <AddUserItemsToAgentDraft
        :key="addItemsToDraftModalKey"
        :show="showDraftsModal"
        :db_name="transaction.db_name"
        :items="agentDraftItems"
        @closeModal="closeAddItemToDraftModal"
      />
    </template>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountAgentInboxItemView',
  layout: 'user',
  async asyncData({ $axios, $auth, query, error }) {
    try {
      const tid = query?.tid
      // fetch data from asan-service
      const transaction = await $axios.get(`/api/agent/inbox/${tid}`)
      return {
        transaction: transaction.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      transaction: null,
      factor: null,
      paymentFactor: null,
      deliverPopover: false,
      deliveryCode: '',
      showDraftsModal: false,
      addItemsToDraftModalKey: 0,
      agentDraftItems: []
    }
  },
  computed: {
    selectorAvailable() {
      return this.transaction.status === 'ongoing' || this.transaction.status === 'waiting'
    },
    products() {
      if (this.$route.query.db_name === 'verity') return this.$store.state.front.verityProducts
      else if (this.$route.query.db_name === 'panatech') return this.$store.state.front.panatechProducts
      else return []
    },
    host() {
      return this.$route.query?.host
    },
    statusHistory() {
      const statusHistory = this.transaction.statusHistory
      return statusHistory.reverse()
    },
    allItemsAreinDraftsItems() {
      return this.agentDraftItems.length === this.transaction.items.length
    }
  },
  methods: {
    closeAddItemToDraftModal() {
      this.showDraftsModal = false
      this.agentDraftItems = []
      this.addItemsToDraftModalKey = Math.random()
    },
    addAllItemsToAgentsDraftItems(val) {
      if (val) this.agentDraftItems = this.transaction.items
      else this.agentDraftItems = []
    },
    addSelectedItemsToAgentDraftItems(id, serial) {
      if (this.isInAgentDraftsItem(id, serial)) {
        this.agentDraftItems = this.agentDraftItems.filter(item => {
          if (serial) return item.SerialNo1 !== serial
          else return item.ItemID !== id
        })
      } else {
        const thisItem = this.transaction.items.find(item => {
          if (serial) return item.SerialNo1 === serial
          else return item.ItemID === id
        })
        this.agentDraftItems.push(thisItem)
      }
    },
    isInAgentDraftsItem(id, serial) {
      return Boolean(
        this.agentDraftItems.find(item => {
          if (serial) return item.SerialNo1 === serial
          else return item.ItemID === id
        })
      )
    },
    getItemName(ItemID) {
      return this.products.find(item => item.ItemID === ItemID)?.ItemName
    },
    getStatusName(status) {
      if (status === 'saved') return 'ثبت شده'
      else if (status === 'recieved') return 'پذیرش'
      else if (status === 'ongoing') return 'در دست اقدام'
      else if (status === 'waiting') return 'در انتظار قطعه'
      else if (status === 'delivered') return 'تحویل شد'
      else return 'invalid status'
    },
    changeStatus(status) {
      const deliveryCode = this.deliveryCode
      const alertTitle = 'هشدار'
      function alertMsg() {
        if (status === 'recieved')
          return 'نماینده گرامی تنها در صورتی که تمام کالاها به دست شما رسیده فرم را پذیرش کنید. در غیر اینصورت هرگونه مسئولیتی در قبال مفقودی کالاها بر عهده شما میباشد.'
        else if (status === 'ongoing') return 'وضعیت فرم را به در دست اقدام تغییر میدهید'
        else if (status === 'waiting') return 'وضعیت فرم را به در انتظار قطعه تغییر میدهید'
        else if (status === 'delivered' && deliveryCode.length)
          return (
            `تغییر وضعیت فرم به ارسال شده با کد ارسال مرسوله "${deliveryCode}".` +
            ' در آینده قادر به تغییر این وضعیت یا تغییر کد مرسوله نخواهید بود، ادمه میدهید؟ '
          )
        else if (status === 'delivered')
          return (
            'تغییر وضعیت فرم به ارسال شدوه بدون کد ارسال مرسوله.' +
            ' در آینده قادر به تغییر این وضعیت یا افزودن کد مرسوله نخواهید بود، ادامه میدهید؟ '
          )
      }

      this.$confirm(alertMsg(), alertTitle, {
        confirmButtonText: 'ادامه',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .put(`/api/agent/changeTStatus/${this.transaction._id}`, { status, deliveryCode })
            .then(res => {
              this.$message({
                type: 'success',
                message: 'وضعیت فرم با موفقیت تغییر کرد و پیامک اطلاع رسانی برای کاربر ارسال شد'
              })
              this.deliveryCode = ''
              this.$nuxt.refresh()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>
