<template>
  <div class="password-manager">
    <s-header :name="$t('device.devicePasswordPage.title')" :noback="false" />

    <!-- 设备信息卡片 -->
    <div class="device-card">
      <div class="device-header">
        <van-icon name="desktop-o" class="icon" />
        <h3 class="device-name">
          {{ equipmentName }}
        </h3>
      </div>
    </div>

    <!-- 密码类型选择 -->
    <van-config-provider :theme-vars="themeVars">
      <div class="password-selector">
        <van-dropdown-menu :overlay="false">
          <van-dropdown-item
            v-model="pwdValue"
            :options="pwdType"
            class="modern-dropdown"
          />
        </van-dropdown-menu>

        <!-- 密码表单 -->
        <div class="form-card">
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <!-- 管理员密码 -->
              <template v-if="pwdValue === 0">
                <van-field
                  v-model="adminPwd"
                  type="password"
                  :label="$t('device.devicePasswordPage.deivcePwd')"
                  :placeholder="
                    $t('device.devicePasswordPage.passwordPlaceholder')
                  "
                  :rules="[
                    {
                      validator,
                      message: $t(
                        'device.devicePasswordPage.passwordPlaceholder'
                      ),
                    },
                  ]"
                  class="password-field"
                >
                  <template #left-icon>
                    <van-icon name="lock" class="field-icon" />
                  </template>
                </van-field>
                <van-field
                  v-model="checkAmdinPwd"
                  type="password"
                  :label="$t('device.devicePasswordPage.checkDeivcePwd')"
                  :placeholder="
                    $t('device.devicePasswordPage.passwordCheckRequired')
                  "
                  :rules="[
                    {
                      validator,
                      message: $t(
                        'device.devicePasswordPage.passwordPlaceholder'
                      ),
                    },
                  ]"
                  class="password-field"
                >
                  <template #left-icon>
                    <van-icon name="certificate" class="field-icon" />
                  </template>
                </van-field>
              </template>

              <!-- 访客密码 -->
              <template v-else>
                <van-field
                  v-model="guestPwd"
                  type="password"
                  :label="$t('device.devicePasswordPage.deivcePwd')"
                  :placeholder="
                    $t('device.devicePasswordPage.passwordPlaceholder')
                  "
                  :rules="[
                    {
                      validator,
                      message: $t(
                        'device.devicePasswordPage.passwordPlaceholder'
                      ),
                    },
                  ]"
                  class="password-field"
                >
                  <template #left-icon>
                    <van-icon name="lock" class="field-icon" />
                  </template>
                </van-field>
                <van-field
                  v-model="checkGuestPwd"
                  type="password"
                  :label="$t('device.devicePasswordPage.checkDeivcePwd')"
                  :placeholder="
                    $t('device.devicePasswordPage.passwordCheckRequired')
                  "
                  :rules="[
                    {
                      validator,
                      message: $t(
                        'device.devicePasswordPage.passwordPlaceholder'
                      ),
                    },
                  ]"
                  class="password-field"
                >
                  <template #left-icon>
                    <van-icon name="certificate" class="field-icon" />
                  </template>
                </van-field>
              </template>
            </van-cell-group>

            <!-- 提交按钮 -->
            <div class="submit-section">
              <van-button
                round
                block
                type="primary"
                native-type="submit"
                class="submit-btn"
              >
                <template #loading>
                  <van-loading type="spinner" size="20px" />
                </template>
                {{ $t("device.submitAndPushDeviceUpdates") }}
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </van-config-provider>
  </div>
</template>

