<template>
  <view class="app-container">
    <HeaderBar title="完善信息" text-align="center" enable-back />

    <view class="form-box">
      <!-- 车辆选择 -->
      <view class="form-item" @click="openCarList">
        <view class="label">车辆</view>
        <view class="input">
          <template v-if="form.carId">
            <view class="car-info">
              <view class="name-phone">
                <text class="name">{{ form.createName }}</text>
                <text class="phone">{{ form.createMobile }}</text>
              </view>
              <view class="car-no">
                <text class="no">{{ form.carNo }}</text>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="add-placeholder">
              <view class="add-content">
                <u-icon name="plus" size="40" color="#2979ff"></u-icon>
                <text class="add-text">请选择车辆</text>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <button class="submit-btn" @click="submitForm">确认修改</button>
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'
import ImageUpload from '@/components/image-upload/image-upload.vue'
import { appGetTaskDetail, appUpdateTask } from '@/api/app/task'

export default {
  name: 'TaskMore',
  components: {
    HeaderBar,
    ImageUpload
  },
  data() {
    return {
      taskId: null,
      taskTypeList: ['急修', '拖车'],
      typeIndex: 0,
      form: {
        type: "1",
        video: '',
        createAddressId: '',
        createName: '',
        createMobile: '',
        remark: '',
        carId: null,
        carNo: null,
        createAddress: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.taskId = options.id
      this.getTaskDetail()
    }
  },
  methods: {
    getTaskDetail() {
      appGetTaskDetail(this.taskId).then(res => {
        if (res.code === 200 && res.data) {
          this.form = res.data;
        }
      })
    },
    openCarList() {
      uni.navigateTo({
        url: '/pages/car/index'
      })
    },
    submitForm() {
      if (!this.form.carId) {
        this.$modal.msgError('请选择车辆')
        return
      }

      this.$modal.loading("提交中")
      appUpdateTask(this.form).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess('修改成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 180rpx;
}
.form-box {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  margin: 30rpx 20rpx;
}
.form-item {
  margin-bottom: 30rpx;
  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    .required { color: #f56c6c; font-size: 22rpx; }
    .optional { color: #999; font-size: 22rpx; }
  }
  .input {
    background: #f7f8fa;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;

    .car-info {
      .name-phone {
        margin-bottom: 10rpx;

        .name {
          font-size: 32rpx;
          color: #333;
          margin-right: 20rpx;
        }

        .phone {
          font-size: 28rpx;
          color: #666;
        }
      }

      .address {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .car-no {
        font-size: 28rpx;
        color: #666;
        .no {
          color: #2979ff;
        }
      }
    }

    .add-placeholder {
      background: #ffffff71;
      border: 2rpx dashed #fff;
      border-radius: 10rpx;
      padding: 40rpx;
      text-align: center;

      .add-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10rpx;

        .add-text {
          font-size: 28rpx;
          color: #2979ff;
        }
      }
    }
  }
  .textarea {
    width: 100%;
    min-height: 120rpx;
    background: #f7f8fa;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #666;
    resize: none;
    border: none;
  }
  .count {
    text-align: right;
    color: #bbb;
    font-size: 22rpx;
  }
}
.submit-btn {
  width: 90%;
  margin: 40rpx auto 0;
  display: block;
  background: #2979ff;
  color: #fff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border: none;
}
</style>
