<template>
  <q-dialog
    persistent
    v-model="show_dialog"
    @before-hide="resetData"
    @keydown="
      (evt) => {
        if (!loading && evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
      <q-card-section class="q-ma-none q-pa-sm">
        <div class="row">
          <div class="col-auto text-h6">
            {{ $t("system setting") }}
          </div>
          <q-space />
          <div>
            <q-btn
              :loading="loading"
              flat
              round
              icon="close"
              color="red"
              v-close-popup
            >
              <q-tooltip>
                {{ $t("close") }}
              </q-tooltip>
            </q-btn>
          </div>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-section style="max-height: 75vh; width: 60vw" class="scroll">
        <q-tabs
          v-model="tab"
          dense
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
          class="bg-grey-2 text-teal"
          @update:model-value="onTabChanged"
        >
          <q-tab
            name="network"
            icon="img:new_icon/network_setting.png"
            :label="$t('network setting')"
            :disable="loading"
          />
          <q-tab
            name="graphics"
            icon="img:new_icon/graphics_setting.png"
            :label="
              function_output_board_attribute
                ? $t('graphics setting')
                : $t('output setting')
            "
            :disable="loading"
          />
          <q-tab
            name="timing_task"
            icon="img:new_icon/timing_task.png"
            :label="$t('timing task')"
            :disable="loading"
          />
          <q-tab
            name="other"
            icon="build"
            :label="$t('other setting')"
            :disable="loading"
          />
          <q-tab
            v-if="function_output_board_attribute"
            name="output_board"
            icon="save"
            :label="$t('output board setting')"
            :disable="loading"
          />
        </q-tabs>
        <q-separator />
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="network" class="_panel">
            <q-card>
              <q-card-section>
                <q-form ref="network_form" @submit="applyNetwork">
                  <q-list>
                    <q-item class="q-pa-none">
                      <q-item-section avatar class="width_5_1">{{
                        $t("auto ip") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-select
                          v-model="auto_ip"
                          :options="[$t('enable'), $t('disable')]"
                          :loading="loading"
                          :disable="loading"
                          @update:model-value="autoIpChanged"
                        />
                      </q-item-section>
                    </q-item>
                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                      <q-item-section avatar class="width_5_1">{{
                        $t("ip address") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          v-model="ip_address"
                          :loading="loading"
                          :disable="auto_ip == $t('enable') || loading"
                          maxlength="15"
                          :rules="[
                            (val) =>
                              (val && val.length > 0) ||
                              $t('Please type something'),
                            (val) =>
                              isIpAddress(val) ||
                              $t('Please input vaild ip address'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                      <q-item-section avatar class="width_5_1">{{
                        $t("gateway") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          :loading="loading"
                          :disable="auto_ip == $t('enable') || loading"
                          v-model="gateway"
                          maxlength="15"
                          :rules="[
                            (val) =>
                              (val && val.length > 0) ||
                              $t('Please type something'),
                            (val) =>
                              isIpAddress(val) ||
                              $t('Please input vaild ip address'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
                      <q-item-section avatar class="width_5_1">{{
                        $t("netmask") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          :loading="loading"
                          :disable="auto_ip == $t('enable') || loading"
                          v-model="netmask"
                          maxlength="15"
                          :rules="[
                            (val) =>
                              (val && val.length > 0) ||
                              $t('Please type something'),
                            (val) =>
                              isIpAddress(val) ||
                              $t('Please input vaild ip address'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item
                      class="q-pa-none"
                      v-if="false && auto_ip != $t('enable')"
                    >
                      <q-item-section avatar class="width_5_1">{{
                        $t("dns server") + "1:"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          :loading="loading"
                          :disable="auto_ip == $t('enable') || loading"
                          v-model="dns1"
                          maxlength="15"
                          :rules="[
                            (val) =>
                              isIpAddress(val) ||
                              val.length == 0 ||
                              $t('Please input vaild ip address'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item
                      class="q-pa-none"
                      v-if="false && auto_ip != $t('enable')"
                    >
                      <q-item-section avatar class="width_5_1">{{
                        $t("dns server") + "2:"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          :loading="loading"
                          :disable="auto_ip == $t('enable') || loading"
                          v-model="dns2"
                          maxlength="15"
                          :rules="[
                            (val) =>
                              isIpAddress(val) ||
                              val.length == 0 ||
                              $t('Please input vaild ip address'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-item-section avatar class="width_5_1">{{
                        $t("mac address") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          v-model="mac_address"
                          :loading="loading"
                          :disable="loading"
                          maxlength="17"
                          :rules="[
                            (val) =>
                              (val && val.length > 0) ||
                              $t('Please type something'),
                            (val) =>
                              isMacAddress(val) ||
                              $t('Please input vaild mac address') +
                                '  (XX:XX:XX:XX:XX:XX)',
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item class="q-pa-none">
                      <q-item-section> </q-item-section>
                      <q-item-section avatar>
                        <q-btn
                          @click="onAdvanceNetwork"
                          outline
                          color="primary"
                          :label="$t('advanced')"
                        ></q-btn>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-form>
              </q-card-section>
            </q-card>
          </q-tab-panel>

          <q-tab-panel name="graphics" class="_panel">
            <q-card class="fit">
              <q-card-section>
                <q-form ref="graphics_form" @submit="applyGraphics">
                  <q-list>
                    <q-item v-if="false">
                      <q-item-section avatar class="width_5_2">{{
                        $t("brightness") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          v-model="brightness"
                          :loading="loading"
                          :disable="loading"
                          type="number"
                          :rules="[
                            (val) =>
                              (val != null &&
                                val != undefined &&
                                val.toString().length > 0) ||
                              $t('Please type something'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item v-if="false">
                      <q-item-section avatar class="width_5_2">{{
                        $t("contrast") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          v-model="contrast"
                          :loading="loading"
                          :disable="loading"
                          type="number"
                          :rules="[
                            (val) =>
                              (val != null &&
                                val != undefined &&
                                val.toString().length > 0) ||
                              $t('Please type something'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item v-if="false">
                      <q-item-section avatar class="width_5_2">{{
                        $t("hue") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-input
                          v-model="hue"
                          :loading="loading"
                          :disable="loading"
                          type="number"
                          :rules="[
                            (val) =>
                              (val != null &&
                                val != undefined &&
                                val.toString().length > 0) ||
                              $t('Please type something'),
                          ]"
                          lazy-rules
                        />
                      </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section avatar class="width_5_2_2">
                        {{ $t("current real resolution") }}:
                      </q-item-section>
                      <q-item-section>
                        {{ $store.state.device_screen_width }}X
                        {{ $store.state.device_screen_height }}@{{
                          $store.state.device_screen_refresh_rate
                        }}
                      </q-item-section>
                      <q-item-section avatar>
                        <q-btn flat round icon="help" color="green">
                          <q-tooltip>{{
                            $t(
                              "depending on the display device, the actual output resolution may differ from the target resolution"
                            )
                          }}</q-tooltip>
                        </q-btn>
                      </q-item-section>
                    </q-item>
                    <q-item v-if="function_mirroring_output">
                      <q-item-section avatar class="width_5_2_2"
                        >{{ $t("mirroring output") }}:</q-item-section
                      >
                      <q-item-section>
                        <q-checkbox
                          v-model="mirroring_output"
                          :loading="loading"
                          :disable="loading"
                          @update:model-value="tooltipMirroringTime"
                        />
                      </q-item-section>
                    </q-item>
                    <q-item v-if="!function_output_board_attribute">
                      <q-item-section avatar class="width_5_2_2"
                        >{{ $t("output type") }}:</q-item-section
                      >
                      <q-item-section>
                        <q-select
                          v-model="device_resolution_type"
                          :loading="loading"
                          :disable="loading"
                          :options="device_resolution_type_options"
                          emit-value
                          map-options
                        />
                      </q-item-section>
                      <q-item-section avatar>
                        <q-btn flat round icon="help" color="green">
                          <q-tooltip>
                            <p>
                              {{
                                $t(
                                  "EDID: list of resolutions recommended by the display device"
                                )
                              }}
                            </p>
                            <p>
                              {{
                                $t(
                                  "FOCEOUTPUT: force resolution output to be specified"
                                )
                              }}
                            </p>
                            <p>
                              {{
                                $t(
                                  "FOCEOUTPUT(CUSTOM): uses the specified timing output"
                                )
                              }}
                            </p>
                          </q-tooltip>
                        </q-btn>
                      </q-item-section>
                    </q-item>
                    <q-item
                      v-if="
                        !function_output_board_attribute &&
                        device_resolution_type.toUpperCase() == 'EDID'
                      "
                    >
                      <q-item-section avatar class="width_5_2_2"
                        >{{ $t("target resolution") }}:</q-item-section
                      >
                      <q-item-section>
                        <q-select
                          v-model="device_resolution"
                          :loading="loading"
                          :disable="loading"
                          :options="device_resolution_options"
                        />
                      </q-item-section>
                    </q-item>
                    <q-item
                      v-if="
                        !function_output_board_attribute &&
                        device_resolution_type.toUpperCase() == 'CVT'
                      "
                    >
                      <q-item-section avatar class="width_5_2_2"
                        >{{ $t("target resolution") }}:</q-item-section
                      >
                      <q-item-section>
                        <q-input
                          v-model="device_resolution"
                          :rules="[checkResolution]"
                          :placeholder="$t('for example: ') + '1920x1080@60'"
                          :hint="$t('for example: ') + '1920x1080@60'"
                        />
                      </q-item-section>
                    </q-item>
                    <q-item
                      v-if="
                        !function_output_board_attribute &&
                        device_resolution_type.toUpperCase() == 'CUSTOM'
                      "
                    >
                      <q-item-section avatar class="width_5_2_2"
                        >{{ $t("custom")
                        }}{{ $t("timing sequence") }}:</q-item-section
                      >
                      <q-item-section>
                        <q-input
                          v-model="device_resolution_timing"
                          :rules="[
                            (val) =>
                              (val && val.length > 0) ||
                              $t('Please type something'),
                          ]"
                          :placeholder="
                            $t('for example: ') +
                            '1920x1080@60 ' +
                            $t('or') +
                            ' 173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync'
                          "
                          :hint="
                            $t('for example: ') +
                            '1920x1080@60 ' +
                            $t('or') +
                            ' 173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync'
                          "
                        />
                      </q-item-section>
                    </q-item>
                    <q-item>
                      <q-item-section avatar class="width_5_2_2">{{
                        $t("device rotate") + ":"
                      }}</q-item-section>
                      <q-item-section>
                        <q-select
                          v-model="device_rotate"
                          :loading="loading"
                          :disable="loading"
                          :options="device_rotate_options"
                          emit-value
                          map-options
                        />
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-form>
              </q-card-section>
            </q-card>
          </q-tab-panel>

          <q-tab-panel name="timing_task" class="_panel">
            <q-card class="fit">
              <q-card-section>
                <q-scroll-area class="full-width" style="height: 55.5vh">
                  <q-list>
                    <div v-for="(item, index) of timing_tasks" :key="index">
                      <q-item clickable>
                        <q-item-section avatar>
                          <q-chip color="teal" text-color="white" icon="alarm">
                            {{ getTaskTypeName(item.task_type) }}
                          </q-chip>
                        </q-item-section>
                        <q-item-section>
                          <q-item-label>{{ item.task_name }}</q-item-label>
                          <q-item-label caption lines="2"
                            ><span class="q-mr-md">{{ item.timing_time }}</span>
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days & e_week_Days.EWeekMonday
                              "
                              >{{ $t("monday") }}</span
                            >
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days & e_week_Days.EWeekTuesday
                              "
                              >{{ $t("tuesday") }}</span
                            >
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days &
                                e_week_Days.EWeekWednesday
                              "
                              >{{ $t("wednesday") }}</span
                            >
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days &
                                e_week_Days.EWeekThursday
                              "
                              >{{ $t("thursday") }}</span
                            >
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days & e_week_Days.EWeekFriday
                              "
                              >{{ $t("friday") }}</span
                            >
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days &
                                e_week_Days.EWeekSaturday
                              "
                              >{{ $t("saturday") }}</span
                            >
                            <span
                              class="q-mx-xs"
                              v-if="
                                item.timing_week_days & e_week_Days.EWeekSunday
                              "
                              >{{ $t("sunday") }}</span
                            >
                          </q-item-label>
                        </q-item-section>
                        <q-item-section avatar>
                          <q-btn
                            @click="deleteTimingTask(item)"
                            icon="delete"
                            color="red"
                            flat
                            round
                          >
                            <q-tooltip>
                              {{ $t("delete") }}{{ $t("timing task") }}
                            </q-tooltip>
                          </q-btn>
                        </q-item-section>
                      </q-item>
                    </div>
                  </q-list>
                </q-scroll-area>
              </q-card-section>
            </q-card>
          </q-tab-panel>

          <q-tab-panel name="other" class="_panel">
            <q-card class="fit">
              <q-scroll-area style="height: 55vh">
                <q-card-section>
                  <q-form ref="other_form" @submit="applyOther">
                    <q-list>
                      <q-item>
                        <q-item-section avatar class="width_5_3">{{
                          $t("output audio card") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="output_audio_card"
                            :loading="loading"
                            :disable="loading"
                            :options="output_audio_card_options"
                            emit-value
                            map-options
                          />
                        </q-item-section>
                      </q-item>
                      <q-item v-if="false">
                        <q-item-section avatar class="width_5_3">{{
                          $t("muted") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="system_muted"
                            :loading="loading"
                            :disable="loading"
                            :options="[$t('on'), $t('off')]"
                          />
                        </q-item-section>
                      </q-item>
                      <q-item v-if="false && system_muted == $t('off')">
                        <q-item-section avatar class="width_5_3">{{
                          $t("volume") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="system_volume"
                            :loading="loading"
                            :disable="loading"
                            max="100"
                            min="0"
                            type="number"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                (parseInt(val) >= 0 && parseInt(val) <= 100) ||
                                $t('number must between') +
                                  '0 ~ 100' +
                                  $t('CN_BERWEEN_SUFFIX'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_3">{{
                          $t("use ntp") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="use_ntp"
                            :loading="loading"
                            :disable="loading"
                            :options="[$t('enable'), $t('disable')]"
                          />
                        </q-item-section>
                      </q-item>
                      <q-item v-if="use_ntp == $t('enable')">
                        <q-item-section avatar class="width_5_3">{{
                          $t("ntp server") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="ntp_server"
                            :loading="loading"
                            :disable="loading"
                            :rules="[
                              (val) =>
                                (val && val.length > 0) ||
                                $t('Please type something'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item v-if="use_ntp == $t('enable')">
                        <q-item-section avatar class="width_5_3">{{
                          $t("ntp sync delay(S)") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="ntp_sync_delay"
                            :loading="loading"
                            :disable="loading"
                            type="number"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item v-if="use_ntp == $t('disable')">
                        <q-item-section avatar class="width_5_3">{{
                          $t("current datetime") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="current_date"
                            :loading="loading"
                            :disable="loading"
                            type="date"
                            :rules="[
                              (val) =>
                                (val && val.length > 0) ||
                                $t('Please type something'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="current_time"
                            :loading="loading"
                            :disable="loading"
                            type="time"
                            :rules="[
                              (val) =>
                                (val && val.length > 0) ||
                                $t('Please type something'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_3">{{
                          $t("time zone") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="time_zone"
                            :loading="loading"
                            :disable="loading"
                            :options="time_zone_options"
                          />
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-form>
                </q-card-section>
              </q-scroll-area>
            </q-card>
          </q-tab-panel>

          <q-tab-panel
            name="output_board"
            class="_panel"
            v-if="function_output_board_attribute"
          >
            <q-card class="fit">
              <q-card-section>
                <q-scroll-area style="height: 55vh">
                  <q-form ref="output_board_form" @submit="applyOutputBoard">
                    <q-list>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("wall row") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="output_board_wall_row"
                            :loading="loading"
                            :disable="loading"
                            type="number"
                            max="11"
                            min="0"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                (parseInt(val) >= 0 && parseInt(val) <= 11) ||
                                $t('number must between') +
                                  '0 ~ 11' +
                                  $t('CN_BERWEEN_SUFFIX'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("wall col") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="output_board_wall_col"
                            :loading="loading"
                            :disable="loading"
                            max="11"
                            min="0"
                            type="number"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                (parseInt(val) >= 0 && parseInt(val) <= 11) ||
                                $t('number must between') +
                                  '0 ~ 11' +
                                  $t('CN_BERWEEN_SUFFIX'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("splicing") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="output_board_splicing"
                            :loading="loading"
                            :disable="loading"
                            :options="[$t('on'), $t('off')]"
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("vertical blanking") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="output_board_vertical_blanking"
                            :loading="loading"
                            :disable="loading"
                            type="number"
                            max="255"
                            min="0"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                (parseInt(val) >= 0 && parseInt(val) <= 255) ||
                                $t('number must between') +
                                  '0 ~ 255' +
                                  $t('CN_BERWEEN_SUFFIX'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("horizon blanking") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="output_board_horizon_blanking"
                            :loading="loading"
                            :disable="loading"
                            max="255"
                            min="0"
                            type="number"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                (parseInt(val) >= 0 && parseInt(val) <= 255) ||
                                $t('number must between') +
                                  '0 ~ 255' +
                                  $t('CN_BERWEEN_SUFFIX'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("rotate") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="output_board_rotate"
                            :loading="loading"
                            :disable="loading"
                            :options="output_board_rotate_options"
                            emit-value
                            map-options
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("volume") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-input
                            v-model="output_board_volume"
                            :loading="loading"
                            :disable="loading"
                            type="number"
                            max="100"
                            min="0"
                            :rules="[
                              (val) =>
                                (val != null &&
                                  val != undefined &&
                                  val.toString().length > 0) ||
                                $t('Please type something'),
                              (val) =>
                                (parseInt(val) >= 0 && parseInt(val) <= 100) ||
                                $t('number must between') +
                                  '0 ~ 100' +
                                  $t('CN_BERWEEN_SUFFIX'),
                            ]"
                            lazy-rules
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("mute") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="output_board_mute"
                            :loading="loading"
                            :disable="loading"
                            :options="[$t('on'), $t('off')]"
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section avatar class="width_5_4">{{
                          $t("output board resolution") + ":"
                        }}</q-item-section>
                        <q-item-section>
                          <q-select
                            v-model="output_board_resolution"
                            :loading="loading"
                            :disable="loading"
                            :options="output_board_resolution_options"
                          />
                        </q-item-section>
                      </q-item>
                      <q-item>
                        <q-item-section>
                          <q-btn
                            class="q-mx-xl"
                            :label="$t('restore output board')"
                            @click="restoreOutputBoard"
                          ></q-btn>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-form>
                </q-scroll-area>
              </q-card-section>
            </q-card>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn
          :loading="loading"
          flat
          no-caps
          :label="tab == 'timing_task' ? $t('exit') : $t('revert and exit')"
          color="primary"
          v-close-popup
        />
        <q-btn
          v-if="tab != 'timing_task'"
          :loading="loading"
          flat
          no-caps
          :label="$t('revert')"
          color="primary"
          @click="refresh_all"
        />
        <q-btn
          v-if="tab != 'timing_task'"
          :loading="loading"
          flat
          no-caps
          :label="$t('apply')"
          color="primary"
          @click="apply"
        />
        <q-btn
          v-else
          :loading="loading"
          flat
          no-caps
          :label="$t('add timing task')"
          color="primary"
          @click="addTimingTask"
        />
        <q-btn
          v-if="false"
          :loading="loading"
          flat
          no-caps
          :label="$t('apply and exit')"
          color="primary"
          @click="applyAndExit"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

  <timing-task-dialog ref="timing_task_dialog" />
  <systen-setting-advanced-network-dialog
    ref="system_setting_advanced_network_dialog"
  />
</template>

<style scoped>
.width_5_1 {
  width: 20%;
}

.width_5_2 {
  width: 10%;
}

.width_5_2_2 {
  width: 18%;
}

.width_5_3 {
  width: 20%;
}

.width_5_4 {
  width: 20%;
}

._panel {
  padding: 3px;
  height: 60vh;
}
</style>

<script lang="ts">
import { defineComponent, ref, Ref, watch, computed } from "vue";
import { useStore } from "src/store";
import { useQuasar, SessionStorage } from "quasar";

import TimingTaskDialog from "src/components/TimingTaskDialog.vue";

import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import { HttpProtocol } from "src/entities/HttpProtocol";
import { date } from "quasar";
import { Protocol } from "src/entities/WSProtocol";
import TimingTaskEntity, {
  TimingTaskType,
} from "src/entities/TimingTaskEntity";
import { EWeekDays } from "src/entities/EWeekDays";

import SystenSettingAdvancedNetworkDialog from "src/components/SystenSettingAdvancedNetworkDialog.vue";
import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";

const _time_zones = [
  "UTC-12(Central Pacific)",
  "UTC-11(Central Pacific)",
  "UTC-10(Honolulu of USA)",
  "UTC-9(Alaska of USA)",
  "UTC-8(California of USA)",
  "UTC-7(Phoenix of USA, Arizona of USA)",
  "UTC-6(Chicago of USA, Mexico)",
  "UTC-5(New York of USA)",
  "UTC-4(Republic of Chile)",
  "UTC-3(Brazil, Argentina)",
  "UTC-2(Mid Atlantic)",
  "UTC-1(West African continent)",
  "UTC(England, Portugal)",
  "UTC+1(Spain, France, Germany, ...)",
  "UTC+2(Turkey, South Africa, Rome, Egypt, ...)",
  "UTC+3(Moscow of Russia, Iran)",
  "UTC+4(The united Arab emirates)",
  "UTC+5(Pakistan, India)",
  "UTC+6(Bangladesh, Myanmar, Xinjiang Autonomous Region of China)",
  "UTC+7(Thailand, Malaysia, Singapore)",
  "UTC+8(Beijing of China, Philippines)",
  "UTC+9(Japan)",
  "UTC+10(Vladivostok of Russia, Guam, Australia)",
  "UTC+11(Solomon Islands)",
  "UTC+12(New Zealand)",
];

export default defineComponent({
  name: "ComponentSystemSettingDialog",
  components: { TimingTaskDialog, SystenSettingAdvancedNetworkDialog },

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let loading = ref(false);

    const timing_task_dialog: Ref<any> = ref(null);
    const system_setting_advanced_network_dialog: Ref<any> = ref(null);

    const function_mirroring_output = ref(
      ($store.state.device_attribute &
        Protocol.EDeviceAttribute.MirroringOutput) !=
        0
    );

    let tab = ref("network");

    let auto_ip = ref($t.t("enable"));
    let ip_address = ref("127.0.0.1");
    let gateway = ref("127.0.0.1");
    let netmask = ref("127.0.0.1");
    let dns1 = ref();
    let dns2 = ref();
    let mac_address = ref("11:22:33:44:55:66");
    let ip_address_list: AdvancedIpAddressEntity[] = [];
    let host_name = "player";

    let brightness = ref(0);
    let contrast = ref(0);
    let hue = ref(0);

    const mirroring_output = ref(false);

    const function_output_board_attribute = ref(
      ($store.state.device_attribute & Protocol.EDeviceAttribute.OutputBoard) !=
        0
    );

    watch(
      () => $store.state.device_attribute,
      (value) => {
        function_output_board_attribute.value =
          (value & Protocol.EDeviceAttribute.OutputBoard) != 0;

        function_mirroring_output.value =
          ($store.state.device_attribute &
            Protocol.EDeviceAttribute.MirroringOutput) !=
          0;
      }
    );

    let device_resolution = ref("");
    let device_resolution_options: Ref<string[]> = ref([]);
    let device_rotate = ref(0);
    let device_rotate_options = ref([
      {
        label: "0°",
        value: 0,
      },
      {
        label: "90°",
        value: 1,
      },
      {
        label: "180°",
        value: 2,
      },
      {
        label: "270°",
        value: 3,
      },
      // {
      //   label: $t.t("horizontal flipped"),
      //   value: 4,
      // },
      // {
      //   label: $t.t("horizontal flipped") + "90°",
      //   value: 5,
      // },
      // {
      //   label: $t.t("horizontal flipped") + "180°",
      //   value: 6,
      // },
      // {
      //   label: $t.t("horizontal flipped") + "270°",
      //   value: 7,
      // },
    ]);
    let device_resolution_type = ref("EDID");
    let device_resolution_type_options = ref([
      { label: "EDID", value: "EDID" },
      { label: $t.t("force output") /*+ "(CVT)"*/, value: "CVT" },
      {
        label: $t.t("force output") + "(" + $t.t("custom") + ")",
        value: "CUSTOM",
      },
    ]);
    let device_resolution_timing = ref("");

    let output_board_resolution = ref("");
    let output_board_resolution_options = ref(["1", "2", "3"]);

    let system_muted = ref($t.t("off"));
    let system_volume = ref(100);
    let output_audio_card_options = ref([
      { label: $t.t("all"), value: "all" },
      { label: "3.5mm", value: "3.5mm" },
      { label: "HDMI1", value: "HDMI1" },
    ]);
    let old_output_audio_card = "";
    let output_audio_card = ref(output_audio_card_options.value[0].value);
    let use_ntp = ref($t.t("enable"));
    let ntp_server = ref("");
    let ntp_sync_delay = ref(180);
    let current_date = ref("");
    let current_time = ref("");
    let time_zone = ref("");
    let time_zone_options: Ref<string[]> = ref([]);
    for (const item of _time_zones) {
      time_zone_options.value.push($t.t(item));
    }

    let network_form: Ref<any> = ref(null);
    let other_form: Ref<any> = ref(null);
    let graphics_form: Ref<any> = ref(null);
    let output_board_form: Ref<any> = ref(null);

    let output_board_wall_row = ref(2);
    let output_board_wall_col = ref(2);
    let output_board_splicing = ref($t.t("on"));
    let output_board_vertical_blanking = ref(0);
    let output_board_horizon_blanking = ref(0);
    let output_board_rotate = ref(0);
    const output_board_rotate_options = ref([
      { label: "0°", value: 0 },
      { label: "180°", value: 1 },
    ]);
    let output_board_volume = ref(100);
    let output_board_mute = ref($t.t("on"));

    const timing_tasks: Ref<TimingTaskEntity[]> = ref([]);

    const refresh_network = () => {
      const config = GlobalData.getInstance()?.applicationConfig;
      if (config) {
        auto_ip.value =
          config.auto_ip_address != "0" ? $t.t("enable") : $t.t("disable");
        gateway.value = config.gateway || "192.168.1.1";
        netmask.value = config.subnet_mask || "255.255.0.0";
        mac_address.value = config.mac_address || "5A:30:C2:5A:54:Bf";
        ip_address.value = $store.state.device_ip_address || "192.168.1.168";
        dns1.value = config.dns1 || "";
        dns2.value = config.dns2 || "";
        ip_address_list = config.ip_list || [];
      }
    };

    const refresh_graphics = () => {
      const config = GlobalData.getInstance()?.applicationConfig;
      if (config) {
        setTimeout(async () => {
          const support_resolutions = await GlobalData.getInstance()
            .getCurrentClient()
            ?.getSupportResolutions();
          if (support_resolutions) {
            device_resolution_options.value = [];
            for (const item of support_resolutions.device_edid_support_resolutions) {
              device_resolution_options.value.push(item);
            }
            device_resolution_type.value =
              support_resolutions.target_resolution.type;
            device_resolution.value =
              support_resolutions.target_resolution.name;
            device_resolution_timing.value =
              support_resolutions.target_resolution.timing;
          }

          mirroring_output.value = config.device_hdmi_output_count == 2;
        }, 1);

        brightness.value = parseInt(config.graphics_brightness.toString());
        contrast.value = parseInt(config.graphics_contrast.toString());
        hue.value = parseInt(config.graphics_hue.toString());

        device_rotate.value = parseInt(config.device_rotate.toString());
      }
    };

    const refresh_other = () => {
      const config = GlobalData.getInstance()?.applicationConfig;
      if (config) {
        output_audio_card.value = config.output_audio_card;
        old_output_audio_card = output_audio_card.value;
        let muted = parseInt(config.system_muted.toString());
        if (isNaN(muted)) {
          muted = 0;
        }
        system_muted.value = muted ? $t.t("on") : $t.t("off");
        system_volume.value = config.system_volume;

        use_ntp.value =
          config.use_ntp != "0" ? $t.t("enable") : $t.t("disable");
        ntp_server.value = config.ntp_server;
        ntp_sync_delay.value = parseInt(config.ntp_sync_delay);
        if (isNaN(ntp_sync_delay.value)) {
          ntp_sync_delay.value = 180;
        }
        try {
          time_zone.value = time_zone_options.value[config.time_zone];
        } catch (e) {
          time_zone.value = time_zone_options.value[0];
        }

        const timeStamp = Date.now();
        current_date.value = date.formatDate(timeStamp, "YYYY-MM-DD");
        current_time.value = date.formatDate(timeStamp, "HH:mm:ss");
      }
    };

    const refresh_output_board = async () => {
      const settings = await GlobalData.getInstance()
        .getCurrentClient()
        ?.getOutputBoardSetting();
      if (settings) {
        output_board_wall_row.value = settings.wall_row;
        output_board_wall_col.value = settings.wall_col;
        output_board_splicing.value = settings.splicing
          ? $t.t("on")
          : $t.t("off");
        output_board_vertical_blanking.value = settings.vertical_blanking;
        output_board_horizon_blanking.value = settings.horizon_blanking;
        output_board_rotate.value = settings.rotate;
        output_board_volume.value = settings.volume;
        output_board_mute.value = settings.mute ? $t.t("on") : $t.t("off");

        {
          output_board_resolution_options.value = [];
          for (const item of Object.keys(
            settings.output_board_support_resolutions
          ).sort()) {
            output_board_resolution_options.value.push(
              (settings.output_board_support_resolutions as any)[item]
            );
          }

          const val = output_board_resolution_options.value.find(
            (element) =>
              element && element == settings.current_output_board_resolution
          );
          output_board_resolution.value =
            val ?? output_board_resolution_options.value[0];
        }
      }
    };

    const refresh_all = () => {
      refresh_network();
      refresh_graphics();
      refresh_other();
      refresh_output_board();
    };

    const wait_for = async (delay_ms: number) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(null);
        }, delay_ms);
      });
    };

    const applyNetwork = async () => {
      loading.value = true;
      const request = new Protocol.SetSystemNetworkRequestEntity();
      request.auto_ip = auto_ip.value == $t.t("enable");
      request.ip_address = ip_address.value;
      request.gateway = gateway.value;
      request.net_mask = netmask.value;
      request.mac_address = mac_address.value;
      request.dns1 = dns1.value ?? "";
      request.dns2 = dns2.value ?? "";
      request.ip_address_list = ip_address_list ?? [];
      request.host_name = host_name ?? "";

      let success = false;
      try {
        await GlobalData.getInstance()
          .getCurrentClient()
          ?.setSystemNetwork(request);
        setTimeout(() => {
          if (request.ip_address != $store.state.device_ip_address) {
            setTimeout(() => {
              SessionStorage.clear();
              if (
                window.location.hostname.toLowerCase() == "192.168.1.1" ||
                window.location.hostname.toLowerCase() == "localhost"
              ) {
                window.location.reload();
              } else {
                window.location.hostname = request.ip_address;
              }
            }, 2500);
          }
        }, 1000 * 10);
        success = true;
      } catch {}
      $q.notify({
        color: success ? "positive" : "negative",
        icon: success ? "done" : "warning",
        message:
          $t.t("set system network") +
          (success ? $t.t("success") : $t.t("fail")) +
          "!",
        position: "top",
        timeout: 2500,
      });
      loading.value = false;
    };

    const applyGraphics = async () => {
      const _apply_graphics = async () => {
        loading.value = true;
        const request = new Protocol.SetSystemGraphicsRequestEntity();
        request.brightness = parseInt(brightness.value.toString());
        request.contrast = parseInt(contrast.value.toString());
        request.hue = parseInt(hue.value.toString());
        request.target_resolution_type = device_resolution_type.value;
        request.device_resolution_name = device_resolution.value;
        request.target_resolution_timing = device_resolution_timing.value;
        request.rotate = parseInt(device_rotate.value.toString());
        request.hdmi_output_count = mirroring_output.value ? 2 : 1;
        if (!function_mirroring_output.value) {
          request.hdmi_output_count = 1;
        }

        let success = false;
        try {
          const response = await GlobalData.getInstance()
            .getCurrentClient()
            ?.setSystemGraphics(request);
          if (response && response.success) {
            success = true;
          }
        } catch {}
        $q.notify({
          color: success ? "positive" : "negative",
          icon: success ? "done" : "warning",
          message:
            $t.t("set system graphics") +
            (success ? $t.t("success") : $t.t("fail")) +
            "!",
          position: "top",
          timeout: 2500,
        });
        loading.value = false;
      };
      if (device_resolution_type.value?.toUpperCase() == "CUSTOM") {
        $q.dialog({
          title: $t.t("use custom output"),
          message:
            $t.t("are you sure to use the timing force output") +
            "?" +
            "\n" +
            $t.t("the screen output may be abnormal") +
            "!",
          cancel: true,
          persistent: true,
        }).onOk(_apply_graphics);
      } else {
        _apply_graphics();
      }
    };

    const applyOther = async () => {
      loading.value = true;

      const request = new Protocol.SetSystemOtherRequestEntity();

      request.system_volume = parseInt(system_volume.value.toString());
      request.system_muted = system_muted.value == $t.t("on");
      request.output_audio_card = output_audio_card.value;
      request.use_ntp = use_ntp.value == $t.t("enable");
      request.ntp_sync_delay = parseInt(ntp_sync_delay.value.toString());
      request.ntp_server = ntp_server.value;
      request.time_zone = time_zone_options.value.findIndex(
        (element) => element && element == time_zone.value
      );
      if (request.time_zone < 0) {
        request.time_zone =
          GlobalData.getInstance().applicationConfig?.time_zone ?? 21;
      }
      request.datetime = current_date.value + " " + current_time.value;

      let success = false;
      try {
        await GlobalData.getInstance()
          .getCurrentClient()
          ?.setSystemOther(request);
        success = true;
        if (old_output_audio_card != request.output_audio_card) {
          try {
            $q.dialog({
              title: $t.t("Confirm"),
              message:
                $t.t(
                  "the sound card takes effect only after it is restarted. Restart the system"
                ) + "?",
              cancel: true,
              persistent: true,
            }).onOk(async () => {
              await GlobalData.getInstance()
                .getCurrentClient()
                ?.restartDevice(1000 * 3);
              $q.notify({
                color: "positive",
                icon: "done",
                message:
                  $t.t("restart command send") +
                  $t.t("success") +
                  "!" +
                  $t.t("the system will reboot after the setup is complete") +
                  "!",
                position: "top",
                timeout: 2500,
              });
            });
          } catch {}
        }
      } catch {}
      $q.notify({
        color: success ? "positive" : "negative",
        icon: success ? "done" : "warning",
        message:
          $t.t("set system other") +
          (success ? $t.t("success") : $t.t("fail")) +
          "!",
        position: "top",
        timeout: 2500,
      });
      old_output_audio_card = request.output_audio_card;
      loading.value = false;
    };

    const applyOutputBoard = async () => {
      loading.value = true;
      const request = new Protocol.SetOutputBoardSettingRequestEntity();
      request.wall_col = parseInt(output_board_wall_col.value.toString());
      request.wall_row = parseInt(output_board_wall_row.value.toString());
      request.splicing = output_board_splicing.value == $t.t("on");
      request.vertical_blanking = parseInt(
        output_board_vertical_blanking.value.toString()
      );
      request.horizon_blanking = parseInt(
        output_board_horizon_blanking.value.toString()
      );
      request.rotate = parseInt(output_board_rotate.value.toString());
      request.volume = parseInt(output_board_volume.value.toString());
      request.mute = output_board_mute.value == $t.t("on");
      request.output_board_resolution = output_board_resolution.value;

      let success = false;
      try {
        await GlobalData.getInstance()
          .getCurrentClient()
          ?.setOutputBoardSetting(request);
        success = true;
      } catch {}
      $q.notify({
        color: success ? "positive" : "negative",
        icon: success ? "done" : "warning",
        message:
          $t.t("set output board") +
          (success ? $t.t("success") : $t.t("fail")) +
          "!",
        position: "top",
        timeout: 2500,
      });
      loading.value = false;
    };

    const apply = () => {
      switch (tab.value) {
        case "network":
          network_form.value.submit();
          break;
        case "graphics":
          graphics_form.value.submit();
          break;
        case "other":
          other_form.value.submit();

          break;
        case "output_board":
          output_board_form.value.submit();
          break;
      }
    };
    const restoreOutputBoard = () => {
      GlobalData.getInstance().getCurrentClient()?.restoreOutputBoard();
    };

    const refreshTimingTasks = async () => {
      try {
        const response = await GlobalData.getInstance()
          .getCurrentClient()
          ?.getTimingTasks();
        if (response) {
          timing_tasks.value = response.tasks;
        }
      } catch (e) {
        console.error(e);
      }
    };

    return {
      show_dialog,
      e_week_Days: ref(EWeekDays),
      timing_task_dialog,
      system_setting_advanced_network_dialog,
      timing_tasks,
      function_mirroring_output,
      function_output_board_attribute,
      loading,
      tab,
      auto_ip,
      ip_address,
      gateway,
      netmask,
      dns1,
      dns2,
      mac_address,
      brightness,
      contrast,
      hue,
      device_rotate,
      device_rotate_options,
      device_resolution,
      device_resolution_options,
      device_resolution_type,
      device_resolution_type_options,
      device_resolution_timing,
      output_board_resolution,
      output_board_resolution_options,
      output_audio_card,
      output_audio_card_options,
      system_muted,
      system_volume,
      use_ntp,
      ntp_server,
      ntp_sync_delay,
      current_date,
      current_time,
      time_zone,
      time_zone_options,
      output_board_mute,
      output_board_volume,
      output_board_rotate_options,
      output_board_rotate,
      output_board_horizon_blanking,
      output_board_vertical_blanking,
      output_board_splicing,
      output_board_wall_col,
      output_board_wall_row,
      network_form,
      other_form,
      graphics_form,
      output_board_form,
      mirroring_output,
      refresh_all,
      apply,
      restoreOutputBoard,
      applyNetwork,
      applyGraphics,
      applyOther,
      applyOutputBoard,
      loga(a: any) {
        console.log(a);
      },
      showDialog() {
        show_dialog.value = true;

        GlobalData.getInstance()
          .getCurrentClient()
          ?.getSystemNetworkInfo()
          .then((response) => {
            if (response) {
              host_name = (response.host_name ?? "player").trim();
            }
          });

        refresh_all();
      },
      resetData() {
        loading.value = false;
        tab.value = "network";
      },
      async applyAndExit() {
        await apply();
        show_dialog.value = false;
      },
      getTaskTypeName(index: number) {
        let result = $t.t("unknow");
        switch (index) {
          case TimingTaskType.TaskPowerOn:
            result = $t.t("power on");
            break;
          case TimingTaskType.TaskPowerOff:
            result = $t.t("power off");
            break;
        }
        return result;
      },
      async addTimingTask() {
        if (timing_task_dialog.value) {
          let success = false;
          try {
            const result = await timing_task_dialog.value.showDialogAsync();
            if (result) {
              const request_param = new TimingTaskEntity();
              for (const rk of Object.keys(result)) {
                if ((<any>request_param)[rk] !== undefined) {
                  (<any>request_param)[rk] = result[rk];
                }
              }
              const response = await GlobalData.getInstance()
                .getCurrentClient()
                ?.addTimingTask(request_param);
              if (response && response.success) {
                request_param.uuid = response.uuid;
                timing_tasks.value.push(request_param);
                success = true;
              }
            } else {
              // 对话框点击了确定但是返回的数据是空的
              console.error("addTimingTask result is null!");
              return;
            }
          } catch {
            // 对话框点击了取消
            return;
          }

          $q.notify({
            color: success ? "positive" : "negative",
            icon: success ? "done" : "warning",
            message:
              $t.t("add") +
              $t.t("timing task") +
              (success ? $t.t("success") : $t.t("fail")) +
              "!",
            position: "top",
            timeout: 2500,
          });
        }
      },
      async deleteTimingTask(item: TimingTaskEntity) {
        let success = false;
        if (item) {
          try {
            const response = await GlobalData.getInstance()
              .getCurrentClient()
              ?.deleteTimingTask(item.uuid);
            if (response && response.success) {
              const index = timing_tasks.value.findIndex(
                (element) => element && element.uuid == item.uuid
              );
              if (index != -1) {
                timing_tasks.value.splice(index, 1);
              }
              success = true;
            }
          } catch (e) {
            console.error(e);
          }
        }
        $q.notify({
          color: success ? "positive" : "negative",
          icon: success ? "done" : "warning",
          message:
            $t.t("delete") +
            $t.t("timing task") +
            (success ? $t.t("success") : $t.t("fail")) +
            "!",
          position: "top",
          timeout: 2500,
        });
      },
      onTabChanged(value: string) {
        switch (value) {
          case "timing_task":
            refreshTimingTasks();
            break;
        }
      },
      async autoIpChanged(value: string) {
        const enabled = value == $t.t("enable");
        let flag = false;
        if (enabled) {
          try {
            const info = await GlobalData.getInstance()
              .getCurrentClient()
              ?.getSystemNetworkInfo();
            if (info) {
              gateway.value = info.gateway || "192.168.1.1";
              netmask.value = info.net_mask || "255.255.0.0";
              dns1.value =
                GlobalData.getInstance()?.applicationConfig?.dns1 || "";
              dns2.value =
                GlobalData.getInstance()?.applicationConfig?.dns2 || "";
              mac_address.value = info.mac_address || "5A:30:C2:5A:54:Bf";
              ip_address.value = info.ip_address || "192.168.1.168";
              flag = true;
            }
          } catch {}
        }

        if (!flag) {
          const config = GlobalData.getInstance()?.applicationConfig;
          if (config) {
            gateway.value = config.gateway;
            netmask.value = config.subnet_mask;
            mac_address.value = config.mac_address;
            ip_address.value = config.ip_address;
          }
        }
      },
      tooltipMirroringTime(value: boolean) {
        if (value) {
          $q.dialog({
            title: $t.t("info"),
            message: $t.t(
              "after mirroring output is enabled, the second output may need to wait 1 or 2 minutes before the screen appears!"
            ),
            persistent: true,
            ok: {
              label: $t.t("i have known"),
              flat: true,
            },
          });
        }
      },
      isIpAddress(str: string) {
        return (
          str == "localhost" ||
          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
            str
          )
        );
      },
      isMacAddress(str: string) {
        return /([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}/.test(str);
      },
      checkResolution(str: string) {
        const reg = /([0-9]{1,5})[x|X]([0-9]{1,5}@[0-9]{1,3}$)/;
        return (
          reg.test(str) ||
          $t.t("the resolution format is incorrect,") +
            $t.t("for example: ") +
            "1920x1080@60"
        );
      },
      async onAdvanceNetwork() {
        const result =
          await system_setting_advanced_network_dialog.value.showDialogAsync(
            GlobalData.getInstance()?.applicationConfig?.ip_list
          );
        if (result) {
          if (Array.isArray(result.ip_address_list)) {
            ip_address_list = result.ip_address_list;
          } else {
            ip_address_list =
              GlobalData.getInstance()?.applicationConfig?.ip_list || [];
          }
          if (typeof result.host_name == "string") {
            host_name = result.host_name.trim();
          } else {
            host_name = "player";
          }
        }
      },
    };
  },
});
</script>
