<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";

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");
});
</script>

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

.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%;
}
</style>

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