<script setup>
import { computed, inject, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
import { postTimeElec } from "@/apis/energy";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const { t } = useI18n();
const { sim2, sim3, getData } = inject("time_elec");
const sim2isEditing = ref(false);
const sim3isEditing = ref(false);
const sim2NewValue = ref([]);
const sim3NewValue = ref([]);
const onOk = async (sheet, data) => {
  const res = await postTimeElec({
    sheet: sheet,
    cost: data,
    building_guid: store.selectedBuilding.building_guid,
  });
  if (res.isSuccess) {
    getData();
    onCancel(sheet);
  } else {
    openToast("error", res.msg);
  }
};

const onCancel = (sheet) => {
  if (sheet === "sim2") {
    sim2isEditing.value = false;
    sim2NewValue.value = [...sim2.value];
  } else if (sheet === "sim3") {
    sim3isEditing.value = false;
    sim3NewValue.value = [...sim3.value];
  }
};

watch(
  sim2,
  (newValue, oldValue) => {
    sim2NewValue.value = [...newValue];
  },
  { immediate: true }
);

watch(
  sim3,
  (newValue, oldValue) => {
    sim3NewValue.value = [...newValue];
  },
  { immediate: true }
);
</script>

<template>
  <div class="flex justify-start items-center my-5">
    <h3 class="text-xl mr-5">{{ $t("energy.simple_elec_price_two_stage") }}</h3>
    <button
      v-if="!sim2isEditing"
      class="btn btn-sm btn-add mr-3"
      @click.stop.prevent="sim2isEditing = true"
    >
      <font-awesome-icon :icon="['fas', 'pencil-alt']" />{{
        $t("button.start_edit")
      }}
    </button>
    <template v-else>
      <button
        class="btn btn-sm btn-add mr-3"
        @click.prevent="onOk('sim2', sim2NewValue)"
      >
        <font-awesome-icon :icon="['fas', 'save']" />{{ $t("button.confirm") }}
      </button>
      <button
        class="btn btn-sm btn-outline-info mr-3"
        @click.stop.prevent="onCancel('sim2')"
      >
        <font-awesome-icon :icon="['fas', 'times']" />{{ $t("button.cancel") }}
      </button>
    </template>
  </div>
  <div class="w-full overflow-x-auto">
    <table class="min-w-[800px]">
      <thead>
        <tr>
          <th colspan="6" class="bg-teal-800 bg-opacity-20">
            {{ $t("energy.classification") }}
          </th>
          <th class="bg-teal-800 bg-opacity-20">
            {{ $t("energy.summer_months") }}<br />(6/1~9/30)
          </th>
          <th class="bg-teal-800 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}<br />({{
              $t("energy.time_outside_summer_months")
            }})
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.fixed_elec_cost") }}
          </td>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.charged_per_household") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.per_household_month") }}
          </td>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="sim2NewValue[0]"
              :readonly="!sim2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="6">{{ $t("energy.var_elec_cost") }}</td>
          <td rowspan="4">{{ $t("energy.mon_to_friday") }}</td>
          <td rowspan="2" class="bg-rose-600 bg-opacity-70">
            {{ $t("energy.peak_hours") }}
          </td>
          <td class="bg-rose-600 bg-opacity-20">
            {{ $t("energy.summer_months") }}
          </td>
          <td class="bg-rose-600 bg-opacity-20">09:00 ~ 24:00</td>
          <td rowspan="5">{{ $t("energy.price_per_kwh") }}</td>
          <td class="bg-rose-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim2NewValue[1]"
              :readonly="!sim2isEditing"
            />
          </td>
          <td class="bg-rose-600 bg-opacity-20">-</td>
        </tr>
        <tr>
          <td class="bg-rose-600 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}
          </td>
          <td class="bg-rose-600 bg-opacity-20">
            06:00 ~ 11:00<br />14:00 ~ 24:00
          </td>
          <td class="bg-rose-600 bg-opacity-20">-</td>
          <td class="bg-rose-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim2NewValue[2]"
              :readonly="!sim2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="2" class="bg-green-600 bg-opacity-60">
            {{ $t("energy.off_peak_hours") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">
            {{ $t("energy.summer_months") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">00:00 ~ 09:00</td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim2NewValue[3]"
              :readonly="!sim2isEditing"
            />
          </td>
          <td class="bg-green-600 bg-opacity-20">-</td>
        </tr>
        <tr>
          <td class="bg-green-600 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">
            00:00 ~ 06:00<br />11:00 ~ 14:00
          </td>
          <td class="bg-green-600 bg-opacity-20">-</td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim2NewValue[4]"
              :readonly="!sim2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td>{{ $t("energy.sat_sun_off_peak_days") }}</td>
          <td class="bg-green-600 bg-opacity-60">
            {{ $t("energy.off_peak_hours") }}
          </td>
          <td colspan="2" class="bg-green-600 bg-opacity-20">
            {{ $t("energy.all_day") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim2NewValue[5]"
              :readonly="!sim2isEditing"
            />
          </td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim2NewValue[6]"
              :readonly="!sim2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4">{{ $t("energy.usage_over_2000kwh") }}</td>
          <td>{{ $t("energy.price_per_kwh") }}</td>
          <td colspan="2" class="!text-start">
            <div class="flex items-center">
              {{ $t("energy.add") }}
              <input
                type="number"
                v-model.number="sim2NewValue[7]"
                :readonly="!sim2isEditing"
              />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="flex justify-start items-center mt-16">
    <h3 class="text-xl mr-5">
      {{ $t("energy.simple_elec_price_three_stage") }}
    </h3>
    <button
      v-if="!sim3isEditing"
      class="btn btn-sm btn-add mr-3"
      @click.stop.prevent="sim3isEditing = true"
    >
      <font-awesome-icon :icon="['fas', 'pencil-alt']" />{{
        $t("button.start_edit")
      }}
    </button>
    <template v-else>
      <button
        class="btn btn-sm btn-add mr-3"
        @click.prevent="onOk('sim3', sim3NewValue)"
      >
        <font-awesome-icon :icon="['fas', 'save']" />{{ $t("button.confirm") }}
      </button>
      <button
        class="btn btn-sm btn-outline-info mr-3"
        @click.stop.prevent="onCancel('sim3')"
      >
        <font-awesome-icon :icon="['fas', 'times']" />{{ $t("button.cancel") }}
      </button>
    </template>
  </div>
  <div class="w-full overflow-x-auto my-5">
    <table class="min-w-[800px]">
      <thead>
        <tr>
          <th colspan="6" class="bg-teal-800 bg-opacity-20">
            {{ $t("energy.classification") }}
          </th>
          <th class="bg-teal-800 bg-opacity-20">
            {{ $t("energy.summer_months") }}<br />(6/1~9/30)
          </th>
          <th class="bg-teal-800 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}<br />({{
              $t("energy.time_outside_summer_months")
            }})
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.fixed_elec_cost") }}
          </td>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.charged_per_household") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.per_household_month") }}
          </td>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="sim3NewValue[0]"
              :readonly="!sim3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="7">{{ $t("energy.var_elec_cost") }}</td>
          <td rowspan="5">{{ $t("energy.mon_to_friday") }}</td>
          <td class="bg-rose-600 bg-opacity-70">
            {{ $t("energy.peak_hours") }}
          </td>
          <td class="bg-rose-600 bg-opacity-20">
            {{ $t("energy.summer_months") }}
          </td>
          <td class="bg-rose-600 bg-opacity-20">16:00 ~ 22:00</td>
          <td rowspan="6">{{ $t("energy.price_per_kwh") }}</td>
          <td class="bg-rose-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[1]"
              :readonly="!sim3isEditing"
            />
          </td>
          <td class="bg-rose-600 bg-opacity-20">-</td>
        </tr>
        <tr>
          <td rowspan="2" class="bg-yellow-400 bg-opacity-80">
            {{ $t("energy.semi_peak_hours") }}
          </td>
          <td class="bg-yellow-500 bg-opacity-20">
            {{ $t("energy.summer_months") }}
          </td>
          <td class="bg-yellow-500 bg-opacity-20">
            09:00 ~ 16:00<br />22:00~24:00
          </td>
          <td class="bg-yellow-500 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[2]"
              :readonly="!sim3isEditing"
            />
          </td>
          <td class="bg-yellow-500 bg-opacity-20">-</td>
        </tr>
        <tr>
          <td class="bg-yellow-500 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}
          </td>
          <td class="bg-yellow-500 bg-opacity-20">
            06:00 ~ 11:00<br />14:00 ~ 24:00
          </td>
          <td class="bg-yellow-500 bg-opacity-20">-</td>
          <td class="bg-yellow-500 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[3]"
              :readonly="!sim3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="2" class="bg-green-600 bg-opacity-60">
            {{ $t("energy.off_peak_hours") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">
            {{ $t("energy.summer_months") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">00:00 ~ 09:00</td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[4]"
              :readonly="!sim3isEditing"
            />
          </td>
          <td class="bg-green-600 bg-opacity-20">-</td>
        </tr>
        <tr>
          <td class="bg-green-600 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">
            00:00 ~ 06:00<br />11:00 ~ 14:00
          </td>
          <td class="bg-green-600 bg-opacity-20">-</td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[5]"
              :readonly="!sim3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td>{{ $t("energy.sat_sun_off_peak_days") }}</td>
          <td colspan="2" class="bg-green-600 bg-opacity-60">
            {{ $t("energy.off_peak_hours") }}
          </td>
          <td class="bg-green-600 bg-opacity-20">{{ $t("energy.all_day") }}</td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[6]"
              :readonly="!sim3isEditing"
            />
          </td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="sim3NewValue[7]"
              :readonly="!sim3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4">{{ $t("energy.usage_over_2000kwh") }}</td>
          <td>{{ $t("energy.price_per_kwh") }}</td>
          <td colspan="2" class="!text-start">
            <div class="flex items-center">
              {{ $t("energy.add") }}
              <input
                type="number"
                v-model.number="sim3NewValue[8]"
                :readonly="!sim3isEditing"
              />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="scss" scoped>
th,
td {
  text-align: center;
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

input {
  @apply text-lg text-white w-full bg-transparent input input-bordered rounded-md px-3 border-info focus-within:border-info read-only:text-white read-only:border-0 read-only:focus-within:outline-0 read-only:focus:outline-0;
}
</style>
