<template>
  <view class="container" :class="{ 'logged-in': authStore.isLoggedIn }">
    <!-- 服务价值展示 -->
    <view class="service-intro">
      <view class="intro-title">电梯图纸在线生成平台</view>
      <view class="intro-subtitle">
        专注电梯土建图、电气原理图一键自动生成，填写参数即可快速导出标准 PDF 图纸，为工程设计、现场施工提供高效出图服务。登录即可使用完整出图功能。
      </view>
      <view class="demo-btn" @click="viewDemo">
        <text class="demo-icon">📄</text>
        <text class="demo-text">查看演示图纸</text>
      </view>
    </view>

    <!-- 顶部图片和标题 -->
    <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 v-if="!authStore.isLoggedIn" class="login-prompt">
        <view class="prompt-icon">🔒</view>
        <view class="prompt-text">请先登录以使用完整功能</view>
        <uv-button 
          size="small" 
          @click="goToLogin" 
          text="立即登录" 
          color="#3F70FF"
          customStyle="margin-top: 12px;"
        ></uv-button>
      </view>
      
      <uv-skeletons
        v-else-if="loading"
        :loading="loading"
        :skeleton="[
          {
            type: 'flex',
            num: 2,
            gap: '20rpx',
            children: [
              {
                type: 'custom',
                num: 1,
                gap: '20rpx',
                style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;',
              },
              {
                type: 'custom',
                num: 1,
                gap: '20rpx',
                style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;',
              },
            ],
          },
        ]"
      ></uv-skeletons>
      <view class="template-grid" v-else>
        <view
          class="template-item"
          :class="{ active: currentTemplate.id === item.id }"
          @click="selectTemplate(item)"
          v-for="item in templateList"
          :key="item.id"
        >
          <view class="tag" v-if="item.price_cents">
            ¥ {{ item.price_cents / 100 }}
          </view>
          <view class="template-name">{{ item.name }}</view>
          <view class="template-desc">{{ item.description }}</view>
        </view>
      </view>
    </view>

    <!-- 设置参数 -->
    <view class="section" v-if="has_access">
      <view class="section-title">设置参数</view>
      <uv-skeletons
        v-if="params_loading"
        :loading="params_loading"
        :skeleton="[
          {
            type: 'line',
            num: 3,
            gap: '20rpx',
          },
        ]"
      ></uv-skeletons>
      <view class="form" v-else>
        <!-- 按分类展示参数 -->
        <view
          v-for="(params, category) in groupedParams"
          :key="category"
          class="param-category"
        >
          <view class="category-title">{{ category }}</view>
          <uv-form
            labelAlign="left"
            labelWidth="auto"
            labelPosition="left"
            :model="formField"
            :rules="rules"
            ref="form"
          >
            <uv-form-item
              :prop="item.name"
              :label="item.name + '：'"
              v-for="item in params"
              :key="item.name"
            >
              <div class="required" v-if="item.required" style="color: #f12323">
                *
              </div>
              <uv-input
                @click="openPicker(item)"
                @input="handleInputChange(item)"
                @blur="validateNumberRange(item)"
                :readonly="item.type === 'select' || item.name === '土建图号'"
                :type="item.type === 'number' ? 'digit' : 'text'"
                v-model="item.value"
                color="#000"
                border="bottom"
                :placeholderStyle="{ color: '#666778' }"
                :placeholder="item.type === 'number' ? `范围：${item.min} - ${item.max === 0 ? '不限' : item.max}` : (item.name === '土建图号'
                    ? '自动生成'
                    : '请输入')"
              ></uv-input>
              <!-- 数字范围提示 -->
