<template>
  <div class="door-access-page">
    <!-- 顶部导航 -->
    <s-header :name="$t('device.remoteDoorOpening')" :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 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">
          <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">
        <div class="door-info">
          <div class="door-detail">
            <h3 class="door-title">{{ $t("device.materialMonitor") }}</h3>
            <p class="door-status">
              {{ $t("device.status") }}:
              <span
                :class="
                  deviceDetal.isMaterialUse == '1'
                    ? 'status-open'
                    : 'status-closed'
                "
              >
                {{
                  deviceDetal.isMaterialUse == "1"
                    ? $t("device.open")
                    : $t("device.closed")
                }}
              </span>
            </p>
          </div>
        </div>
        <van-switch
          :model-value="deviceDetal.isMaterialUse"
          @update:model-value="materialChg"
          size="24px"
          active-value="1"
          inactive-value="0"
          active-color="#4d6add"
          inactive-color="#dcdee0"
        />
      </div>

      <!-- 纸币器禁能开关 -->
      <div
        class="door-item"
        v-if="
          (machineType === '0' || deviceDetal.equimentType == 'P30') &&
          (user.ifForeign == '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 class="door-item" v-if="machineType == '0'">
        <div class="door-info">
          <div class="door-detail">
            <h3 class="door-title">{{ $t("alramClean.openCleanFunction") }}</h3>
            <p class="door-status">
              {{ $t("device.status") }}:
              <span
                :class="
                  deviceDetal.cleanFunction ? 'status-open' : 'status-closed'
                "
              >
                {{
                  deviceDetal.cleanFunction
                    ? $t("device.open")
                    : $t("device.closed")
                }}
              </span>
            </p>
          </div>
        </div>
        <van-switch
          :model-value="deviceDetal.cleanFunction"
          @update:model-value="cleanFunctionChg"
          size="24px"
          active-color="#4d6add"
          inactive-color="#dcdee0"
        />
      </div>

      <!-- 设备清洗提醒 -->
      <div class="door-item" v-if="deviceDetal.cleanFunction">
        <div class="door-info">
          <div class="door-detail">
            <h3 class="door-title">{{ $t("alramClean.openStatus") }}</h3>
            <p class="door-status">
              {{ $t("device.status") }}:
              <span :class="remindStatus ? 'status-open' : 'status-closed'">
                {{ remindStatus ? $t("device.open") : $t("device.closed") }}
              </span>
            </p>
          </div>
        </div>
        <van-switch
          :model-value="remindStatus"
          @update:model-value="cleanRemindChg"
          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, useRouter } from "vue-router";
import {
  getDeviceDetal,
  Api_openDoor,
  banMoney,
  changeMaterial,
  getAlarmClean,
  updateAlarmCleanStatus,
  changeCleanFunction,
} 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 router = useRouter();
    const deviceId = route.query.deviceId;
    const machineType = route.query.machineType;
    const deviceDetal = ref({});
    const remindStatus = ref(false);
    const equipmentName = ref(route.query.name);
    const { t } = useI18n();

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

    // 获取设备列表数据
    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 cleanRemindStatus = async (clientId) => {
      try {
        const { data } = await getAlarmClean(clientId); // 使用await等待异步函数执行完毕并返回结果
        if (data.code === "00000") {
          if (data.data != null) {
            if (data.data.status === "1") {
              remindStatus.value = true;
            }
          }
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

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

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

    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(() => {
              router.go(-1);
            }, 1500);
          } else {
            showFailToast(res.data.message);
          }
        });
      });
    };

    const materialChg = (isMaterialUse) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.openRemindMaterial"),
      }).then(async () => {
        const { data } = await changeMaterial({
          equipmentId: deviceDetal.value.id,
          isMaterialUse: isMaterialUse,
        });
        if (data.code === "00000") {
          showToast(t("device.sentSuccessfully"));
          setTimeout(() => {
            router.go(-1);
          }, 1500);
        } else {
          showFailToast(data.message);
        }
      });
    };

    const cleanFunctionChg = (cleanFunction) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.openRemindClean"),
      }).then(async () => {
        const { data } = await changeCleanFunction({
          equipmentId: deviceDetal.value.id,
          cleanFunction: cleanFunction ? "1" : "0",
        });
        if (data.code === "00000") {
          showToast(t("device.changeSleepSuccess"));
          setTimeout(() => {
            router.go(-1);
          }, 1500);
        } else {
          showFailToast(data.message);
        }
      });
    };

    const cleanRemindChg = (cleanRemind) => {
      showConfirmDialog({
        title: t("device.openRemind"),
        message: t("device.openRemindCleanRemind"),
      }).then(async () => {
        const { data } = await updateAlarmCleanStatus({
          clientId: deviceDetal.value.clientId,
          status: cleanRemind ? "1" : "0",
        });
        if (data.code === "00000") {
          showToast(t("device.changeSleepSuccess"));
          setTimeout(() => {
            router.go(-1);
          }, 1500);
        } else {
          showFailToast(data.message);
        }
      });
    };

    return {
      deviceDetal,
      outDoorChg,
      inDoorChg,
      banPaperChg,
      materialChg,
      cleanFunctionChg,
      machineType,
      equipmentName,
      user,
      remindStatus,
      cleanRemindChg,
    };
  },
  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);

  .icon {
    font-size: 18px;
    color: @theme-color;
    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);
}

.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>
