lelong-web-pembida/src/components/pay/SelectOutlet.vue

<template>
  <TabView>
    <TabPanel
      v-for="data in namaCawangan"
      v-bind:key="data"
      :header="data.cawangan"
    >
      <div>
        <div class="overflow-x-auto">
          <table class="table text-center table-bordered table-hover">
            <tbody>
              <tr class="table-light">
                <td>Bil</td>
                <td style="min-width: 240px">No Rujukan</td>
                <!-- <td style="min-width: 210px">Marhun</td> -->
                <td style="min-width: 120px">Harga Bida</td>
              </tr>
              <tr v-for="(item, index) in data.sag" v-bind:key="item">
                <td>{{ index + 1 }}</td>
                <td>{{ item.norujukan }}</td>
                <!-- <td>{{ item.marhun }}</td> -->
                <td>
                  RM{{
                    item.total_payment
                      ?.toString()
                      .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                  }}
                </td>
              </tr>
              <tr class="uppercase">
                <th colspan="2">Jumlah</th>
                <th>
                  RM{{
                    data.total_hargabida
                      ?.toString()
                      .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                  }}
                </th>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="grid mt-5">
          <!-- <button class="btn btn-danger" v-on:click="clickCancelButton()">
            Cancel
          </button> -->
          <div class="col-12 md:col-5">
            <Button
              label="Batal Pembayaran"
              class="p-button-text p-button-sm"
              v-on:click="clickCancelButton()"
            />
          </div>
          <div class="sm:none md:col"></div>
          <div class="col-12 md:col-5 md:text-right">
            <Button
              label="Bayar Bidaan Cawangan Ini"
              class="p-button-sm"
              @click="openModal(data)"
            />
          </div>
          <!-- <button
            ref="nextButton"
            v-on:click="clickNextButton()"
            class="btn btn-primary"
          >
            Teruskan
          </button> -->
        </div>
      </div>
    </TabPanel>
  </TabView>
  <Dialog
    header="Teruskan Bayaran"
    v-model:visible="isDisplay"
    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
    :style="{ width: '50vw' }"
    :modal="true"
  >
    <p>Adakah anda pasti untuk membuat bayaran bagi cawangan ini?</p>
    <div class="overflow-x-auto">
      <table class="table text-center table-bordered">
        <tbody>
          <tr class="table-light">
            <td style="min-width: 240px">Cawangan</td>
            <td style="min-width: 120px">Harga Bida</td>
          </tr>
          <tr>
            <th>{{ cawanganPilihan }}</th>
            <th>
              RM{{
                hargaBidaanPilihan
                  ?.toString()
                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
              }}
            </th>
          </tr>
        </tbody>
      </table>
    </div>
    <template #footer>
      <Button
        label="Tidak"
        icon="pi pi-times"
        iconPos="right"
        @click="closeModal()"
        class="p-button-text"
      />
      <Button
        label="Ya"
        icon="pi pi-check"
        iconPos="right"
        :loading="isLoading"
        @click="doPayment()"
      />
    </template>
  </Dialog>
  <!-- <div class="container">
    <div class="row justify-content-center">
      <div class="col-7">
        <div v-if="!nextButton">
          <h5>Pilih Cawangan</h5>
          <table class="table table-bordered">
            <tbody>
              <tr v-for="data in namaCawangan" v-bind:key="data">
                <td>
                  <input
                    type="radio"
                    v-bind:value="data"
                    v-model="selectRadio"
                  />
                </td>
                <td>{{ data.cawangan }}</td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex justify-content-between">
            <button class="btn btn-danger" v-on:click="clickCancelButton()">
              Cancel
            </button>
            <button
              ref="nextButton"
              v-on:click="clickNextButton()"
              class="btn btn-primary"
            >
              Teruskan
            </button>
          </div>
        </div>
        <div v-else>
          <select-id
            v-bind:selectedRadio="selectRadio"
            v-on:back-is-click="backIsClick"
          ></select-id>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script>
import { integer } from "@vuelidate/validators";
import SelectId from "./SelectId.vue";
import axios from "axios";

export default {
  components: {
    "select-id": SelectId,
  },
  props: {
    namaCawangan: "",
    lelongIdProps: "",
    // invoiceIdProps: "",
    // invoiceNoProps: "",
  },
  data() {
    return {
      nextButton: false,
      selectCawangan: this.namaCawangan,
      selectRadio: "",
      isDisplay: false,
      isLoading: false,
      cawanganPilihan: "",
      hargaBidaanPilihan: "",
      form: {
        email: localStorage.getItem("email"),
        notel: localStorage.getItem("notelbimbit"),
        name: localStorage.getItem("name"),
        user_id: localStorage.getItem("id"),
        lelong_id: "",
        invoice_id: "",
        invoice_no: "",
        total: integer,
        // sag: [
        //   {
        //     norujukan: "APM211121-0015",
        //     kodcaw: "APM",
        //     total_payment: 1329,
        //   },
        //   {
        //     norujukan: "APM211120-0018",
        //     kodcaw: "APM",
        //     total_payment: 1443,
        //   },
        // ],
        sag: "",
      },
    };
  },
  mounted() {
    this.getInvoice();
  },
  methods: {
    getInvoice() {
      axios
        .get("/invoice", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
          params: {
            user_id: localStorage.getItem("id"),
            lelong_id: this.lelongIdProps,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.success == true) {
            this.form.invoice_id = response.data.invoice.id;
            this.form.invoice_no = response.data.invoice.invoice_no;
            this.form.lelong_id = this.lelongIdProps;
          } else if (response.data.success == false) {
            alert("No Invoice Id");
          }
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    openModal(value) {
      this.isDisplay = true;
      this.cawanganPilihan = value.cawangan;
      this.hargaBidaanPilihan = value.total_hargabida;
      this.form.total = parseFloat(value.total_hargabida.replace(/,/g, ""));
      let convertData = JSON.parse(JSON.stringify(value.sag));
      this.form.sag = convertData;
      console.log(this.form);
    },
    closeModal() {
      this.isDisplay = false;
      this.form.total = "";
      this.form.sag = "";
    },
    clickRadio(value) {
      console.log(value);
      this.selectRadio = value;
    },
    clickCancelButton() {
      this.$router.push({
        name: "detail",
        params: {
          lelongId: this.lelongIdProps,
          statusPayment: null,
        },
      });
    },
    clickNextButton() {
      this.nextButton = true;
    },
    backIsClick(value) {
      this.nextButton = value;
    },
    doPayment() {
      console.log(this.form);
      this.isLoading = true;
      axios
        .post("/bidpayment", this.form)
        .then((response) => {
          if (response.data.success == true) {
            console.log(response);
            window.location.href = response.data.message + "?auto_submit=true";
          } else {
            console.log(response);
            this.isLoading = false;
          }
        })
        .catch((response) => {
          this.isLoading = false;
          alert(response.message);
          console.log(response);
        });
    },
  },
};
</script>