<template>
  <div class="columns mx-0">
    <div class="column is-2">
      <Caption
        class="mb-2"
        v-bind="{ title: 'Tên model (bảng)', type: 'has-text-warning' }"
      ></Caption>
      <div class="mb-2">
        <input
          class="input"
          v-model="text"
          placeholder="Tìm model"
          @change="findModel()"
        />
      </div>
      <div style="max-height: 80vh; overflow: auto">
        <div
          :class="`py-1 border-bottom is-clickable ${current.model === v.model ? 'has-background-primary has-text-white' : ''}`"
          v-for="v in displayData"
          @click="changeMenu(v)"
        >
          {{ v.model }}
        </div>
      </div>
    </div>
    <div class="column is-10 py-0 px-0">
      <div class="tabs mb-3">
        <ul>
          <li
            :class="`${v.code === tab ? 'is-active has-text-weight-bold fs-18' : 'fs-18'}`"
            v-for="v in tabs"
          >
            <a @click="changeTab(v)">{{ v.name }}</a>
          </li>
        </ul>
      </div>
      <div v-if="tab === 'datatype'">
        <Caption
          class="mb-2"
          v-bind="{ title: 'Kiểu dữ liệu (type)', type: 'has-text-warning' }"
        ></Caption>
        <div style="max-height: 75vh; overflow-y: auto">
          <div
            class="py-1 border-bottom is-clickable"
            v-for="x in current.fields"
          >
            {{ x.name }}
            <span class="ml-6 has-text-grey">{{ x.type }}</span>
            <a
              class="ml-6 has-text-primary"
              v-if="x.model"
              @click="openModel(x)"
              >{{ x.model }}</a
            >
          </div>
        </div>
      </div>
      <template v-else-if="tab === 'table'">
        <div class="columns mx-0 mb-0 pb-0">
          <div class="column is-5">
            <Caption
              class="mb-1"
              v-bind="{ title: 'Values', type: 'has-text-warning' }"
            ></Caption>
            <input
              class="input"
              rows="1"
              v-model="values"
              placeholder="Tên trường không chứa dấu cách, vd: code,name"
            />
          </div>
          <div class="column is-4">
            <Caption
              class="mb-1"
              v-bind="{ title: 'Filter', type: 'has-text-warning' }"
            ></Caption>
            <input
              class="input"
              rows="1"
              v-model="filter"
              placeholder="{'code': 'xyz'}"
            />
          </div>
          <div class="column is-2">
            <Caption
              class="mb-1"
              v-bind="{ title: 'Sort', type: 'has-text-warning' }"
            ></Caption>
            <input
              class="input"
              rows="1"
              v-model="sort"
              placeholder="vd: -code,name"
            />
          </div>
          <div class="column is-1">
            <Caption
              class="mb-1"
              v-bind="{ title: 'Load', type: 'has-text-warning' }"
            ></Caption>
            <div>
              <button
                class="button is-primary has-text-white"
                @click="loadData()"
              >
                Load
              </button>
            </div>
          </div>
        </div>
        <Caption
          class="mb-1"
          v-bind="{ title: 'Query', type: 'has-text-warning' }"
        ></Caption>
        <div class="mb-2">
          {{ query }}
          <a
            class="has-text-primary ml-5"
            @click="copy()"
            >copy</a
          >
          <p>
            {{ apiUrl }}
            <a
              class="has-text-primary ml-5"
              @click="$copyToClipboard(apiUrl)"
              >copy</a
            >
            <a
              class="has-text-primary ml-5"
              target="_blank"
              :href="apiUrl"
              >open</a
            >
          </p>
        </div>
        <div>
          <DataTable
            v-bind="{ pagename: pagename }"
            v-if="pagedata"
          />
        </div>
      </template>
      <div v-else>
        <img
          id="image"
          :src="filePath"
          alt=""
        />
        <p class="pl-5">
          <a
            class="mr-5"
            @click="downloadFile()"
          >
            <SvgIcon v-bind="{ name: 'download.svg', type: 'black', size: 24 }"></SvgIcon>
          </a>
          <a
            target="_blank"
            :href="filePath"
          >
            <SvgIcon v-bind="{ name: 'open.svg', type: 'black', size: 24 }"></SvgIcon>
          </a>
        </p>
      </div>
    </div>
  </div>
  <Modal
    @close="showmodal = undefined"
    v-bind="showmodal"
    v-if="showmodal"
  ></Modal>
