<template>
  <view class="create-service-order">
    <view class="create-service-wrapper">
      <view class="order-header">
        <text>创建服务工单</text>
      </view>
      <view class="order-content">
        <view class="order-item">
          <image src="./images/icon_service.png" class="order-icon"></image>
          <text class="order-description">加一台麻将机</text>
        </view>
        <view class="order-line"></view>
        <view class="order-details">
          <view class="detail-item">
            <text class="detail-label">房间号：</text>
            <text class="detail-value">302</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">服务时间：</text>
            <text class="detail-value">2025-09-12 12:00</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">联系房客：</text>
            <input
              class="detail-input"
              placeholder="请填写联系人"
              v-model="contactName"
            />
          </view>
          <view class="detail-item">
            <text class="detail-label">联系电话：</text>
            <input
              class="detail-input"
              placeholder="请填写联系电话"
              v-model="contactPhone"
            />
          </view>
        </view>
        <button class="order-button" @click="handleCall">立即呼叫</button>
      </view>
    </view>

    <view class="footer-help">
      <image src="./images/icon_volume.png" class="help-icon"></image>
      <text class="help-text">没解决问题？给我打电话吧！</text>
      <text class="help-phone" @click="makePhoneCall">15185111210</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const contactName = ref("");
const contactPhone = ref("");

const handleCall = () => {
  // Logic to handle the call action
  console.log("Calling with:", contactName.value, contactPhone.value);
};

const makePhoneCall = () => {
  // 使用 uniapp 的 API 拨打电话
  uni.makePhoneCall({
    phoneNumber: "15185111210",
  });
};
</script>

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