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

    <!-- 设备名称标题 -->
    <div class="device-header">
      <van-icon name="desktop-o" class="icon" />
      <h3 class="device-name">
        {{ equipmentName }}
      </h3>
    </div>

    <!-- 果酱抽取卡片 -->
    <div class="settings-card">
      <div v-for="jam in jams" :key="jam.id" class="jam-item">
        <!-- 图片和名称行 -->
        <div class="jam-main-row">
          <van-image
            :src="showSugerPhoto(jam)"
            width="70"
            height="70"
            radius="8"
            fit="cover"
            class="jam-image"
          />
          <h3 class="jam-title">{{ jam.productName }}</h3>
        </div>
        <!-- 操作按钮组 -->
        <div class="jam-actions">
          <van-button
            type="primary"
            size="small"
            class="action-btn"
            @click="handleExtract(jam.no, 1)"
          >
            {{ $t("jam.forward") }}
          </van-button>
          <van-button
            type="warning"
            size="small"
            class="action-btn"
            @click="handleExtract(jam.no, 2)"
          >
            {{ $t("jam.reverse") }}
          </van-button>
          <van-button
            type="danger"
            size="small"
            class="action-btn"
            @click="handleExtract(jam.no, 0)"
          >
            {{ $t("jam.stop") }}
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const deviceId = ref(route.query.deviceId);
    const equipmentName = ref(route.query.name);
    const jams = ref([]);

    // 获取商品列表
    const getList = () => {
      selectProducts({
        equipmentId: deviceId.value,
      }).then((res) => {
        const { data } = res.data;
        if (data) {
          data.forEach((item) => {
            if (item.no.includes("J")) {
              jams.value.push(item);
            }
          });
        }
      });
    };

    // 商品图片路径处理
    const showSugerPhoto = (row) => {
      let imgId = row.no;
      if (imgId) {
        return require(`../../../assets/order/spunSugar/goods/${imgId}.png`);
      }
      return imgId;
    };

    // 果酱抽取
    const handleExtract = (no, status) => {
      showConfirmDialog({
        title: t("device.operationConfirmation"),
        message: t("device.pleaseConfirmAgainWhetherToOperate"),
      })
        .then(async () => {
          const { data } = await smokeJam({
            equipmentId: deviceId.value,
            productNo: no,
            status: status,
          });
          if (data.code === "00000") {
            showSuccessToast(t("device.Succeed"));
          } else {
            showFailToast(t("device.Failed"));
          }
        })
        .catch(() => {
          // on cancel
          showFailToast(t("device.Failed"));
        });
    };

    onMounted(async () => {
      getList();
    });

    return {
      equipmentName,
      showSugerPhoto,
      handleExtract,
      jams,
    };
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4dc294;
@warning-color: #ff976a;
@danger-color: #ee0a24;
.payment-settings {
  --payment-bg: #ffffff;
  --border-color: #ebedf0;
  --active-color: #4d6add;
  --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);

    .icon {
      font-size: 18px;
      color: #4d6add;
      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 {
    padding: 16px;
    margin: 12px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .jam-item {
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }
  }

  .jam-main-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }

  .jam-image {
    flex-shrink: 0;
  }

  .jam-title {
    font-size: 16px;
    color: #333;
    word-break: break-word;
    line-height: 1.4;
  }

  .jam-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;

    .action-btn {
      min-width: 80px;
      border-radius: 20px;
      font-size: 13px;
      padding: 8px 16px;

      &--primary {
        background: @primary-color;
        border-color: @primary-color;
      }

      &--warning {
        background: @warning-color;
        border-color: @warning-color;
      }

      &--danger {
        background: @danger-color;
        border-color: @danger-color;
      }
    }
  }

  @media (max-width: 480px) {
    .jam-main-row {
      gap: 12px;
    }

    .jam-image {
      width: 50px;
      height: 50px;
    }

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

    .jam-actions {
      gap: 8px;

      .action-btn {
        min-width: 70px;
        font-size: 12px;
        padding: 6px 12px;
      }
    }
  }
}
</style>
