<template>
  <view class="container">
    <!-- 顶部图片和标题 -->
    <view class="header-section">
      <image
        class="header-image"
        src="/static/imgs/indexImg.png"
        mode="aspectFill"
      ></image>
      <view class="header-overlay">
        <view class="header-title">生成电梯图纸</view>
        <view class="header-subtitle">
          选择模板并设置参数，快速生成专业电梯施工图
        </view>
      </view>
    </view>

    <!-- 选择图纸模板 -->
    <view class="section">
      <view class="section-title">选择图纸模板</view>
      <view class="template-grid">
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'passenger' }"
          @click="selectTemplate('passenger')"
        >
          <u-icon name="edit-pen" color="#4285f4" size="24"></u-icon>
          <view class="template-name">乘客电梯标准图纸</view>
          <view class="template-desc">适用于住宅、商业建筑</view>
        </view>
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'freight' }"
          @click="selectTemplate('freight')"
        >
          <u-icon name="car" color="#4285f4" size="24"></u-icon>
          <view class="template-name">货运电梯专用图纸</view>
          <view class="template-desc">适用于仓库、工厂</view>
        </view>
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'medical' }"
          @click="selectTemplate('medical')"
        >
          <u-icon name="plus-circle" color="#4285f4" size="24"></u-icon>
          <view class="template-name">医用电梯专业图纸</view>
          <view class="template-desc">适用于医院、医疗场所</view>
        </view>
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'sightseeing' }"
          @click="selectTemplate('sightseeing')"
        >
          <u-icon name="eye" color="#4285f4" size="24"></u-icon>
          <view class="template-name">观光电梯定制图纸</view>
          <view class="template-desc">适用于商场、酒店</view>
        </view>
      </view>
    </view>

    <!-- 设置参数 -->
    <view class="section">
      <view class="section-title">设置参数</view>
      <view class="form">
        <uv-form
          labelAlign="left"
          labelWidth="auto"
          labelPosition="left"
          :model="formField"
          :rules="rules"
          ref="form"
        >
          <uv-form-item prop="phone" label="电梯类型">
            <uv-input
              v-model="formField.phone"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="载重（kg）">
            <uv-input
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="井道宽度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="井道深度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="顶层高度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="底坑深度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password">
            <div style="margin-bottom: 4px">备注说明</div>
            <uv-textarea
              v-model="formField.password"
              placeholder="请输入"
            ></uv-textarea>
          </uv-form-item>
        </uv-form>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <uv-button
        :loading="generating"
        @click="viewHistory"
        text="生成图纸"
        color="#3F70FF"
      ></uv-button>
      <uv-button @click="viewHistory" text="查看记录"></uv-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  onShow,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onReachBottom,
} from "@dcloudio/uni-app";
import { useAuthStore, useUserStore } from "@/store";
import RPC from "@/utils/request";
import { usePermission } from "@/hooks/usePermission";

const authStore = useAuthStore();
const userStore = useUserStore();

const generating = ref(false);

// 响应式数据
const selectedTemplate = ref("passenger");

// 选择模板
const selectTemplate = (template) => {
  selectedTemplate.value = template;
};

const form = ref(null);
const formField = ref({
  phone: "",
  password: "",
});
const rules = ref({
  // 'phone': {
  // 	required: true,
  // 	message: '请填写手机号',
  // 	trigger: ['blur', 'change']
  // },
  // 'password': {
  // 	required: true,
  // 	message: '请填写验证码',
  // 	trigger: ['blur', 'change']
  // }
});

// 生成图纸
const generateDrawing = async () => {
  if (!selectedTemplate.value) {
    uni.showToast({
      title: "请选择图纸模板",
      icon: "none",
    });
    return;
  }

  generating.value = true;
  try {
    const params = {};

    // 这里调用生成图纸的API
    // const result = await RPC.post('/api/generate-drawing', params)

    uni.showToast({
      title: "图纸生成中...",
      icon: "loading",
      duration: 2000,
    });

    // 模拟生成过程
    setTimeout(() => {
      uni.showToast({
        title: "图纸生成成功",
        icon: "success",
      });
      generating.value = false;
    }, 2000);
  } catch (error) {
    console.error("生成图纸失败:", error);
    uni.showToast({
      title: "生成失败，请重试",
      icon: "none",
    });
    generating.value = false;
  }
};

// 查看历史记录
const viewHistory = () => {
  console.log(111);
  uni.navigateTo({
    url: "/pagesA/generate-record/generate-record",
  });
};

// 分享给朋友
onShareAppMessage((data) => {
  console.log("🚀 ~ onShareAppMessage ~ data:", data);
  return {
    title: "电梯图纸生成平台",
    path: "/pages/index/index",
  };
});

// 分享到朋友圈
onShareTimeline((data) => {
  console.log("🚀 ~ onShareTimeline ~ data:", data);
  return {
    title: "电梯图纸生成平台",
    query: "a=1&b=2",
  };
});

onLoad(() => {
  console.log("index-onLoad");
});
	onShow(async () => {
	  console.log("test page onShow");
	  const hasPermission = await usePermission();
	  console.log(hasPermission ? "已登录" : "跳转登录");
	  // 以下开始写业务逻辑...
	  if(!hasPermission) {
		 authStore.signOut();
		 uni.$uv.route("/pages/login/login");
	  }
	});
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 52px;

  /* #ifdef H5 */
  padding-bottom: 102px; /* H5环境下需要更多空间 (50px按钮 + 50px tabBar + 2px间距) */
  /* #endif */
}

.header-section {
  position: relative;
  height: 200px;
  overflow: hidden;

  .header-image {
    width: 100%;
    height: 100%;
  }

  .header-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 70%;
    transform: translate(0, -50%);
    padding: 20px 10px;

    .header-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #bd9e85;
    }

    .header-subtitle {
      font-size: 12px;
    }
  }
}

.section {
  margin: 16px;
  background: white;
  border-radius: 12px;
  padding: 16px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 16px;
  }
}

.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;

  .template-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.3s;

    &.active {
      border-color: #4285f4;
      background-color: #f0f7ff;
    }

    .template-name {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin: 8px 0 4px;
    }

    .template-desc {
      font-size: 12px;
      color: #999;
    }
  }
}

.bottom-actions {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  height: 50px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;

  /* #ifdef H5 */
  bottom: 50px; /* H5环境下给tabBar留出空间 */
  /* #endif */
}
</style>

<style lang="scss">
.bottom-actions {
  .uv-button-wrapper {
    width: 48%;
  }
}
</style>