<!--              <view
                v-if="
                  item.type === 'number' &&
                  (item.min !== undefined || item.max !== undefined)
                "
                class="number-range-hint"
              >
                <text v-if="item.min !== undefined && item.max !== undefined">
                  范围：{{ item.min }} - {{ item.max }}
                </text>
                <text v-else-if="item.min !== undefined">
                  最小值：{{ item.min }}
                </text>
                <text v-else-if="item.max !== undefined">
                  最大值：{{ item.max }}
                </text>
              </view> -->
            </uv-form-item>
          </uv-form>
        </view>
      </view>
    </view>

    <view class="section" v-else>
      <div class="status">
        申请状态：{{ get_access_status(currentTemplate.access_status) }}
      </div>
      <uv-button
        size="small"
        v-if="currentTemplate.access_status !== 'pending'"
        @click="openApplyModal"
        text="申请权限"
        color="#3F70FF"
      ></uv-button>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions" v-if="authStore.isLoggedIn">
      <uv-button
        :loading="generating"
        @click="modalRefOpen"
        text="生成图纸"
        color="#3F70FF"
      ></uv-button>
      <uv-button @click="bugFeedback" text="bug反馈"></uv-button>
      <uv-button @click="viewHistory" text="查看记录" color="#df9d5d"></uv-button>
    </view>
    <uv-modal
      ref="modalRef"
      showCancelButton
      content="确定生成图纸？"
      @confirm="confirmGenerate"
    ></uv-modal>
    <uv-modal
      ref="applyModalRef"
      showCancelButton
      title="申请权限"
      @confirm="confirmApply"
      @cancel="cancelApply"
    >
      <view class="apply-modal-content">
        <view class="apply-label">申请理由：</view>
        <uv-textarea
          v-model="applyReason"
          placeholder="请输入申请理由"
          maxlength="200"
          count
        ></uv-textarea>
      </view>
    </uv-modal>
    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
    
    <!-- 投诉与纠纷悬浮按钮 -->
    <ComplaintFooter />
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import {
  onShow,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import { useAuthStore, useUserStore } from "@/store";
import RPC from "@/utils/request";
import ComplaintFooter from "@/components/ComplaintFooter/ComplaintFooter.vue";
import dayjs from 'dayjs'

const authStore = useAuthStore();
const userStore = useUserStore();
const loading = ref(false);
const params_loading = ref(false);

const has_access = ref(false);
const applyModalRef = ref(null);
const applyReason = ref("");
const applyLoading = ref(false);

// 查看演示图纸
const viewDemo = () => {
  uni.previewImage({
    urls: ['/static/imgs/demo.jpg'],
    current: 0
  });
};

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/index/index')
  });
};

// 根据category分组参数
const groupedParams = computed(() => {
  if (!currentTemplate.value.params) return {};

  const enabledParams = currentTemplate.value.params.filter(
    (item) => item.enabled
  );
  const grouped = {};

  enabledParams.forEach((param) => {
    const category = param.category || "默认";
    if (!grouped[category]) {
      grouped[category] = [];
    }
    grouped[category].push(param);
  });

  return grouped;
});

const get_access_status = (access_status) => {
  let str = "";
  if (access_status === "none") {
    str = "无权限";
  } else if (access_status === "pending") {
    str = "等待审批...";
  } else if (access_status === "rejected") {
    str = "已拒绝";
  } else if (access_status === "approved") {
    str = "已同意";
  } else {
    str = access_status;
  }
  return str;
};

const bugFeedback = () => {
  uni.navigateTo({
    url: "/pagesA/bug-feedback/bug-feedback",
  });
};

const modalRefOpen = () => {
  if (!has_access.value) {
    uni.showToast({
      title: "模板无权限使用",
      icon: "error",
    });
    return;
  }
  let flag = false;
  let name;
  currentTemplate.value.params
    ?.filter((item) => item.enabled)
    .forEach((item) => {
      if (item.required && !item.value) {
        flag = true;
        name = item.name;
      }
    });
  if (flag) {
    uni.showToast({
      title: `请检查【${name}】`,
      icon: "none",
    });
    return;
  }
  modalRef.value.open();
};