</template>
<script setup>
import { useStore } from "~/stores/index";
const {
  $getdata,
  $getapi,
  $createField,
  $clone,
  $getpage,
  $empty,
  $copyToClipboard,
  $find,
  $multiSort,
  $download,
  $getpath,
} = useNuxtApp();
const store = useStore();
var pagename = "pagedata3";
var pagedata = ref();
pagedata.value = $getpage();
pagedata.value.perPage = 10;
store.commit(pagename, pagedata);
let list = ["LogEntry", "Permission", "ContentType", "Session", "Group"];
var data = (await $getdata("getmodel")).filter((v) => list.findIndex((x) => x === v.model) < 0);
data = $multiSort(data, { model: "asc" });
var current = ref({ fields: [] });
var tabs = [
  { code: "datatype", name: "Kiểu dữ liệu" },
  { code: "table", name: "Dữ liệu" },
  { code: "datamodel", name: "Data model" },
];
var tab = ref("datatype");
var datatable = ref();
var query = ref();
var values, filter;
var apiUrl = ref();
var showmodal = ref();
var text = null;
var displayData = ref(data);
var filePath = `${$getpath()}static/files/datamodel.png`;
var sort = "-id";
current.value = data[0];
function changeMenu(v) {
  values = undefined;
  filter = undefined;
  sort = undefined;
  current.value = v;
  if (tab.value === "table") loadData();
}
async function changeTab(v) {
  tab.value = v.code;
  if (v.code === "table") loadData();
}
async function loadData() {
  let vfilter = filter ? filter.trim() : undefined;
  if (vfilter) {
    try {
      vfilter = JSON.parse(vfilter);
    } catch (error) {
      alert("Cấu trúc filter có lỗi");
      vfilter = undefined;
    }
  }
  let params = {
    values: $empty(values) ? undefined : values.trim(),
    filter: filter,
    sort: $empty(sort) ? undefined : sort.trim(),
  };
  let modelName = current.value.model;
  let found = {
    name: modelName.toLowerCase().replace("_", ""),
    url: `data/${modelName}/`,
    url_detail: `data-detail/${modelName}/`,
    params: params,
  };
  query.value = $clone(found);
  let rs = await $getapi([found]);
  if (rs === "error") return alert("Đã xảy ra lỗi, hãy xem lại câu lệnh.");
  datatable.value = rs[0].data.rows;
  showData();

  // api query
  const baseUrl = $getpath() + `${query.value.url}`;
  apiUrl.value = baseUrl;
  let vparams = !$empty(values) ? { values: values } : null;
  if (!$empty(filter)) {
    vparams = vparams ? { values: values, filter: filter } : { filter: filter };
  }
  if (!$empty(sort)) {
    if (vparams) {
      vparams.sort = sort.trim();
    } else {
      vparams = { sort: sort.trim() };
    }
  }
  if (vparams) {
    let url = new URL(baseUrl);
    let searchParams = new URLSearchParams(vparams);
    url.search = searchParams.toString();
    apiUrl.value = baseUrl + url.search;
  }
}
function showData() {
  let arr = [];
  if (!$empty(values)) {
    let arr1 = values.trim().split(",");
    arr1.map((v) => {
      let val = v.trim();
      let field = $createField(val, val, "string", true);
      arr.push(field);
    });
  } else {
    current.value.fields.map((v) => {
      let field = $createField(v.name, v.name, "string", true);
      arr.push(field);
    });
  }
  let clone = $clone(pagedata.value);
  clone.fields = arr;
  clone.data = datatable.value;
  pagedata.value = undefined;
  setTimeout(() => (pagedata.value = clone));
}
function copy() {
  $copyToClipboard(JSON.stringify(query.value));
}
function openModel(x) {
  showmodal.value = {
    component: "datatable/ModelInfo",
    title: x.model,
    width: "70%",
    height: "600px",
    vbind: { data: data, info: $find(data, { model: x.model }) },
  };
}
function downloadFile() {
  $download(`${$getpath()}download/?name=datamodel.png&type=file`, "datamodel.png");
}
function findModel() {
  if ($empty(text)) return (displayData.value = data);
  displayData.value = data.filter((v) => v.model.toLowerCase().indexOf(text.toLowerCase()) >= 0);
}
</script>
