<template>
  <div class="printer-setting-page">
    <van-nav-bar title="打印设置" left-arrow @click-left="onBack" />

    <!-- 连接状态 -->
    <van-cell-group inset title="连接状态">
      <van-cell center>
        <template #title>
          <div class="status-row">
            <span class="status-dot" :class="statusClass"></span>
            <span class="status-text">{{ statusText }}</span>
          </div>
        </template>
        <template #value>
          <van-button
            v-if="status === 'retry_stopped'"
            size="small"
            type="primary"
            plain
            @click="manualReconnect">
            重新连接
          </van-button>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 默认打印机开关 -->
    <van-cell-group inset title="默认打印机">
      <van-cell center title="使用默认打印机">
        <template #right-icon>
          <van-switch :model-value="useDefault" @update:model-value="onUseDefaultChange" />
        </template>
      </van-cell>
      <van-cell :border="false">
        <div class="tip-text">
          开启后打印时不再弹出选择框，直接使用下方选中的打印机
        </div>
      </van-cell>
    </van-cell-group>

    <!-- 打印机列表 -->
    <van-cell-group inset title="打印机">
      <template v-if="printers.length === 0">
        <van-cell :border="false">
          <div class="empty-text">{{ status === 'connected' ? '未检测到打印机' : '连接后显示打印机列表' }}</div>
        </van-cell>
      </template>
      <van-radio-group v-else :model-value="selectedPrinter" @update:model-value="onSelectPrinter">
        <van-cell
          v-for="p in printers"
          :key="p.name"
          clickable
          :title="p.displayName"
          :label="p.isDefault ? '系统默认 · ' + p.statusText : p.statusText"
          @click="onSelectPrinter(p.name)">
          <template #right-icon>
            <van-radio :name="p.name" />
          </template>
        </van-cell>
      </van-radio-group>
    </van-cell-group>
  </div>
</template>

<script setup>
  import {computed, ref} from 'vue';
  import {useRouter} from 'vue-router';
  import {showToast} from 'vant';
  import {usePrinterClient} from '../libs/usePrinterClient';

  const router = useRouter();
  const {status, printers, selectedPrinter, client} = usePrinterClient();

  const USE_DEFAULT_KEY = 'hiprint-use-default-printer';
  const useDefault = ref(localStorage.getItem(USE_DEFAULT_KEY) === '1');

  function onUseDefaultChange(val) {
    useDefault.value = val;
    try {
      localStorage.setItem(USE_DEFAULT_KEY, val ? '1' : '0');
    } catch {}
  }

  function onSelectPrinter(name) {
    selectedPrinter.value = name;
  }

  const statusClass = computed(
    () =>
      ({
        connected: 'dot-success',
        connecting: 'dot-warning',
        disconnected: 'dot-danger',
        retry_stopped: 'dot-danger',
      })[status.value]
  );

  const statusText = computed(
    () =>
      ({
        connected: '已连接',
        connecting: '连接中',
        disconnected: '未连接',
        retry_stopped: '连接失败，请手动重连',
      })[status.value]
  );

  function manualReconnect() {
    client.manualReconnect();
    showToast('正在重新连接...');
  }

  function onBack() {
    router.back();
  }
</script>

<style scoped>
  .printer-setting-page {
    min-height: 100vh;
    background: #f7f8fa;
  }
  .status-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .dot-success {
    background: #07c160;
  }
  .dot-warning {
    background: #ff976a;
  }
  .dot-danger {
    background: #ee0a24;
  }
  .status-text {
    font-size: 14px;
  }
  .tip-text {
    font-size: 12px;
    color: #969799;
    line-height: 1.6;
  }
  .empty-text {
    text-align: center;
    color: #969799;
    font-size: 13px;
    padding: 12px 0;
  }
</style>
