<template>
  <div class="door-access-page">
    <!-- 顶部导航 -->
    <s-header :name="$t('device.remoteDoorOpening')" :noback="false" />

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

    <!-- 门禁控制卡片 -->
    <div class="settings-card">
      <!-- 外部门控制 -->
      <div class="door-item">
        <div class="door-info">
          <!-- <van-icon name="../assets/device/door.png" class="door-icon" /> -->
          <div class="door-detail">
            <h3 class="door-title">{{ $t("device.outDoor") }}</h3>
            <p class="door-status">
              {{ $t("device.status") }}:
              <span
                :class="
                  deviceDetal.outDoor == '1' ? 'status-open' : 'status-closed'
                "
              >
                {{
                  deviceDetal.outDoor != "1"
                    ? $t("device.closed")
                    : $t("device.open")
                }}
              </span>
            </p>
          </div>
        </div>
        <van-switch
          :model-value="deviceDetal.outDoor"
          @update:model-value="outDoorChg"
          size="24px"
          active-value="1"
          inactive-value="0"
          active-color="#4d6add"
          inactive-color="#dcdee0"
        />
      </div>

      <!-- 内部门控制 -->
      <div class="door-item" v-if="machineType == '0' || machineType == null">
        <div class="door-info">
          <!-- <van-icon name="door" class="door-icon" /> -->
          <div class="door-detail">
            <h3 class="door-title">{{ $t("device.inDoor") }}</h3>
            <p class="door-status">
              {{ $t("device.status") }}:
              <span
                :class="
                  deviceDetal.inDoor == '1' ? 'status-open' : 'status-closed'
                "
              >
                {{
                  deviceDetal.inDoor != "1"
                    ? $t("device.closed")
                    : $t("device.open")
                }}
              </span>
            </p>
          </div>
        </div>
        <van-switch
          :model-value="deviceDetal.inDoor"
          @update:model-value="inDoorChg"
          size="24px"
          active-value="1"
          inactive-value="0"
          active-color="#4d6add"
          inactive-color="#dcdee0"
        />
      </div>

      <!-- 纸币器禁能开关 -->
      <div class="door-item" v-if="(machineType == '0' || machineType == '1') && (user.ifForegin == '1' || user.type == '0')">
        <div class="door-info">
          <div class="door-detail">
            <h3 class="door-title">{{ $t("device.banPaper") }}</h3>
            <p class="door-status">
              {{ $t("device.status") }}:
              <span
                :class="deviceDetal.banPaper ? 'status-open' : 'status-closed'"
              >
                {{
                  deviceDetal.banPaper ? $t("device.open") : $t("device.closed")
                }}
              </span>
            </p>
          </div>
        </div>
        <van-switch
          :model-value="deviceDetal.banPaper"
          @update:model-value="banPaperChg"
          size="24px"
          active-color="#4d6add"
          inactive-color="#dcdee0"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useRoute } from "vue-router";
import { getDeviceDetal, Api_openDoor, banMoney } from "@/service/device";
import { showFailToast, showToast, showConfirmDialog } from "vant";
import { useI18n } from "vue-i18n";
import { getLoginUser } from "../../common/js/utils";

export default {
  setup() {
    const user = getLoginUser();
    const route = useRoute();
    const deviceId = route.query.deviceId;
    const machineType = route.query.machineType;
    const deviceDetal = ref({});
    const { t } = useI18n();

    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      getDeviceDetalFun();
    });

    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({
        id: deviceId,
      });
      if (data.code === "00000") {
        // outDoor如果是null，默认是关闭
        if (data.data.outDoor == null) {
          data.data.outDoor = "0";
        }
        // inDoor如果是null，默认是关闭
        if (data.data.inDoor == null) {
          data.data.inDoor = "0";
        }
        deviceDetal.value = data.data;
        console.log(deviceDetal.value);
      } else {
        showFailToast(data.message);
      }
    };

    // 点击外门开关
    const outDoorChg = (outDoor) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.openRemindOut"),
      }).then(() => {
        Api_openDoor({
          equipmentId: deviceDetal.value.id,
          type: 0,
          status: outDoor,
        }).then((res) => {
          if (res.data.code == "00000") {
            showToast(t("device.sentSuccessfully"));
          }
          setTimeout(() => {
            getDeviceDetalFun();
          }, 1500);
        });
      });
    };

    // 点击内门开关
    const inDoorChg = (inDoor) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.openRemindIn"),
      }).then(() => {
        Api_openDoor({
          equipmentId: deviceDetal.value.id,
          type: 1,
          status: inDoor,
        }).then((res) => {
          if (res.data.code == "00000") {
            showToast(t("device.sentSuccessfully"));
          }
          setTimeout(() => {
            getDeviceDetalFun();
          }, 1500);
        });
      });
    };

    const banPaperChg = (banPaper) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.openRemindPaper"),
      }).then(() => {
        banMoney({
          equipmentId: deviceDetal.value.id,
          banPaper: banPaper,
        }).then((res) => {
          if (res.data.code == "00000") {
            showToast(t("device.sentSuccessfully"));
          }
          setTimeout(() => {
            getDeviceDetalFun();
          }, 1500);
        });
      });
    };

    return {
      deviceDetal,
      outDoorChg,
      inDoorChg,
      banPaperChg,
      machineType,
      user,
    };
  },
  components: {
    sHeader,
  },
};
</script>

<style lang="less" scoped>
@theme-color: #4d6add;
@light-bg: #f5f8ff;
@card-bg: #ffffff;
@text-dark: #333;
@text-light: #666;
@text-lighter: #999;
@border-radius: 12px;
@card-shadow: 0 4px 12px rgba(77, 106, 221, 0.15);
@hover-shadow: 0 8px 20px rgba(77, 106, 221, 0.25);
@transition: all 0.3s ease;

.door-access-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: @light-bg;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    sans-serif;
}

.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, #4d6add);
    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-color: @card-bg;
  border-radius: @border-radius;
  box-shadow: @card-shadow;
  padding: 16px;
  margin: 0 16px 24px;
}

.door-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

  // &:last-child {
  //   border-bottom: none;
  //   padding-bottom: 0;
  // }
}

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

.door-icon {
  font-size: 24px;
  color: @theme-color;
  margin-right: 16px;
}

.door-detail {
  flex: 1;
}

.door-title {
  font-size: 16px;
  font-weight: 600;
  color: @text-dark;
  margin: 0 0 4px;
}

.door-status {
  font-size: 14px;
  color: @text-light;
  margin: 0;

  .status-open {
    color: #4caf50;
    font-weight: 500;
  }

  .status-closed {
    color: #f44336;
    font-weight: 500;
  }
}

// 响应式调整
@media (max-width: 360px) {
  .device-header .device-name {
    font-size: 16px;
  }

  .door-title {
    font-size: 15px;
  }

  .door-status {
    font-size: 13px;
  }
}
</style>
