<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 { stand2, stand3, getData } = inject("time_elec");
const stand2isEditing = ref(false);
const stand3isEditing = ref(false);
const stand2NewValue = ref([]);
const stand3NewValue = 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, "#immediate_demand_add_item");
  }
};

const onCancel = (sheet) => {
  if (sheet === "stand2") {
    stand2isEditing.value = false;
    stand2NewValue.value = [...stand2.value];
  } else if (sheet === "stand3") {
    stand3isEditing.value = false;
    stand3NewValue.value = [...stand3.value];
  }
};

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

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

<template>
  <div class="flex justify-start items-center my-5">
    <h3 class="text-xl mr-5">
      {{ $t("energy.standard_time_of_use_tariff_2_stage") }}
    </h3>
    <button
      v-if="!stand2isEditing"
      class="btn btn-sm btn-add mr-3"
      @click.stop.prevent="stand2isEditing = 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('stand2', stand2NewValue)"
      >
        <font-awesome-icon :icon="['fas', 'save']" />{{ $t("button.confirm") }}
      </button>
      <button
        class="btn btn-sm btn-outline-info mr-3"
        @click.stop.prevent="onCancel('stand2')"
      >
        <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 rowspan="6" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.fixed_elec_cost") }}
          </td>
          <td colspan="2" rowspan="2" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.charged_per_household") }}
          </td>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.single_phase") }}
          </td>
          <td rowspan="2" 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="stand2NewValue[0]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.three_phase") }}
          </td>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[1]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.frequent_contract") }}
          </td>
          <td rowspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.per_kw_per_month") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[2]"
              :readonly="!stand2isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[3]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.non_summer_contract") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">-</td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[4]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.saturday_semi_peak_contract") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[5]"
              :readonly="!stand2isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[6]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.off_peak_contract") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[7]"
              :readonly="!stand2isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand2NewValue[8]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="9">{{ $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="9">{{ $t("energy.price_per_kwh") }}</td>
          <td class="bg-rose-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand2NewValue[9]"
              :readonly="!stand2isEditing"
            />
          </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="stand2NewValue[10]"
              :readonly="!stand2isEditing"
            />
          </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="stand2NewValue[11]"
              :readonly="!stand2isEditing"
            />
          </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="stand2NewValue[12]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="4">{{ $t("energy.saturday") }}</td>
          <td rowspan="2" class="bg-yellow-400 bg-opacity-80">
            {{ $t("energy.semi_peak_hours") }}
          </td>
          <td class="bg-yellow-400 bg-opacity-20">
            {{ $t("energy.summer_months") }}
          </td>
          <td class="bg-yellow-400 bg-opacity-20">09:00 ~ 24:00</td>
          <td class="bg-yellow-400 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand2NewValue[13]"
              :readonly="!stand2isEditing"
            />
          </td>
          <td class="bg-yellow-400 bg-opacity-20">-</td>
        </tr>
        <tr>
          <td class="bg-yellow-400 bg-opacity-20">
            {{ $t("energy.non_summer_months") }}
          </td>
          <td class="bg-yellow-400 bg-opacity-20">
            06:00 ~ 11:00<br />
            14:00 ~ 24:00
          </td>
          <td class="bg-yellow-400 bg-opacity-20">-</td>
          <td class="bg-yellow-400 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand2NewValue[14]"
              :readonly="!stand2isEditing"
            />
          </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="stand2NewValue[15]"
              :readonly="!stand2isEditing"
            />
          </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="stand2NewValue[16]"
              :readonly="!stand2isEditing"
            />
          </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="stand2NewValue[17]"
              :readonly="!stand2isEditing"
            />
          </td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand2NewValue[18]"
              :readonly="!stand2isEditing"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="flex justify-start items-center mt-14">
    <h3 class="text-xl mr-5">
      {{ $t("energy.standard_time_of_use_tariff_3_stage") }}
    </h3>
    <button
      v-if="!stand3isEditing"
      class="btn btn-sm btn-add mr-3"
      @click.stop.prevent="stand3isEditing = 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('stand3', stand3NewValue)"
      >
        <font-awesome-icon :icon="['fas', 'save']" />{{ $t("button.confirm") }}
      </button>
      <button
        class="btn btn-sm btn-outline-info mr-3"
        @click.stop.prevent="onCancel('stand3')"
      >
        <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 rowspan="6" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.fixed_elec_cost") }}
          </td>
          <td colspan="2" rowspan="2" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.charged_per_household") }}
          </td>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.single_phase") }}
          </td>
          <td rowspan="2" 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="stand3NewValue[0]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.three_phase") }}
          </td>
          <td colspan="2" class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[1]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.frequent_contract") }}
          </td>
          <td rowspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.per_kw_per_month") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[2]"
              :readonly="!stand3isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[3]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.non_summer_contract") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[4]"
              :readonly="!stand3isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[5]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.saturday_semi_peak_contract") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[6]"
              :readonly="!stand3isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[7]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4" class="bg-teal-800 bg-opacity-40">
            {{ $t("energy.off_peak_contract") }}
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[8]"
              :readonly="!stand3isEditing"
            />
          </td>
          <td class="bg-teal-800 bg-opacity-40">
            <input
              type="number"
              v-model.number="stand3NewValue[9]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="10">{{ $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="10">{{ $t("energy.price_per_kwh") }}</td>
          <td class="bg-rose-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand3NewValue[10]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[11]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[12]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[13]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[14]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="4">{{ $t("energy.saturday") }}</td>
          <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 ~ 24:00</td>
          <td class="bg-yellow-500 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand3NewValue[15]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[16]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[17]"
              :readonly="!stand3isEditing"
            />
          </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="stand3NewValue[18]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
        <tr>
          <td>{{ $t("energy.sunday_and_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="stand3NewValue[19]"
              :readonly="!stand3isEditing"
            />
          </td>
          <td class="bg-green-600 bg-opacity-20">
            <input
              type="number"
              v-model.number="stand3NewValue[20]"
              :readonly="!stand3isEditing"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="scss" scoped>
th,
td {
  text-align: center;
  border: 1px solid #ddd;
  padding: 0.5rem 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>
