<template>
  <div
    :id="docid"
    v-if="record"
  >
    <div>
      <Caption v-bind="{ title: this.data && findFieldName('info')[this.lang] }"></Caption>
      <div class="columns is-multiline mx-0">
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Mã khách hàng</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="$copyToClipboard(record.code)"
                >{{ record.code }}</span
              >
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Tên khách hàng</label>
            <div class="control">
              {{ record.fullname }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Điện thoại</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="openPhone()"
                >{{ record.phone }}</span
              >
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Email</label>
            <div
              class="control"
              style="word-break: break-all"
            >
              {{ record.email || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Giấy tờ</label>
            <div class="control">
              {{ record.legal_type__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Mã số giấy tờ</label>
            <div class="control">
              {{ record.legal_code || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Ngày cấp</label>
            <div class="control">
              {{ record.issued_date ? $dayjs(record.issued_date).format("L") : "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Nơi cấp</label>
            <div class="control">
              {{ record.issued_place__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Loại khách hàng</label>
            <div class="control">
              {{ record.type__name || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Quốc gia</label>
            <div class="control">
              {{ isVietnamese ? record.country__name : record.country__en || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Địa chỉ liên hệ</label>
            <div class="control">
              {{ record.contact_address || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Địa chỉ thường trú</label>
            <div class="control">
              {{ record.address || "/" }}
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Người tạo</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="openUser(record.creator)"
                >{{ record.creator__fullname || "/" }}</span
              >
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Thời gian tạo</label>
            <div class="control">
              <span>{{ $dayjs(record.create_time).format("L") }} {{ $dayjs(record.create_time).format("HH:mm") }}</span>
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Người cập nhật</label>
            <div class="control">
              <span
                class="hyperlink"
                @click="openUser(record.updater)"
                >{{ record.updater__fullname || "/" }}</span
              >
            </div>
          </div>
        </div>
        <div class="column is-3 pb-1 px-0">
          <div class="field">
            <label class="label">Thời gian cập nhật</label>
            <div class="control">
              <span>
                {{ record.update_time ? $dayjs(record.update_time).format("L HH:mm") : "/" }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-3">
      <Caption v-bind="{ title: isVietnamese ? 'Hình ảnh' : 'Images' }"></Caption>
      <ImageGallery v-bind="{ row: record, api: 'customerfile', hideopt: true }"></ImageGallery>
    </div>
    <div class="mt-3">
      <Caption
        v-bind="{
          title: this.isIndividual ? 'Người liên quan' : 'Người đại diện pháp luật',
        }"
      ></Caption>
      <div class="mt-2">
        <div
          v-if="this.relatedPeople && this.relatedPeople.length > 0"
          v-for="relatedPerson in this.relatedPeople"
          class="columns is-0 mb-2"
        >
          <span class="column is-2">{{ relatedPerson.people__code }}</span>
          <span class="column is-4">
            <span
              class="has-text-primary hyperlink"
              @click="openRelatedPerson(relatedPerson.people)"
              >{{ relatedPerson.people__fullname }}</span
            >
            <span> ({{ relatedPerson.relation__name }})</span>
          </span>
          <span class="column is-4">{{ relatedPerson.people__phone }}</span>
        </div>
        <div
          v-else
          class="has-text-grey"
        >
          Chưa có
          {{ this.isIndividual ? "người liên quan" : "người đại diện pháp luật" }}
        </div>
      </div>
    </div>
    <div
      v-if="record.count_product > 0"
      class="mt-3"
    >
      <Caption
        class="mb-2"
        v-bind="{ title: this.data && findFieldName('transaction')[this.lang] }"
      ></Caption>
      <DataView
        v-bind="{
          setting: 'customer-all-transaction',
          pagename: this.$id(),
          api: 'customer',
          params: {
            filter: { id: this.row.customer || this.row.id },
            /* copied from 02-connection.js */
            values:
              'id,update_time,creator,creator__fullname,country,country__name,country__en,issued_date,issued_place,issued_place__name,code,email,fullname,legal_code,phone,legal_type,legal_type__name,address,contact_address,note,type,type__name,updater,updater__fullname,create_time,update_time',
            distinct_values: {
              label: {
                type: 'Concat',
                field: ['code', 'fullname', 'phone', 'legal_code'],
              },
              order: { type: 'RowNumber' },
              image_count: {
                type: 'Count',
                field: 'id',
                subquery: { model: 'Customer_File', column: 'ref' },
              },
              count_note: {
                type: 'Count',
                field: 'id',
                subquery: { model: 'Customer_Note', column: 'ref' },
              },
              count_product: {
                type: 'Count',
                field: 'id',
                subquery: {
                  model: 'Product_Booked',
                  column: 'transaction__customer',
                },
              },
              sum_product: {
                type: 'Sum',
                field: 'transaction__sale_price',
                subquery: {
                  model: 'Product_Booked',
                  column: 'transaction__customer',
                },
              },
              sum_receiver: {
                type: 'Sum',
                field: 'transaction__amount_received',
                subquery: {
                  model: 'Product_Booked',
                  column: 'transaction__customer',
                },
              },
              sum_remain: {
                type: 'Sum',
                field: 'transaction__amount_remain',
                subquery: {
                  model: 'Product_Booked',
                  column: 'transaction__customer',
                },
              },
            },
            summary: 'annotate',
          },
        }"
      />
    </div>
    <div
      class="mt-4 border-bottom"
      id="ignore"
    ></div>
    <div
      class="buttons mt-2 is-flex is-gap-1"
      id="ignore"
    >
      <button
        v-if="$getEditRights('edit', { code: 'customer', category: 'topmenu' })"
        class="button is-primary"
        @click="edit()"
      >
        Chỉnh sửa
      </button>
      <button
        class="button is-light"
        @click="$exportPdf(docid, { filename: record.code })"
      >
        In thông tin
      </button>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      @dataevent="changeInfo"
      v-if="showmodal"
    ></Modal>
  </div>
</template>
<script>
export default {
  setup() {
    const store = useStore();
    return { store };
  },
  props: ["row", "pagename"],
  data() {
    return {
      record: undefined,
      relatedPeople: undefined,
      errors: {},
      showmodal: undefined,
      docid: this.$id(),
      data: this.store.common,
      isEditMode: this.isEditMode,
    };
  },
  computed: {
    lang() {
      return this.store.lang;
    },
    isVietnamese() {
      return this.store.lang === "vi";
    },
    isIndividual() {
      return this.record.type === 1;
    },
  },
  async created() {
    this.record = await this.$getdata("customer", { first: true, filter: { id: this.row.customer || this.row.id } });
    if (this.isIndividual) {
      this.relatedPeople = await this.$getdata("customerpeople", {
        filter: {
          customer: this.row.customer || this.row.id,
        },
      });
    } else {
      const org = await this.$getdata("organization", {
        first: true,
        filter: { customer: this.row.customer || this.row.id },
      });
      this.relatedPeople = await this.$getdata("legalrep", {
        filter: {
          organization: org.id,
        },
      });
    }
  },
  methods: {
    findFieldName(code) {
      let field = this.data.find((v) => v.code === code);
      return field;
    },
    copy(value) {
      this.$copyToClipboard(value);
      this.$snackbar("Đã copy vào clipboard", "Success");
    },
    openPhone() {
      this.showmodal = {
        title: "Điện thoại",
        height: "180px",
        width: "400px",
        component: "common/Phone",
        vbind: { row: this.row, pagename: this.pagename },
      };
    },
    selected(attr, obj) {
      this.record[attr] = obj;
    },
    edit() {
      this.showmodal = {
        component: "customer/Customer",
        width: "80%",
        height: "600px",
        title: this.store.lang === "en" ? "Edit Customer" : "Chỉnh sửa khách hàng",
        vbind: { row: this.record, isEditMode: true },
      };
    },
    async changeInfo(v) {
      this.record = this.$copy(v);
      // refetch relatedPeople
      if (this.isIndividual) {
        this.relatedPeople = await this.$getdata("customerpeople", {
          filter: {
            customer: this.row.customer || this.row.id,
          },
        });
      } else {
        const org = await this.$getdata("organization", {
          first: true,
          filter: { customer: this.row.customer || this.row.id },
        });
        this.relatedPeople = await this.$getdata("legalrep", {
          filter: {
            organization: org.id,
          },
        });
      }
    },
    openUser(userId) {
      if (!userId) return;
      this.showmodal = {
        component: "user/UserInfo",
        width: "50%",
        height: "200px",
        title: "User",
        vbind: { userId: userId },
      };
    },
    async openRelatedPerson(peopleId) {
      const peopleRow = await this.$getdata("people", {
        first: true,
        filter: { id: peopleId },
      });
      this.showmodal = {
        component: "people/PeopleView",
        vbind: { row: peopleRow },
        title: "Người liên quan",
        width: "65%",
        height: "400px",
      };
    },
  },
};
</script>
