<template>
  <view class="create-service-order">
    <view class="create-service-wrapper">
      <view class="order-header">
        <text>反馈意见</text>
      </view>
      <view class="order-content">
        <view class="detail-item">
          <text class="detail-label">联系电话：</text>
          <input
            v-if="!isCallSuccess"
            class="detail-input"
            placeholder="请填写联系电话"
            v-model="contactPhone"
          />
          <text v-else class="detail-value">{{ contactPhone }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">意见内容：</text>
          <textarea
            v-if="!isCallSuccess"
            class="detail-textarea"
            placeholder="请输入反馈意见"
            v-model="contactText"
          />
          <text v-else class="detail-value">{{ contactText }}</text>
        </view>

        <button
          v-if="!isCallSuccess"
          class="order-button submit-button"
          @click="handleCall"
        >
          立即提交
        </button>

        <button v-else class="order-button look-button" @click="viewWorkOrder">
          查看意见
        </button>
      </view>
    </view>

    <view class="footer-help">
      <image src="./images/icon_volume.png" class="help-icon"></image>
      <text class="help-text">朵朵收到您的意见将第一时间为您处理!</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { SCROLL_TO_BOTTOM } from "@/constant/constant";
import { createWorkOrder } from "@/request/api/OrderApi";
const workOrderTypeId = ref("");
const contactPhone = ref("");
const contactText = ref("");
const isCallSuccess = ref(false); // 呼叫成功状态
const workOrderId = ref(0); // 工单ID

const handleCall = async () => {
  if (!contactPhone.value.trim()) {
    uni.showToast({
      title: "请填写联系电话",
      icon: "none",
      duration: 2000,
    });
    return;
  }

  if (!contactText.value.trim()) {
    uni.showToast({
      title: "请填写意见内容",
      icon: "none",
      duration: 2000,
    });
    return;
  }

  sendCreateWorkOrder();
};

/// 创建工单
const sendCreateWorkOrder = async () => {
  try {
    const res = await createWorkOrder({
      contactName: contactText.value,
      contactPhone: contactPhone.value,
      workOrderTypeId: workOrderTypeId.value,
    });

    if (res.code === 0) {
      // 保存工单ID
      workOrderId.value = res.data?.id || "";

      // 设置呼叫成功状态
      isCallSuccess.value = true;

      uni.showToast({
        title: "工单创建成功",
        icon: "success",
        duration: 2000,
      });
    } else {
      uni.showToast({
        title: res.message || "创建工单失败",
        icon: "none",
        duration: 2000,
      });
    }
  } catch (error) {
    console.error("创建工单失败:", error);
    uni.showToast({
      title: "网络错误，请重试",
      icon: "none",
      duration: 2000,
    });
  }
};

// 查看工单
const viewWorkOrder = () => {
  console.log("查看工单:", workOrderId.value);
  // 这里可以跳转到工单详情页面
  uni.navigateTo({
    url: `/pages/order/list?id=${workOrderId.value}`,
  });
};

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      uni.$emit(SCROLL_TO_BOTTOM, true);
    }, 200);
  });
});
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
