<template>
  <div class="columns is-multiline mx-0">
    <div class="column is-3">
      <div class="field">
        <label class="label">Từ ngày<b class="ml-1 has-text-danger">*</b></label>
        <div class="control">
          <Datepicker
            v-bind="{ record, attr: 'fdate', maxdate: new Date() }"
            @date="selected('fdate', $event)"
          ></Datepicker>
        </div>
        <p class="help is-danger" v-if="errors.issued_date">{{ errors.issued_date }}</p>
      </div>
    </div>
    <div class="column is-3">
      <div class="field">
        <label class="label">Đến ngày<b class="ml-1 has-text-danger">*</b></label>
        <div class="control">
          <Datepicker
            v-bind="{ record, attr: 'tdate', maxdate: new Date() }"
            @date="selected('tdate', $event)"
          ></Datepicker>
        </div>
        <p class="help is-danger" v-if="errors.issued_date">{{ errors.issued_date }}</p>
      </div>
    </div>
  </div>
  <DataView v-bind="vbind" v-if="vbind" />
</template>
<script>
export default {
  data() {
    return {
      fdate: this.$dayjs().format("YYYY-MM-DD"),
      tdate: this.$dayjs().format("YYYY-MM-DD"),
      record: {},
      errors: {},
      vbind: null,
    };
  },
  created() {
    this.record = { fdate: this.fdate, tdate: this.tdate };
    this.loadData();
  },
  methods: {
    selected(attr, value) {
      console.log("===date===", attr, value, this.fdate, this.tdate);
      if (attr === "fdate") this.fdate = value;
      else this.tdate = value;
      this.loadData();
    },
    loadData() {
      this.vbind = undefined;
      setTimeout(
        () =>
          (this.vbind = {
            setting: "debt-product-1",
            api: "internalentry",
            params: {
              values:
                "product,product__prdbk__transaction__amount_received,product__trade_code,product__prdbk__transaction__sale_price,product__zone_type__name,customer,customer__code,customer__fullname",
              distinct_values: {
                sumCR: { type: "Sum", filter: { type__code: "CR" }, field: "amount" },
                sumDR: { type: "Sum", filter: { type__code: "DR" }, field: "amount" },
              },
              summary: "annotate",
              filter: { date__gte: this.fdate, date__lte: this.tdate },
            },
          })
      );
    },
  },
};
</script>
