/** 取得資料預存 */
let allListData = [];
let listData = [];
let step = [];
/** 取得資料 */
const getJSON = async () => {
    var currentURL = window.location.href; 
    var lastSegment = currentURL.substring(currentURL.lastIndexOf('/') + 1);
    var url = "";
    if (lastSegment.startsWith('e_list')) {
        //url = "/inc/json/e_list.json";
        url = "/GetHotelList";

    } else {
        url = "/inc/json/a_list_0422.json";
    }
    //switch (lastSegment) {
    //    case 'e_list.html':
    //        url = "/inc/json/e_list.json";
    //        break;
    //    case 'a_list.html':
    //    default:
    //        url = "/inc/json/a_list_0422.json";
    //}

  const data = await fetch(url).then(function (
    response
  ) {
    return response.json();
  });
  if (!data) {
    return;
  }
  const { list } = data;
  allListData = list;
  listData = list;
  setList(list);
  sePageSize(list);
};

getJSON();

/** 搜尋按鈕 */
function handleQaSearch() {
    if (!step.find((el) => el === "input")) {
        step.push("input");
    }
    const country = document.querySelector("#country");
    const category = document.querySelector("#category");
    const input1 = document.querySelector("#search-input");
    const inputValue = input1.value;
    if (inputValue === "") {
        step = step.filter((el) => el !== "input");
    }
    let filterData = allListData;
    step.forEach((item) => {
        if (item === "country") {
            const text = country.options[country.selectedIndex].text;
            filterData = filterData.filter((el) => {
                return el.country.includes(text);
            });
        }
        if (item === "category") {
            const text = category.options[category.selectedIndex].text;
            filterData = filterData.filter((el) => {
                const categoryText =
                    el.category === "T1" ? "第一類" : el.category === "T2" ? "第二類" : "";
                return categoryText.includes(text);
            });
        }
        if (item === "input") {
            filterData = filterData.filter((el) => {
                return el.name.includes(inputValue) || el.nameE.includes(inputValue);
            });
        }
    });
    setList(filterData);
    sePageSize(filterData);
}
/** 開啟地圖 */
function openMap(name) {
    window.open(`https://www.google.com/maps/search/${name}`, "_blank");
}
/** 開啟官網 */
function openOfficial(official) {
    window.open(`${official}`, "_blank");
}

/** 寫入資料 */
function setList(list) {
    listData = list;
    const imgAry = ["stay", "food", "other"];
    const currentPage = document.querySelector("#currentPage");
    const pageSize = document.querySelector("#pageSize");
    const start = Number(pageSize.value) * (Number(currentPage.value) - 1);
    const end = start + Number(pageSize.value);
    const sliceList = list.slice(start, end);
    const data = sliceList.length !== 0 ? sliceList : list;
    let html = "";
    data.forEach((el) => {
        const iconImgs = [el.stay, el.food, el.other];
        const discount = iconImgs
            .map((item, i) => {
                if (item === "Y") {
                    return imgAry[i];
                } else return item;
            })
            .filter((item) => item !== "N");
        let imgs = "";
        discount.forEach((img) => {
            imgs += `<p>
        <img src="/inc/img/global/${img}.png" class="table-icon" alt="可折抵項目"  title="可以折抵項目" />
      </p>`;
        });
        let names = "";
        names += `<p title="${el.name}">
                  <a href="javascript:;" class="btn-icon" 
                    title="${el.name}"
                    rel="noreferrer noopener"  
                    onClick="openMap('${el.name}')"
                    >
                    ${el.name}
                   </a>
              </p>`;
        names += `<p title="${el.nameE}">
                <a href="javascript:;" class="btn-icon" 
                  title="${el.nameE}"
                  rel="noreferrer noopener"  
                  onClick="openMap('${el.nameE}')"
                  >
                  ${el.nameE}
                </a>
            </p>`;
        const icon =
            el.category === "T1" ? "icon-NumberSquareOne" : "icon-NumberSquareTwo";
        html += `<tr>
    <td title="${el.category}"><i class="${icon}" aria-hidden="true"></i></td>
    <td>${imgs}</td>
    <td title="${el.country}">${el.country}</td>
    <td>${names}</td>
    <td>
      <a href="javascript:;" class="btn-icon" 
          title="${el.name}官網"
          rel="noreferrer noopener"  
          onClick="openOfficial('${el.official}')"
      >
          <i class="icon-home" aria-hidden="true"></i>
      </a>
    </td>
    <td title="${el.email}"> ${el.email}</td>
    <td title="${el.tel}"> ${el.tel}</td>
  </tr>`;
    });
    const extab2Tbody = document.querySelector("#extab2Tbody");
    extab2Tbody.innerHTML = html;

    pageFunc(list);
}
/** 寫入頁數 */
function sePageSize(list) {
    const pageSize = document.querySelector("#pageSize");
    const page = Math.ceil(list.length / Number(pageSize.value));
    if (page > 10000) { /* 修正資安 Unchecked_Input_For_Loop_Condition */
        page = 10000;
    }
    let html = "";
    for (let i = 0; i < page; i++) {
        html += `<option>${i + 1}</option>`;
    }
    const currentPage = document.querySelector("#currentPage");
    currentPage.innerHTML = html;
    const totalPage = document.querySelector("#totalPage");
    totalPage.innerText = page;
}