const currentParams = ref(null);
const openPicker = (item) => {
  console.log(item);
  if (item.type !== "select") return;
  currentParams.value = item;
  columns.value = [item.options.split(",")];
  picker.value.open();
};
const picker = ref(null);
const columns = ref([[]]);
const confirm = (val) => {
  console.log(val);
  currentParams.value.value = val.value[0];
  // 如果修改的是土建图型号，需要重新生成土建图号
  // if (currentParams.value.name === "土建图型号") {
  //   nextTick(() => {
  //     generateDrawingNumber();
  //   });
  // }
};

// 打开申请权限弹框
const openApplyModal = () => {
  applyReason.value = "";
  applyModalRef.value.open();
};

// 确认申请权限
const confirmApply = async () => {
  if (!applyReason.value.trim()) {
    uni.showToast({
      title: "请输入申请理由",
      icon: "error",
    });
    return;
  }

  applyLoading.value = true;
  try {
    await RPC.post("/template_access_apply", {
      template_id: currentTemplate.value.id,
      reason: applyReason.value.trim(),
    });

    uni.showToast({
      title: "申请已提交",
      icon: "success",
    });
    applyModalRef.value.close();
    applyReason.value = "";
    getList();
  } catch (error) {
    uni.showToast({
      title: "申请失败，请重试",
      icon: "error",
    });
  } finally {
    applyLoading.value = false;
  }
};

// 取消申请
const cancelApply = () => {
  applyReason.value = "";
};

// 处理输入变化
const handleInputChange = (item) => {
  // 如果修改的是土建图型号，需要重新生成土建图号
  // if (item.name === "土建图型号") {
  //   nextTick(() => {
  //     generateDrawingNumber();
  //   });
  // }
};

// 验证数字范围
const validateNumberRange = (item) => {
  if (item.type !== "number" || !item.value) return;

  const value = parseFloat(item.value);

  // 检查是否为有效数字
  if (isNaN(value)) {
    uni.showToast({
      title: `${item.name}必须为数字`,
      icon: "error",
    });
    item.value = "";
    return;
  }

  // 检查最小值
  if (item.min !== undefined && value < item.min) {
    uni.showToast({
      title: `${item.name}不能小于${item.min}`,
      icon: "error",
    });
    item.value = item.min.toString();
    return;
  }

  // 检查最大值
  if (item.max !== undefined && item.max !== 0 && value > item.max) {
    uni.showToast({
      title: `${item.name}不能大于${item.max}`,
      icon: "error",
    });
    item.value = item.max.toString();
    return;
  }
};

// 生成土建图号
const generateDrawingNumber = () => {
  const params = currentTemplate.value.params;
  if (!params) return;

  // 找到土建图型号和土建图号字段
  // const modelParam = params.find((p) => p.name === "土建图型号");
  const numberParam = params.find((p) => p.name === "土建图号");

  if (!numberParam) return;

  // 获取当前年份和月份
  // const now = new Date();
  // const year = now.getFullYear().toString().slice(-2); // 取年份后两位
  // const month = (now.getMonth() + 1).toString().padStart(2, "0"); // 月份补零

  // 生成4位随机数字+字母
  const randomPart = generateRandomCode();

  // 组合生成土建图号：GSE400-V25-10-0002A
  numberParam.value = dayjs().format('YYYYMMDDHHmmss') + randomPart;
};

// 生成随机编码（4位数字+1位字母）
const generateRandomCode = () => {
  const numbers = Math.floor(Math.random() * 10000)
    .toString()
    .padStart(4, "0");
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const letter = letters.charAt(Math.floor(Math.random() * letters.length));
  return numbers;
};