<script>
// 导入接口
import { changePassword } from "@/service/device/index";
import sHeader from "@/components/SimpleHeader";
import { ref, reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import {
  showNotify,
  showConfirmDialog,
  showFailToast,
  showSuccessToast,
} from "vant";
import { useI18n } from "vue-i18n";
export default {
  components: {
    sHeader,
  },
  setup() {
    // 引入语言
    const { t } = useI18n();
    // 路由
    const route = useRoute();
    const router = useRouter();
    // 设备名称
    const equipmentName = ref("");
    const pwdValue = ref();
    const adminPwd = ref();
    const checkAmdinPwd = ref();
    const guestPwd = ref();
    const checkGuestPwd = ref();
    // const equimentType = ref(route.query.equimentType || "");

    const validator = (val) => /\w{6,}/.test(val);
    const themeVars = {
      dropdownMenuTitleTextColor: "#404d74",
    };
    const pwdType = [
      {
        text: t("device.devicePasswordPage.adminPassword"),
        value: 0,
      },
      {
        text: t("device.devicePasswordPage.guestPassword"),
        value: 1,
      },
    ];
    // 刚进页面
    onMounted(() => {
      // 加载样式
      pwdValue.value = pwdType[0].value;
      const id = route.query.deviceId || "";
      const name = route.query.name || "";
      if (id) {
        passwordForm.equipmentId = id;
        equipmentName.value = name;
      }
    });
    // 修改的价格
    const passwordForm = reactive({
      equipmentId: "",
      adminPwd: "",
      guestPwd: "",
    });

    // 点击提交
    const onSubmit = () => {
      passwordForm.adminPwd = adminPwd.value;
      passwordForm.guestPwd = guestPwd.value;
      console.log(passwordForm);
      if (
        passwordForm.adminPwd != checkAmdinPwd.value ||
        passwordForm.guestPwd != checkGuestPwd.value
      ) {
        showNotify({
          type: "danger",
          message: t("device.devicePasswordPage.passwordMatch"),
        });
        return;
      }
      if (pwdValue.value == 0) {
        passwordForm.guestPwd = "";
      }
      if (pwdValue.value == 1) {
        passwordForm.adminPwd = "";
      }
      showConfirmDialog({
        // title: "提示",
        message: t("device.editCheck"),
      }).then(() => {
        changePassword({
          id: passwordForm.equipmentId,
          adminPwd: passwordForm.adminPwd,
          guestPwd: passwordForm.guestPwd,
        }).then((res) => {
          if (res.data.code == "00000") {
            showSuccessToast(t("device.modificationSucceeded"));
            setTimeout(() => {
              router.go(-1);
            }, 1500);
          } else {
            showFailToast(res.data.message);
          }
        });
      });
    };

    return {
      passwordForm,
      equipmentName,
      pwdType,
      pwdValue,
      adminPwd,
      checkAmdinPwd,
      guestPwd,
      checkGuestPwd,
      onSubmit,
      validator,
      themeVars,
    };
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@card-bg: #ffffff;
@text-primary: #2d3436;
@border-color: #e4e7ec;
@title-color: #404d74;
@active-color: #4d6add;
@item-padding: 16px 24px;
@card-shadow: 0 4px 20px rgba(77, 106, 221, 0.1);

.password-manager {
  background: #f8fafb;
  min-height: 100vh;
}

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

  .device-header {
    display: flex;
    align-items: center;

    .icon {
      font-size: 18px;
      color: @primary-color;
      margin-right: 10px;
    }

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

.password-selector {
  margin: 10px;

  .modern-dropdown {
    :deep(.van-dropdown-menu__bar) {
      background: @card-bg;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      overflow: hidden;

      :deep(.van-dropdown-menu__title) {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        color: @title-color;
        font-size: 10px;
        font-weight: 500;
        transition: all 0.5s;
        width: auto !important;

        &::after {
          content: "";
          position: relative !important;
          right: 0 !important;
          top: 0 !important;
          transform: none !important;
          display: inline-block;
          width: 0;
          height: 0;
          border: 5px solid;
          border-color: @title-color transparent transparent;
          margin-left: 8px;
          margin-top: 3px;
          order: 1;
          transition: transform 0.5s;
        }

        &--active {
          color: @active-color;

          &::after {
            border-color: @active-color transparent transparent;
            transform: rotate(-180deg) translateY(2px) !important;
          }
        }
      }
    }
  }
  :deep(.van-dropdown-menu__item) {
    flex: 1;
    min-width: 82px;
    position: relative;
    padding: 8px 0px;

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 24px;
      background: #eef0fa;
    }
  }

  :deep(.van-dropdown-item) {
    margin: 10px;

    &__content {
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(77, 106, 221, 0.1);
      border: 0;
      max-height: 60vh;
      z-index: 9999;
      /* 确保层级 */
    }
  }
}

.form-card {
  background: @card-bg;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 10px;

  .password-field {
    :deep(.van-field__label) {
      font-weight: 500;
    }

    :deep(.van-cell) {
      background: #f8fafb;
      border-radius: 8px;
      // margin: 12px 0;
      transition: all 0.3s;

      &:focus-within {
        box-shadow: 0 2px 8px rgba(77, 194, 148, 0.2);
      }
    }

    .field-icon {
      color: @primary-color;
      margin-right: 12px;
      font-size: 18px;
    }
  }

  .submit-section {
    margin-top: 32px;

    .submit-btn {
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(135deg, @primary-color 0%, #3daa80 100%);
      border: none;
      transition: transform 0.2s;

      &:active {
        transform: scale(0.98);
      }
    }
  }
}

@media (max-width: 480px) {
  .form-card {
    padding: 10px;

    .submit-btn {
      height: 44px !important;
      font-size: 14px;
    }
  }

  :deep(.van-dropdown-menu__title) {
    padding: 2px 4px !important;
    font-size: 12px;

    &::after {
      margin-right: -5px;
    }
  }
}
</style>
