<main id="js-page-content" role="main" class="page-content">
  <div class="row">
    <div class="col-sm-12 col-xl-12">
      <h1 class="p-2 mb-0">報表管理</h1>

      <div class="row">
        <div class="col-sm-12 col-xl-2">
          <div class="rounded border border-white">
            <!-- nav-menu-reset will reset the font colors -->
            <ul
              class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white"
              data-nav-accordion="true"
            >
              <li class="active">
                <a name="reportTypeRadio" href="javascript:;" data-value="day">
                  <span class="nav-link-text"> 電錶 - 日報表 </span>
                </a>
              </li>
              <li>
                <a
                  name="reportTypeRadio"
                  href="javascript:;"
                  data-value="month"
                >
                  <span class="nav-link-text"> 電錶 - 月報表 </span>
                </a>
              </li>
              <li>
                <a name="reportTypeRadio" href="javascript:;" data-value="year">
                  <span class="nav-link-text"> 電錶 - 年報表 </span>
                </a>
              </li>
              <li>
                <a
                  name="reportTypeRadio"
                  href="javascript:;"
                  data-value="compare"
                >
                  <span class="nav-link-text"> 電錶 - 同期比較 </span>
                </a>
              </li>
            </ul>
            <div
              class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"
            ></div>
          </div>
        </div>
        <div class="col-12 col-xl-10">
          <div class="panel-hdr" style="min-height: auto">
            <h2 class="py-2" id="xx">
              <div class="col-auto">
                <span class="report-type-name"></span>費每度單價
              </div>
              <input
                type="text"
                id="elecPriceDegree"
                class="form-control col-1"
              />
              <div
                id="compareTypeBtnsDiv"
                class="item btn-group btn-group-toggle offset-1"
                data-toggle="buttons"
                style="display: none"
              >
                <label
                  class="btn btn-outline-success waves-effect active waves-themed"
                >
                  <input
                    type="radio"
                    name="compareTypeRadio"
                    id="compareMonth"
                    value="month"
                    checked
                  />
                  年度同月比較
                </label>
                <label
                  class="btn btn-outline-success waves-effect waves-themed"
                >
                  <input
                    type="radio"
                    name="compareTypeRadio"
                    id="compareDay"
                    value="day"
                  />
                  月份同日比較
                </label>
              </div>
              <div class="col-auto offset-1">
                選擇<span id="elecTimeText">單一月份</span>
              </div>
              <input
                type="text"
                id="elecMonthDate"
                class="form-control col-2"
              />
              <input
                type="text"
                id="elecYearDate"
                class="form-control col-2"
                style="display: none"
              />
              <div
                id="elecStartEndDiv"
                class="row m-0 align-items-center"
                style="display: none"
              >
                <input
                  type="text"
                  id="elecSYearDate"
                  class="form-control col-4"
                />
                <span class="px-2">~</span>
                <input
                  type="text"
                  id="elecEYearDate"
                  class="form-control col-4"
                />
              </div>
              <div
                id="elecCompareDiv"
                class="row m-0 align-items-center"
                style="display: none"
              >
                <div id="elecComYearDiv" class="row m-0 align-items-center">
                  <input
                    type="text"
                    id="elecCom1YearDate"
                    class="form-control col-4"
                  />
                  <span class="px-2">、</span>
                  <input
                    type="text"
                    id="elecCom2YearDate"
                    class="form-control col-4"
                  />
                </div>
                <div
                  id="elecComMonthDiv"
                  class="row m-0 align-items-center"
                  style="display: none"
                >
                  <input
                    type="text"
                    id="elecCom1MonthDate"
                    class="form-control col-4"
                  />
                  <span class="px-2">、</span>
                  <input
                    type="text"
                    id="elecCom2MonthDate"
                    class="form-control col-4"
                  />
                </div>
              </div>
            </h2>
          </div>
          <div class="panel-hdr" style="min-height: auto">
            <h2 class="py-2 col-12" id="building">
              <div class="col-1">棟別</div>
              <div
                class="item btn-group btn-group-toggle"
                data-toggle="buttons"
              ></div>
            </h2>
          </div>
          <div class="panel-hdr" style="min-height: auto">
            <h2 class="py-2 col-12" id="floors">
              <div class="col-1">樓層</div>
              <button
                type="button"
                class="btn btn-secondary float-right allbtn mr-2 col-auto align-self-center"
                onclick="allFloor()"
                style="display: none"
              >
                全選
              </button>
              <div
                class="item btn-group btn-group-toggle row m-0"
                data-toggle="buttons"
                style="row-gap: 5px"
              ></div>
              <span
                class="text-notice notice-noSelectedBuilding"
                style="display: none"
                >請選擇棟別</span
              >
              <span class="text-notice notice-noBuilding" style="display: none"
                >該棟別沒有樓層</span
              >
            </h2>
          </div>
          <div class="d-flex my-2">
            <button
              type="button"
              class="btn btn-primary"
              onclick="getMeterData()"
            >
              查詢
            </button>
            <button
              type="button"
              class="btn btn-danger ml-2"
              onclick="setExportList()"
            >
              匯出
            </button>
            <div
              id="tableLoading"
              class="row m-0 align-items-center"
              style="display: none"
            >
              <div
                class="spinner-border text-info mx-2"
                role="status"
                style="width: 1.2rem; height: 1.2rem"
              >
                <span class="sr-only">Loading...</span>
              </div>
              <span id="tableLoadingText">列表讀取中</span>
            </div>
            <!-- <button type="button" class="btn btn-primary" onclick="SaveRealTimeCombination()">儲存常用組合</button>
            <button type="button" class="btn btn-danger ml-2" onclick="CleanAll()">全部清除</button>
            <button type="button" class="btn btn-info allbtn ml-2" onclick="LookRealTime()">查看即時資訊</button> -->
          </div>

          <table
            id="report_table"
            class="table table-bordered table-striped text-center m-0"
          ></table>
        </div>
      </div>
    </div>
  </div>
