<template>
  <view class="form-container">
    <!-- 工单名称 -->
    <view class="form-item">
      <text class="label">工单名称</text>
      <input class="input" placeholder="请输入工单名称" v-model="form.name" />
    </view>

    <!-- 工单类型 -->
    <view class="form-item">
      <text class="label">工单类型</text>
      <picker :range="orderTypes" @change="onTypeChange">
        <view class="picker">
          {{ form.type || '请选择' }}
        </view>
      </picker>
    </view>

    <!-- 处理人 -->
    <view class="form-item">
      <text class="label">处理人</text>
      <view class="handler-selector">
        <picker :range="handlers" @change="onHandlerChange">
          <view class="picker">
            {{ form.handler || '请选择' }}
          </view>
        </picker>
        <button class="icon-btn" @click="addHandler">+</button>
      </view>
    </view>

    <!-- 计划完成时间 -->
    <view class="form-item">
      <text class="label">计划完成时间</text>
      <picker mode="date" @change="onDateChange">
        <view class="picker">
          {{ form.date || '请选择' }}
        </view>
      </picker>
    </view>

    <!-- 备注 -->
    <view class="form-item">
      <text class="label">备注</text>
      <textarea class="textarea" placeholder="请输入内容（非必填）" v-model="form.remark" />
    </view>

    <!-- 上传图片 -->
    <view class="form-item">
      <button class="upload-btn" @click="uploadImage">+ 上传图片</button>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-wrapper">
      <button class="submit-btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        type: '',
        handler: '',
        date: '',
        remark: '',
        image: ''
      },
      orderTypes: ['类型1', '类型2', '类型3'],
      handlers: ['张三', '李四', '王五']
    };
  },
  methods: {
    onTypeChange(e) {
      this.form.type = this.orderTypes[e.detail.value];
    },
    onHandlerChange(e) {
      this.form.handler = this.handlers[e.detail.value];
    },
    onDateChange(e) {
      this.form.date = e.detail.value;
    },
    addHandler() {
      uni.showToast({ title: '添加处理人', icon: 'none' });
    },
    uploadImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.form.image = res.tempFilePaths[0];
        }
      });
    },
    submit() {
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
      console.log(this.form);
    }
  }
};
</script>

<style scoped>
.form-container {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}
.input,
.picker,
.textarea {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 10rpx;
}
.textarea {
  height: 200rpx;
}
.handler-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  background-color: #eee;
  text-align: center;
  line-height: 80rpx;
}
.upload-btn {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #fafafa;
}
.submit-wrapper {
  margin-top: 40rpx;
}
.submit-btn {
  width: 100%;
  background-color: #1890ff;
  color: #fff;
  padding: 20rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
}
</style>