const generating = ref(false);
const modalRef = ref(null);
const confirmGenerate = () => {
  const params = {};
  let flag = false;
  let name = "";
  currentTemplate.value.params
    ?.filter((item) => item.enabled)
    .forEach((item) => {
      if (item.required && !item.value) {
        flag = true;
        name = item.name;
      }
      params[item.name] = item.value;
    });
  if (flag) {
    uni.showToast({
      title: `请检查【${name}】`,
      icon: "none",
    });
    return;
  }
  RPC.post("/template_create_task", {
    template_id: currentTemplate.value.id,
    template_data: params,
  }).then(() => {
    uni.showToast({
      title: "图纸开始生成",
      icon: "success",
    });
    setTimeout(() => {
      uni.navigateTo({
        url: "/pagesA/generate-record/generate-record",
      });
    }, 1000);
    modalRef.value.close();
  });
};
const templateList = ref([]);
const currentTemplate = ref({});
const getList = () => {
  loading.value = true;
  RPC.post("/template/list_with_access", {
    page: 1,
    limit: -1,
  })
    .then((res) => {
      templateList.value = (res.rows || []).filter((item) => item.enabled && item.has_access);
      currentTemplate.value = templateList.value[0]
        ? JSON.parse(JSON.stringify(templateList.value[0]))
        : {};
      if (currentTemplate.value.has_access) {
        params_loading.value = true;
        has_access.value = true;
        RPC.post("/template/detail", { id: currentTemplate.value.id })
          .then((res) => {
            currentTemplate.value.params = res?.params;
			generateDrawingNumber()
          })
          .finally(() => {
            params_loading.value = false;
          });
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

// 选择模板
const selectTemplate = (item) => {
  currentTemplate.value = JSON.parse(JSON.stringify(item));
  has_access.value = currentTemplate.value.has_access;
  if (currentTemplate.value.has_access) {
    params_loading.value = true;
    RPC.post("/template/detail", { id: currentTemplate.value.id })
      .then((res) => {
        currentTemplate.value.params = res?.params;
        // 如果有土建图型号，自动生成土建图号
        nextTick(() => {
          generateDrawingNumber();
        });
      })
      .finally(() => {
        params_loading.value = false;
      });
  }
};

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 viewHistory = () => {
  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(() => {
  console.log("test page onShow");
  
  // 直接检查登录状态，不使用usePermission（避免被重定向）
  const isLoggedIn = authStore.isLoggedIn;
  console.log(isLoggedIn ? "已登录" : "未登录");
  
  // 未登录用户也可以查看首页，但不加载模板列表
  if (isLoggedIn) {
    // 已登录，加载模板列表
    getList();
  } else {
    // 未登录，清空模板列表
    templateList.value = [];
    currentTemplate.value = {};
  }
});
onPullDownRefresh(() => {
  // 直接检查登录状态
  if (authStore.isLoggedIn) {
    getList();
  }
  uni.stopPullDownRefresh();
});
</script>

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

  /* #ifdef H5 */
  padding-bottom: 102px;
  /* #endif */
  
  &.logged-in {
    padding-bottom: 102px;

    /* #ifdef H5 */
    padding-bottom: 152px;
    /* #endif */
  }
}

.service-intro {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px 20px;
  color: white;
  
  .intro-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center;
  }
  
  .intro-subtitle {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
    opacity: 0.95;
    text-align: justify;
  }
  
  .demo-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    
    .demo-icon {
      font-size: 18px;
      margin-right: 8px;
    }
    
    .demo-text {
      font-size: 14px;
      font-weight: 500;
    }
  }
}

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

  .status {
    margin-bottom: 20px;
  }
  
  .login-prompt {
    text-align: center;
    padding: 40px 20px;
    
    .prompt-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }
    
    .prompt-text {
      font-size: 15px;
      color: #666;
      margin-bottom: 8px;
    }
  }
}

.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;

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

    .tag {
      position: absolute;
      top: 0px;
      left: 0;
      padding: 2px 8px;
      border-radius: 0 0 10px 0;
      font-size: 14px;
      color: white;
      background: #00caef;
    }

    &.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;
  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 */
}

.apply-modal-content {
  padding: 20px 0;
  width: 100%;

  .apply-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
  }
}

.number-range-hint {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  padding-left: 0;
}

.param-category {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }

  .category-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 30px;
      height: 2px;
      background: #3f70ff;
    }
  }
}
</style>

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