<template>
  <user-dashboard-container page-class="factor" panel-title="فاکتور">
    <div id="factor-layout">
      <div class="pageHeader">
        <div class="row1">
          <h2>
            <span>سیستم جاری</span>
            <br />
            <span>فاکتور گارانتی</span>
          </h2>
        </div>
        <div class="row2">
          <p>
            <span>شماره حواله: </span>
            <span>{{ factorInfo.TransNumber }}</span>
          </p>
          <p>
            <span>تاریخ حواله: </span>
            <span>{{ $jDate(factorInfo.TransDate) }}</span>
          </p>
        </div>
      </div>

      <div class="factor">
        <div class="factorInfo">
          <div class="row1">
            <p>
              <span>کد شخص: </span>
              <span>{{ userBusinessCode }}</span>
            </p>
            <p>
              <span>طرف حساب: </span>
              <span>{{ user.first_name + ' ' + user.last_name }}</span>
            </p>
            <p>
              <span>شماره پذیرش: </span>
              <span>{{ $route.query.atn }}</span>
            </p>
          </div>
          <div class="row2">
            <p>
              <span>آدرس: </span>
              <span>{{ factorInfo.cAddress1 }}</span>
            </p>
          </div>
          <div class="row3">
            <p>
              <span>شماره تماس: </span>
              <span>{{ factorInfo.cTel1 }}</span>
            </p>
          </div>
          <div class="row4">
            <p>
              <span>شرح حواله: </span>
              <span>{{ factorInfo.Description || '---' }}</span>
            </p>
          </div>
        </div>
        <div class="table">
          <table>
            <thead>
              <tr>
                <th>ردیف</th>
                <th>نام کالا</th>
                <th>تعداد کل</th>
                <th>مرجوع از فروش</th>
                <th>مرجوعی/آسیب فیزیکی</th>
                <th>مرجوعی/سالم</th>
                <th>تعویض</th>
                <th>تعمير با هزينه شخصی</th>
                <th>تعمير با هزينه شرکت</th>
                <th>مانده</th>
                <th>توضیحات</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in factor" :key="index + '_tableItems_q_ar'">
                <td>{{ index + 1 }}</td>
                <td>{{ item.ItemName }}</td>
                <td>{{ item.ItemReceptionNQty }}</td>
                <td>{{ item.SaleReturn || '-' }}</td>
                <td>{{ item.Return_Damaged || '-' }}</td>
                <td>{{ item.Return_Healthy || '-' }}</td>
                <td>{{ item.Replacement || '-' }}</td>
                <td>{{ item.Repair_Self || '-' }}</td>
                <td>{{ item.Repair_Company || '-' }}</td>
                <td>{{ residual(item) }}</td>
                <td>{{ item.ItemReplacementNames || '-' }}</td>
              </tr>

              <!-- table footer -->
              <tr>
                <td colspan="2">جمع</td>
                <td>{{ sum('ItemReceptionNQty') }}</td>
                <td>{{ sum('SaleReturn') }}</td>
                <td>{{ sum('Return_Damaged') }}</td>
                <td>{{ sum('Return_Healthy') }}</td>
                <td>{{ sum('Replacement') }}</td>
                <td>{{ sum('Repair_Self') }}</td>
                <td>{{ sum('Repair_Company') }}</td>
                <td>{{ residualSum() }}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <table-notice />
    <button class="btn btn-primary mt-3" @click="print('factor-layout')">چاپ فاکتور</button>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountGuaranteeFactor',
  layout: 'user',
  async asyncData({ $axios, $auth, query, error }) {
    try {
      const acceptedTN = query.atn
      const host = query.host
      const db_name = query.db_name
      const user = $auth.user

      function businessCode() {
        if (db_name === 'verity') return user.verity_businessCode
        else if (db_name === 'panatech') return user.panatech_businessCode
        else return null
      }

      if (host === 'ar') {
        const factorData = {
          url: `/api/GetItemReceptionDetails?BusinessCode=${businessCode()}&ItemReceptionTransNumber=${acceptedTN}`,
          db: db_name
        }
        const factor = await $axios.post('/api/cross/getRouteManager', factorData)
        if (factor.data.error || !factor.data.data.length) throw new Error('invalid params')
        return {
          factor: factor.data.data
        }
      } else if (host === 'as') {
        /// fuctions go here
      } else throw new Error('invalid params')
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      transactionItems: null,
      factor: null
    }
  },
  computed: {
    user() {
      return this.$auth.user
    },
    userBusinessCode() {
      const db_name = this.$route.query.db_name
      if (db_name === 'verity') return this.user.verity_businessCode
      else if (db_name === 'panatech') return this.user.panatech_businessCode
      else return '-'
    },
    factorInfo() {
      return this.factor[0]
    }
  },
  methods: {
    print(id) {
      $(`#${id}`).print()
    },
    residual(item) {
      return (
        Number(item.ItemReceptionNQty) -
        Number(item.SaleReturn) -
        Number(item.Return_Damaged) -
        Number(item.Return_Healthy) -
        Number(item.Replacement) -
        Number(item.Repair_Self) -
        Number(item.Repair_Company)
      )
    },
    sum(param) {
      let sum = 0
      let index = -1
      for (const item of this.factor) {
        index++
        sum += Number(item[param])
        if (index === this.factor.length - 1) return sum
      }
    },
    residualSum() {
      let sum = 0
      let index = -1
      for (const item of this.factor) {
        index++
        sum += Number(this.residual(item))
        if (index === this.factor.length - 1) return sum
      }
    }
  }
}
</script>
