<template>
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <span>ຄ່າຂົນສົ່ງ/ໄລຍະເວລາ</span> 
      <span>
        <a
          aria-current="page"
          href="javascript:void(0)"
          v-if="!FormAdd"
          @click="Add"
          class="btn btn-sm btn-info btn-round btn-icon mb-2"
        >
          <span class="btn-inner--icon"
            ><i class="fas fa-plus-circle"></i> ເພີ່ມລາຍການ
          </span></a
        >
        <a
          aria-current="page"
          href="javascript:void(0)"
          :class="check"
          v-if="FormAdd"
          @click="Save"
          class="btn btn-sm btn-success btn-round btn-icon mb-2"
        >
          <span class="btn-inner--icon"
            ><i class="fas fa-save"></i> ບັນທຶກ
          </span></a
        >
        <a
          aria-current="page"
          href="javascript:void(0)"
          v-if="FormAdd"
          @click="Cancel"
          class="btn btn-sm btn-warning btn-round btn-icon mb-2"
        >
          <span class="btn-inner--icon"
            ><i class="fas fa-times"></i> ຍົກເລີກ
          </span></a
        >
      </span>
    </div>
    <div class="card-body mb--4">  
      <div class="form-add" v-if="FormAdd">
        <div
          class="
            d-flex
            justify-content-between
            border
            rounded
            p-3
            border-warning
            mb-4
          "
        >
          <div class="custom-control custom-radio">
            <input
              name="cash_pay"
              class="custom-control-input"
              id="RadioCashA"
              value="true"
              type="radio"
              v-model="Tran.CashType"
            />
            <label class="custom-control-label" for="RadioCashA"
              ><i class="fas fa-money-bill-alt"></i> ເງິນສົດ</label
            >
          </div>
          <div class="custom-control custom-radio">
            <input
              name="cash_pay"
              class="custom-control-input"
              id="RadioCashB"
              value="false"
              type="radio"
              v-model="Tran.CashType"
            />
            <label class="custom-control-label" for="RadioCashB"
              ><i class="fas fa-money-check-alt"></i> ທະນາຄານ</label
            >
          </div>
        </div>

        <div class="form-group">
          <div class="input-group input-group-merge">
            <div class="input-group-prepend">
              <span class="input-group-text"
                ><i class="fas fa-info-circle"></i
              ></span>
            </div>

            <input
              type="text"
              class="form-control"
              name="name"
              placeholder="ລາຍລະອຽດ"
              v-model="Tran.detail"
              ref="detail"
            />
          </div>
        </div>

        <div class="input-group input-group-merge mb-2">
          <cleave
            v-model="Tran.price"
            :options="option"
            class="form-control"
            placeholder="ລາຄາຂົນສົ່ງ"
            @keyup.enter="Save"
          />
          <div class="input-group-append">
            <span class="input-group-text"><i class="fas fa-donate"></i></span>
          </div>
        </div>
      </div>
      <div class="table-responsive border" v-if="!FormAdd">
        <table class="table align-items-center table-flush">
          <thead class="thead-light">
            <tr>
              <th class="text-left">ລາຍນລະອຽດຂົນສົ່ງ</th>
              <th class="text-right">ລາຄາຂົນສົ່ງ</th>
              <th width="80" class="text-center">ຈັດການ</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="list in tranData.ListTran" :key="list.id">
              <td>{{ list.detail }}</td>
              <td class="text-right">{{ formatPrice(list.price) }} ກີບ</td>
              <td class="table-action">
                <div class="col-auto">
                  <button
                    type="button"
                    class="btn btn-sm btn-neutral mr-0"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    <i class="fas fa-ellipsis-h"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right" style="">
                    <a
                      class="dropdown-item"
                      href="javascript:void(0)"
                      @click="Edit(list.id)"
                    >
                      <i class="fas fa-user-edit text-info"></i>ແກ້ໄຂຂໍ້ມູນ -
                      ເບີ່ງ</a
                    >
                    <a
                      class="dropdown-item"
                      href="javascript:void(0)"
                      @click="Del(list.id)"
                      ><i class="fas fa-trash text-red"></i>ລຶບຂໍ້ມູນ</a
                    >
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <hr />
    <div class="card-body mt--6">
      <div class="mt-4">
        <label for="tranday">ວັນເວລາຂົນສົ່ງ</label>
        <div class="form-group">
          <div class="input-group">
            <flat-pickr
              v-model="TranDay"
              id="tranday"
              name="tranday"
              :config="config"
              class="form-control"
              placeholder="ເລືອກວັນທີ່"
            />
            <div class="input-group-append">
              <span class="input-group-text"
                ><i class="ni ni-calendar-grid-58"></i
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyAppVueTranpricecomponent",

  props: {
    tranData: {
      type: Object,
      required: true,
    },
    dateBack:{
      type: String
    }
  },
  data() {
    return {
      FormType: true,
      FormAdd: false,
      FormID: "",
      Tran: {
        price: "",
        detail: "",
        CashType: true,
      },
      option: {
        // prefix: '$ ',
        numeral: true,
        numeralPositiveOnly: true,
        noImmediatePrefix: true,
        rawValueTrimPrefix: true,
        numeralIntegerScale: 10,
        numeralDecimalScale: 2,
        numeralDecimalMark: ".",
        delimiter: ",",
      },
      polling: null,
      config: {
        mode: "range",
        wrap: true, // set wrap to true only when using 'input-group'
        altFormat: "d/m/Y",
        altInput: true,
        dateFormat: "Y-m-d",
        allowInput: true,
      },
      TranDay: '',
    };
  },

  mounted() {},
  watch: {
    TranDay() {
      this.$emit("TranDay", this.TranDay);
      //this.TranDay = this.dateBack;
    },
    dateBack(){
      this.TranDay = this.dateBack;
    }
  },
  computed: {
    check() {
      if (this.Tran.price == "") {
        return "disabled";
      } else {
        return "";
      }
    },
  },
  methods: {
    formatPrice(value) {
      let val = (value / 1).toFixed(0).replace(".", ",");
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    Add() {
      this.FormAdd = true;
      this.polling = setInterval(() => {
        this.$refs.detail.focus();
        clearInterval(this.polling);
      }, 500);

    },
    Cancel() {
      this.FormAdd = false;
      this.FormType = true;
      this.Tran.price = "";
      this.Tran.detail = "";
      this.Tran.CashType = true;
      this.FormID = "";
    },
    Save() {
      if (this.FormType) {
        this.tranData.ListTran.push({
          id: Math.floor(Math.random() * 10000),
          price: this.Tran.price,
          detail: this.Tran.detail,
          CashType: this.Tran.CashType,
        });
      } else {
        this.tranData.ListTran.find((i) => i.id == this.FormID).price =
          this.Tran.price;
        this.tranData.ListTran.find((i) => i.id == this.FormID).detail =
          this.Tran.detail;
          this.tranData.ListTran.find((i) => i.id == this.FormID).CashType =
          this.Tran.CashType;
      }

      this.FormAdd = false;
      this.FormType = true;
      this.Tran.price = "";
      this.Tran.detail = "";
      this.Tran.CashType = true;
      this.FormID = "";
    },
    Edit(id) {
      let item = this.tranData.ListTran.find((i) => i.id == id);
      this.FormAdd = true;
      this.FormType = false;
      this.FormID = id;
      this.Tran.price = item.price;
      this.Tran.detail = item.detail;
      this.Tran.CashType = item.CashType;
    },
    Del(id) {
      this.tranData.ListTran.splice(
        this.tranData.ListTran.map((i) => i.id).indexOf(id),
        1
      );
    },
  },
  // created(){
  //   this.TranDay = this.dateBack
  // }
};
</script>

<style lang="scss" scoped>
</style>