/** page資料 */
function pageFunc(list) {
    const totalNumNode = document.querySelector("#totalNum");
    totalNumNode.innerText = ` 筆 ，共${list.length}筆`;
}
/** 第幾頁改變 */
function currentPageChange() {
    setList(listData);
}
/** 每頁幾筆改變 */
function pageSizeChange() {
    setList(listData);
    sePageSize(listData);
}

/** 縣市選擇 */
function countryChange() {
    if (!step.find((el) => el === "country")) {
        step.push("country");
    }
    const country = document.querySelector("#country");
    const category = document.querySelector("#category");
    const input1 = document.querySelector("#search-input");
    const inputValue = input1.value;
    if (country.value === "0") {
        step = step.filter((el) => el !== "country");
    }
    let filterData = allListData;
    step.forEach((item) => {
        if (item === "country") {
            const text = country.options[country.selectedIndex].text;
            filterData = filterData.filter((el) => {
                return el.country.includes(text);
            });
        }
        if (item === "category") {
            const text = category.options[category.selectedIndex].text;
            filterData = filterData.filter((el) => {
                const categoryText =
                    el.category === "T1" ? "第一類" : el.category === "T2" ? "第二類" : "";
                return categoryText.includes(text);
            });
        }
        if (item === "input") {
            filterData = filterData.filter((el) => {
                return el.name.includes(inputValue) || el.nameE.includes(inputValue);
            });
        }
    });
    setList(filterData);
    sePageSize(filterData);
}

/** 屬性選擇 */
function categoryChange() {
    if (!step.find((el) => el === "category")) {
        step.push("category");
    }
    const country = document.querySelector("#country");
    const category = document.querySelector("#category");
    const input1 = document.querySelector("#search-input");
    const inputValue = input1.value;
    if (category.value === "T0") {
        step = step.filter((el) => el !== "category");
    }
    let filterData = allListData;
    step.forEach((item) => {
        if (item === "country") {
            const text = country.options[country.selectedIndex].text;
            filterData = filterData.filter((el) => {
                return el.country.includes(text);
            });
        }
        if (item === "category") {
            const text = category.options[category.selectedIndex].text;
            filterData = filterData.filter((el) => {
                const categoryText =
                    el.category === "T1" ? "第一類" : el.category === "T2" ? "第二類" : "";
                return categoryText.includes(text);
            });
        }
        if (item === "input") {
            filterData = filterData.filter((el) => {
                return el.name.includes(inputValue) || el.nameE.includes(inputValue);
            });
        }
    });
    setList(filterData);
    sePageSize(filterData);
}

/** 切換頁面button */
function handlePage(page) {
    const currentPage = document.querySelector("#currentPage");
    const totalPage = document.querySelector("#totalPage");
    if (page === "start") {
        num = 0;
    } else if (page === "-1") {
        num = Number(currentPage.value) - 1;
    } else if (page === "1") {
        num = Number(currentPage.value) + 1;
    } else {
        num = Number(totalPage.innerText);
    }
    if (num > Number(totalPage.innerText)) {
        num = Number(totalPage.innerText);
    }
    if (num < 1) {
        num = 1;
    }
    currentPage.value = num;
    setList(listData);
}