<template>
  <div class="payment-settings">
    <s-header :name="$t('remote.C29')" :noback="false" />

    <!-- 设备名称标题 -->
    <div class="device-header">
      <div class="vertical-indicator"></div>
      <h3 class="device-name">
        {{ $t("device.equipmentName") }}：{{ deviceName }}
      </h3>
    </div>

    <!-- 税收设置卡片 -->
    <div class="settings-card">
      <!-- 税费开关 -->
      <div class="payment-item">
        <div class="payment-info">
          <van-icon name="balance-pay" class="payment-icon" />
          <div class="payment-detail">
            <h3 class="payment-title">{{ $t("tax.taxFee") }}</h3>
            <p class="payment-desc">{{ $t("tax.taxFeeDesc") }}</p>
          </div>
        </div>
        <van-switch
          :model-value="taxStatus"
          size="22px"
          @click="handleSubmit"
        />
      </div>

      <!-- 税率输入（条件渲染） -->
      <div v-if="taxStatus" class="tax-rate-input">
        <van-form @submit="changeTaxRate">
          <van-field
            v-model="taxRate"
            type="number"
            :label="$t('tax.taxRate')"
            :placeholder="$t('tax.ratePlaceholder')"
            :rules="[
              { required: true, message: $t('tax.rateRequired') },
              {
                pattern: /^([0-9]\d?|100)(\.\d{1,2})?$/,
                message: $t('tax.rateInvalid'),
              },
            ]"
          >
            <template #right-icon>
              <span class="percentage-symbol">%</span>
            </template>
          </van-field>
          <van-button
            type="primary"
            size="small"
            class="update-btn"
            native-type="submit"
          >
            {{ $t("tax.update") }}
          </van-button>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import {
  getDeviceDetal,
  updateTaxStatus,
  updateTaxRate,
} from "@/service/device";
import { showConfirmDialog, showSuccessToast } from "vant";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";

export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const deviceId = ref(route.query.deviceId);
    const deviceName = ref(route.query.name);
    const deviceDetal = ref(null);

    const taxStatus = ref(false);
    const taxRate = ref("");

    onMounted(async () => {
      await getDeviceInfo();
    });

    // 获取设备数据
    const getDeviceInfo = async () => {
      const { data } = await getDeviceDetal({ id: deviceId.value });
      if (data.code === "00000") {
        deviceDetal.value = data.data;
        if (deviceDetal.value.taxStatus) {
          taxStatus.value = deviceDetal.value.taxStatus;
          taxRate.value = deviceDetal.value.taxRate;
        }
      }
    };

    const handleSubmit = () => {
      showConfirmDialog({
        title: t("device.operationConfirmation"),
        message: t("device.pleaseConfirmAgainWhetherToOperate"),
      })
        .then(async () => {
          const { data } = await updateTaxStatus({
            equipmentId: deviceId.value,
            taxStatus: !taxStatus.value,
          });
          if (data.code === "00000") {
            taxStatus.value = !taxStatus.value;
            if (taxStatus.value) {
              taxRate.value = deviceDetal.value.taxRate;
            }
          }
        })
        .catch(() => {
          // on cancel
        });
    };

    const changeTaxRate = async () => {
      showConfirmDialog({
        title: t("device.operationConfirmation"),
        message: t("device.pleaseConfirmAgainWhetherToOperate"),
      })
        .then(async () => {
          const { data } = await updateTaxRate({
            equipmentId: deviceId.value,
            taxRate: taxRate.value,
          });
          if (data.code === "00000") {
            showSuccessToast(t("device.modificationSucceeded"));
          }
        })
        .catch(() => {
          // on cancel
        });
    };

    return {
      deviceName,
      taxStatus,
      taxRate,
      handleSubmit,
      changeTaxRate,
    };
  },
};
</script>

<style lang="less" scoped>
.payment-settings {
  --payment-bg: #ffffff;
  --border-color: #ebedf0;
  --active-color: #2c87c8;
  --text-primary: #323233;
  --text-secondary: #969799;

  background: #f7f8fa;
  min-height: 100vh;

  .device-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    margin: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .vertical-indicator {
      width: 4px;
      height: 15px;
      background: var(--active-color, #2c87c8);
      border-radius: 2px;
      margin-right: 10px;
    }

    .device-name {
      margin: 0;
      font-size: 15px;
      color: #404d74;
      font-weight: 550;

      // 长名称处理
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 70vw;
    }
  }

  .settings-card {
    background: #fff;
    border-radius: 12px;
    margin: 12px 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .payment-info {
    display: flex;
    align-items: center;
  }

  .payment-icon {
    font-size: 24px;
    color: #4dc294;
    margin-right: 12px;
  }

  .payment-title {
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
  }

  .payment-desc {
    font-size: 12px;
    color: #666;
  }

  .tax-rate-input {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
  }

  .percentage-symbol {
    color: #999;
    padding-left: 4px;
  }

  .update-btn {
    margin-top: 12px;
    width: 120px;
    border-radius: 18px;
  }

  /* 移动端适配 */
  @media (max-width: 480px) {
    .device-name {
      font-size: 15px;
    }

    .payment-title {
      font-size: 14px;
    }

    .tax-rate-input {
      margin-top: 12px;
    }
  }
}
</style>