</main>

<script>
  var default_building = localStorage.getItem("default_building");
  var Building; //取得所有棟別
  var SelectBuildings = new Array(0); //選擇的區域
  var datatable;
  var datepickerOptions = {
    autoclose: true,
    minViewMode: 1,
    language: "zh-TW",
    format: "yyyy-mm",
  };
  var reportTypeDict = {
    RWater: {
      name: "Water",
      chiName: "水",
      listApiUrl: "WaterList",
      exportListApiUrl: "ExportWaterList",
    },
    RElec: {
      name: "Electric",
      chiName: "電",
      listApiUrl: "ElectricList",
      exportListApiUrl: {
        day:"ExportElectricList",
        month:"ExportElectricList",
        year:"ExportElectricList",
        compare:"ExportElectricCompareList",
      }
    },
  };
  var token = cookies.get("JWT-Authorization");

  $(function () {
    console.log("即時趨勢進入點");
    setNameByType();
    initDatePicker();
    eventsInit();
    getPrice();
    setReportTable([]);
    $("#elecSYearDate")
      .val(moment().subtract(5, "years").format("YYYY"))
      .trigger("change");
    $("#elecEYearDate").val(moment().format("YYYY")).trigger("change");
    $("#elecCom1YearDate").val(moment().subtract(1, "years").format("YYYY"));
    $("#elecCom2YearDate").val(moment().format("YYYY"));
    $("#elecCom1MonthDate").val(
      moment().subtract(1, "months").format("YYYY-MM")
    );
    $("#elecCom2MonthDate").val(moment().format("YYYY-MM"));
    //調整畫面
    $("#js-page-content").removeClass("mt-0");

    var html = "";
    for (let building of pageAct.buildList) {
      html += `<label class="btn btn-outline-success waves-effect waves-themed">
                    <input type="radio" name="buildingRadio" id="radio_${building.building_tag}" value="${building.building_tag}" onChange="SelectBuild(this,'${building.building_tag}')"> ${building.full_name}
                </label>`;
    }
    $("#building").find(".item").empty();
    $("#building").find(".item").append(html);

    checkIsSelectedBuilding();
  });

  function setNameByType() {
    $(".report-type-name").text(reportTypeDict["RElec"]["chiName"]);
  }

  function initDatePicker(name = null, otherParam = {}) {
    const datepickerMonthOptions = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 1,
          format: "yyyy-mm",
        },
        otherParam
      )
    );
    const datepickerYearOptions = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 2,
          format: "yyyy",
        },
        otherParam
      )
    );
    const datepickerSYearOptions = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 2,
          format: "yyyy",
        },
        otherParam
      )
    );
    const datepickerEYearOptions = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 2,
          format: "yyyy",
        },
        otherParam
      )
    );
    const datepickerComYear1Options = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 2,
          format: "yyyy",
        },
        otherParam
      )
    );
    const datepickerComYear2Options = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 2,
          format: "yyyy",
        },
        otherParam
      )
    );
    const datepickerComMonth1Options = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 1,
          format: "yyyy-mm",
        },
        otherParam
      )
    );
    const datepickerComMonth2Options = Object.assign(
      {},
      datepickerOptions,
      Object.assign(
        {
          minViewMode: 1,
          format: "yyyy-mm",
        },
        otherParam
      )
    );
    if (name == null || name == "Month") {
      $("#elecMonthDate")
        .datepicker("destroy")
        .datepicker(datepickerMonthOptions)
        .focus(function () {
          $(this).datepicker("show");
        })
        .datepicker("update", new Date());
    }
    if (name == null || name == "Year") {
      $("#elecYearDate")
        .datepicker("destroy")
        .datepicker(datepickerYearOptions)
        .focus(function () {
          $(this).datepicker("show");
        })
        .datepicker("update", new Date());
    }
    if (name == null || name == "SYear") {
      $("#elecSYearDate")
        .datepicker("destroy")
        .datepicker(datepickerSYearOptions)
        .focus(function () {
          $(this).datepicker("show");
        });
    }
    if (name == null || name == "EYear") {
      $("#elecEYearDate")
        .datepicker("destroy")
        .datepicker(datepickerEYearOptions)
        .focus(function () {
          $(this).datepicker("show");
        });
    }
    if (name == null || name == "ComYear1") {
      $("#elecCom1YearDate")
        .datepicker("destroy")
        .datepicker(datepickerComYear1Options)
        .focus(function () {
          $(this).datepicker("show");
        });
    }
    if (name == null || name == "ComYear2") {
      $("#elecCom2YearDate")
        .datepicker("destroy")
        .datepicker(datepickerComYear2Options)
        .focus(function () {
          $(this).datepicker("show");
        });
    }
    if (name == null || name == "ComMonth1") {
      $("#elecCom1MonthDate")
        .datepicker("destroy")
        .datepicker(datepickerComMonth1Options)
        .focus(function () {
          $(this).datepicker("show");
        });
    }
    if (name == null || name == "ComMonth2") {
      $("#elecCom2MonthDate")
        .datepicker("destroy")
        .datepicker(datepickerComMonth2Options)
        .focus(function () {
          $(this).datepicker("show");
        });
    }
  }

  function eventsInit() {
    $("body").on("change", "[name=reportTypeRadio]", function () {
      $(
        "#elecMonthDate, #elecYearDate, #elecStartEndDiv, #elecCompareDiv"
      ).hide();
      $("#compareTypeBtnsDiv").hide();

      const value = $(this).data("value");
      const curDate = $("#elecDate").val();
      if (value === "day") {
        $("#elecTimeText").text("月份");
        $("#elecMonthDate").show();
      } else if (value == "month") {
        $("#elecTimeText").text("年份");
        $("#elecYearDate").show();
      } else if (value == "year") {
        $("#elecTimeText").text("年份範圍");
        $("#elecStartEndDiv").show();
      } else if (value == "compare") {
        $("#elecTimeText").text("年份");
        $("#elecCompareDiv").show();
        $("#compareTypeBtnsDiv").show();
      }
    });

    $("body").on("change", "[name=compareTypeRadio]", function () {
      $("#elecComYearDiv, #elecComMonthDiv").hide();
      const value = $(this).val();
      if (value === "month") {
        $("#elecTimeText").text("年份");
        $("#elecComYearDiv").show();
      } else if (value == "day") {
        $("#elecTimeText").text("月份");
        $("#elecComMonthDiv").show();
      }
    });

    $("[name=reportTypeRadio]")
      .parent("li")
      .on("click", function () {
        $("[name=reportTypeRadio]").parent("li").removeClass("active");
        const oldVal = $("li.active [name=reportTypeRadio]").data("value");
        $(this).addClass("active");
        const newVal = $("li.active [name=reportTypeRadio]").data("value");
        if (oldVal !== newVal) {
          $("li.active [name=reportTypeRadio]").trigger("change");
        }
      });

    $("[name=compareTypeRadio]")
      .parent("label")
      .on("click", function () {
        debugger;
        $("[name=compareTypeRadio]").parent("label").removeClass("active");
        const oldVal = $("label.active [name=compareTypeRadio]").val();
        $(this).addClass("active");
        const newVal = $("label.active [name=compareTypeRadio]").val();
        if (oldVal !== newVal) {
          $("label.active [name=compareTypeRadio]").trigger("change");
        }
      });

    $("[name=floorCheckbox]")
      .parent(".btn")
      .off("click")
      .on("click", function () {
        const oldVal = $("[name=floorCheckbox]:checked").val();
        $(this).find("input[name=floorCheckbox]").prop("checked", true);
        const newVal = $("[name=floorCheckbox]:checked").val();
        if (oldVal !== newVal) {
          $("[name=floorCheckbox]:checked").trigger("change");
        }
      });

    $("body").on("change", "#elecSYearDate", function () {
      initDatePicker("EYear", {
        startDate: moment($(this).val()).startOf("year").toDate(),
      });
    });
    $("body").on("change", "#elecEYearDate", function () {
      initDatePicker("SYear", {
        endDate: moment($(this).val()).endOf("year").toDate(),
      });
    });
  }

  function getListSendData() {
    const tableType = $("li.active [name=reportTypeRadio]").data("value");
    const compareType = $("label.active [name=compareTypeRadio]").val();
    const startTime =
      tableType == "day"
        ? $("#elecMonthDate").val()
        : tableType == "month"
        ? $("#elecYearDate").val()
        : tableType == "year"
        ? $("#elecSYearDate").val()
        : tableType == "compare"
        ? compareType == "month"
          ? !$("#elecCom1YearDate").val() || !$("#elecCom2YearDate").val()
            ? null
            : [$("#elecCom1YearDate").val(), $("#elecCom2YearDate").val()]
          : compareType == "day"
          ? !$("#elecCom1MonthDate").val() || !$("#elecCom2MonthDate").val()
            ? null
            : [$("#elecCom1MonthDate").val(), $("#elecCom2MonthDate").val()]
          : null
        : null;

    if (!startTime) {
      toast_error("請選擇日期");
      return;
    }

    if (Array.isArray(startTime) && startTime.length < 2) {
      toast_error("請選擇比較日期");
      return;
    }

    const endTime = tableType == "year" ? $("#elecEYearDate").val() : null;
    if (!endTime && tableType == "year") {
      toast_error("請選擇結束日期");
      return;
    }

    let sent_data = {
      tableType:
        $("li.active [name=reportTypeRadio]").data("value") == "compare"
          ? $("[name=compareTypeRadio]:checked").val()
          : $("li.active [name=reportTypeRadio]").data("value"),
      building_tag: $("[name=buildingRadio]:checked").val(),
      floor_tag: $("[name=floorCheckbox]:checked")
        .map((i, e) => $(e).val())
        .toArray(),
      startTime: startTime,
      endTime: endTime,
      price: $("#elecPriceDegree").val()
        ? parseFloat($("#elecPriceDegree").val())
        : null,
    };

    if (Array.isArray(startTime)) {
      sent_data = [Object.assign({}, sent_data), Object.assign({}, sent_data)];
      startTime.forEach((sTime, i) => {
        const compareType = $("[name=compareTypeRadio]:checked").val();
        sent_data[i].startTime = sTime;
        sent_data[i].endTime = null;
      });
    }

    return sent_data;
  }

  function getMeterData() {
    let result = [];
    var sent_data = getListSendData();
    if (!Array.isArray(sent_data)) {
      sent_data = [sent_data];
    }

    if (!sent_data.some((s) => s.building_tag)) {
      toast_error("請選擇棟別");
      return;
    }
    if (!sent_data.some((s) => s.floor_tag)) {
      toast_error("請選擇樓層");
      return;
    }
    var url = baseApiUrl + "/api/" + reportTypeDict["RElec"]["listApiUrl"];

    setLoading(true);
    sent_data.forEach((sdata, i) => {
      $.ajax({
        type: "POST",
        headers: {
          Authorization: "Bearer " + token,
        },
        url: url,
        async: false,
        data: JSON.stringify(sdata),
        contentType: "application/json; charset=utf-8",
        success: function (rel) {
          if (rel.code != "0000") {
            if (rel.code == "9999") {
              toast_error(rel.msg);
            } else {
              toast_warning(rel.msg);
            }
            return;
          }
          if (i == 0) {
            result = result.concat(rel.data);
            result.forEach(r => {
              r._compare_price = null;
              r._compare_total = null;
              r._compare_total_price = null;
            })
          } else {
            rel.data.forEach((r) => {
              let target =
                result.find(
                  (d) =>
                    d.building_tag == r.building_tag &&
                    d.device_serial_tag == r.device_serial_tag &&
                    d.floor_tag == r.floor_tag
                ) ?? null;
              let _target = {};
              // if(!target){
              //   result.push(target);
              //   target = {};
              // }
              _target.rawData = (target?.rawData ?? []).concat(r.rawData);
              _target._compare_price = r.price;
              _target._compare_total = r.total;
              _target._compare_total_price = r.total_price;

              if (!target) {
                _target = Object.assign(_target, r);
                _target.price = null;
                _target.total = null;
                _target.total_price = null;
                result.push(_target);
                return;
              }
              target = Object.assign(target, _target);
            });
          }
        },
        complete: () => {
          if (sent_data.length - 1 == i) {
            setLoading(false);
          }
        },
      });
    });
    debugger;
    setReportTable(result);
  }

  function getPrice() {
    debugger;
    var sentdata = {
      type: reportTypeDict["RElec"]["name"],
    };

    var url = baseApiUrl + "/api/HydroMeterPrice";

    $.ajax({
      type: "POST",
      url: url,
      headers: {
        Authorization: "Bearer " + token,
      },
      data: JSON.stringify(sentdata),
      contentType: "application/json; charset=UTF-8;",
      success: function (rel) {
        if (rel.code != "0000") {
          if (rel.code == "9999") {
            toast_error(rel.msg);
          } else {
            toast_warning(rel.msg);
          }
          return;
        }
        $("#elecPriceDegree").val(rel.data);
      },
    });
  }

  function getDayByMonth(month) {
    const firstDayOfMonth = moment(month).startOf("month");
    const lastDayOfMonth = moment(month).endOf("month");
    const datesOfMonth = [];
    let currentDay = moment(firstDayOfMonth);
    while (currentDay.isSameOrBefore(lastDayOfMonth)) {
      datesOfMonth.push(currentDay.format("YYYY-MM-DD"));
      currentDay = currentDay.add(1, "day");
    }
    return datesOfMonth;
  }

  function getMonthByYear(year) {
    const firstMonthOfYear = moment(year).startOf("year").month();
    const lastMonthOfYear = moment(year).endOf("year").month();
    const monthOfYear = [];
    for (let i = firstMonthOfYear; i <= lastMonthOfYear; i++) {
      monthOfYear.push(moment(year).month(i).format("YYYY-MM"));
    }
    return monthOfYear;
  }

  function getStartEndYear(sYear, eYear) {
    const years = [];
    for (let i = sYear; i <= eYear; i++) {
      years.push(moment().year(i).format("YYYY"));
    }
    return years;
  }

  function setTableColumns() {
    const tableType = $("li.active [name=reportTypeRadio]").data("value");
    const compareType = $("label.active [name=compareTypeRadio]").val();
    let columns = [];
    switch (tableType) {
      case "day":
        columns = getDayByMonth($("#elecMonthDate").val()).map((dc) => {
          return { title: dc, data: dc };
        });
        break;
      case "month":
        columns = getMonthByYear($("#elecYearDate").val()).map((dc) => {
          return { title: dc, data: dc };
        });
        break;
      case "year":
        columns = getStartEndYear(
          $("#elecSYearDate").val(),
          $("#elecEYearDate").val()
        ).map((dc) => {
          return { title: dc, data: dc };
        });
        break;
      case "compare":
        let compareResult = [];
        switch (compareType) {
          case "month":
            columns1 = getMonthByYear($("#elecCom1YearDate").val());
            columns2 = getMonthByYear($("#elecCom2YearDate").val());
            columns1.forEach((c1, index) => {
              compareResult.push(c1);
              if (columns2[index]) {
                compareResult.push({
                  value: columns2[index],
                  _isCompared: true,
                });
              }
            });
            break;
          case "day":
            columns1 = getDayByMonth($("#elecCom1MonthDate").val());
            columns2 = getDayByMonth($("#elecCom2MonthDate").val());
            columns1.forEach((c1, index) => {
              compareResult.push(c1);
              if (columns2[index]) {
                compareResult.push({
                  value: columns2[index],
                  _isCompared: true,
                });
              }
            });
            break;
        }

        return compareResult.map((dc) => {
          if (dc._isCompared) {
            return { title: dc.value, data: dc.value, sClass: "compare" };
          }
          return { title: dc, data: dc };
        });

        break;
    }
    return columns;
  }

  function setReportTable(datas = []) {
    if (datatable) {
      datatable.clear().draw();
      datatable.destroy();
      $("#report_table").empty();
    }
    datesColumns = setTableColumns();
    const compareType = $("label.active [name=compareTypeRadio]").val();
    datas.forEach((td) => {
      td.rawData.forEach((rd) => {
        td[rd.timeStamp] = rd.avg_rawdata;
      });
      datesColumns.forEach((dc) => {
        td[dc.data] = td[dc.data] === undefined ? null : td[dc.data];
      });
    });

    let totalColumns = [
      {
        title: "小計",
        data: "total",
      },
      {
        title: "單價",
        data: "price",
      },
      {
        title: "金額總計",
        data: "total_price",
      },
    ];
    const tableType = $("li.active [name=reportTypeRadio]").data("value");

    if (tableType == "compare") {
      const com1Time =
        compareType == "month"
          ? $("#elecCom1YearDate").val()
          : $("#elecCom1MonthDate").val();
      const com2Time =
        compareType == "month"
          ? $("#elecCom2YearDate").val()
          : $("#elecCom2MonthDate").val();

      for (var i = 0; i < totalColumns.length; i++) {
        let c = totalColumns[i];
        if (["total", "price", "total_price"].includes(c.data)) {
          totalColumns.splice(i + 1, 0, {
            title: com2Time + c.title,
            data: "_compare_" + c.data,
            sWidth: "60px",
            sClass: "compare",
          });
          c.title = com1Time + c.title;
          c.sWidth = "60px";
        }
      }
    }
    console.log("datas",datas)
    console.log("totalColumns",totalColumns)
    datatable = $("#report_table").DataTable({
      data: datas,
      destroy: true,
      sDom: '<"toolbar">tipl',
      fixedColumns: { left: 3, right: tableType == "compare" ? 2 : 3 },
      scrollX: "auto",
      scrollCollapse: true,
      autoWidth: true,
      language: { url: "/file/BajascriptTest/js/dataTables/zh-HANT.json" },
      columns: [
        {
          title: "棟別",
          data: "building_name",
          className: "text-nowrap",
        },
        {
          title: "樓層",
          data: "floor_tag",
          width: "8%",
        },
        {
          title: "設備",
          data: "device_serial_tag",
          width: "8%",
        },
        ...datesColumns,
        ...totalColumns,
      ],
    });
  }

  function setExportList() {
    const tableType = $("li.active [name=reportTypeRadio]").data("value");
    var sent_data = getListSendData();
    if (!Array.isArray(sent_data)) {
      sent_data = [sent_data];
    }
    if (!sent_data.some((s) => s.building_tag)) {
      toast_error("請選擇棟別");
      return;
    }
    if (!sent_data.some((s) => s.floor_tag)) {
      toast_error("請選擇樓層");
      return;
    }
    debugger
    var url =
      baseApiUrl + "/api/" + reportTypeDict["RElec"]["exportListApiUrl"][tableType];

    setLoading(true, "匯出中");
    $.ajax({
      type: "POST",
      url: url,
      data: tableType == "compare" ? JSON.stringify(sent_data) : JSON.stringify(sent_data[0]),
      headers: {
        Authorization: "Bearer " + token,
      },
      contentType: "application/json; charset=utf-8",
      xhrFields: {
        responseType: "blob", // to avoid binary data being mangled on charset conversion
      },
      success: function (rel, text, xhr) {
        if (rel) {
          downloadByBlob(xhr, rel);
        }
      },
      complete: (xhr) => {
        setLoading(false);
      },
    });
  }

  function setLoading(type = true, text = "列表讀取中") {
    if (type) {
      $("#tableLoading").fadeIn(200);
      $("#tableLoadingText").html(text);
    } else {
      $("#tableLoading").fadeOut(200);
    }
  }

  //選擇棟別
  function SelectBuild(e, building_tag) {
    checkIsSelectedBuilding();
    GetFloors(building_tag);
  }

  //取得樓層
  function GetFloors(building_tag) {
    var sentdata = {
      building_tag: building_tag,
    };

    var url = baseApiUrl + "/api/GetAllfloor";
    $.ajax({
      type: "POST",
      url: url,
      headers: {
        Authorization: "Bearer " + token,
      },
      data: sentdata,
      success: function (rel) {
        if (rel.code != "0000") {
          if (rel.code == "9999") {
            toast_error(rel.msg);
          } else {
            toast_warning(rel.msg);
          }
          return;
        }
        if (rel.data && rel.data.length > 0) {
          $(".allbtn").show();
        }
        drawFloorsBtn(rel.data);
        checkIsHasFloorByBuilding();
        //   JudgeCurrentDeviceData();
        //   RedrawDataTable();
      },
    });
  }

  function allFloor() {
    $("[name=floorCheckbox]").prop("checked", true);
    $("[name=floorCheckbox]").parent(".btn").addClass("active");
  }

  function checkIsSelectedBuilding() {
    let result = false;
    let buildingRadios = $("[name=buildingRadio]:checked");
    if (buildingRadios && buildingRadios.length > 0) {
      $("#floors .text-notice.notice-noSelectedBuilding").hide();
      result = true;
    } else {
      $("#floors .text-notice.notice-noSelectedBuilding").show();
      $(".allbtn").hide();
    }
    return result;
  }

  function checkIsHasFloorByBuilding() {
    let result = false;
    let floorCheckboxs = $("[name=floorCheckbox]");
    if (!checkIsSelectedBuilding()) {
      return null;
    }
    if (floorCheckboxs && floorCheckboxs.length > 0) {
      $("#floors .text-notice.notice-noBuilding").hide();
      result = true;
    } else {
      $("#floors .text-notice.notice-noBuilding").show();
      $(".allbtn").hide();
    }
    return result;
  }

  function drawFloorsBtn(floors) {
    var html = "";
    for (let floor of floors) {
      html += `<label class="btn btn-outline-success waves-effect waves-themed" style="flex:0 0 auto">
                    <input type="checkbox" name="floorCheckbox" onChange="SelectFloor(this,'${floor.floor_guid}')" value="${floor.full_name}" id="${floor.floor_guid}"> ${floor.full_name}
                </label>`;
    }

    $("#floors").find(".item").empty();
    $("#floors").find(".item").append(html);
  }

  function SelectFloor(e, floor_guid) {
    // getMeterData();
  }
</script>