<template>
  <view class="container">
    <u-navbar
      class="u-navbar"
      title="完成情况上传"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />
    <!-- Project Header -->
    <view class="project-header">
      <text class="project-title">{{ proName }}</text>
      <!-- <view class="completion-rates">
				<text>作业计划完成率：70%</text>
				<text>月作业计划完成率：70%</text>
			</view> -->
    </view>

    <!-- Total Plan Input -->
    <view class="total-plan">
      <text>计划作业人数：</text>
      <text>{{ planWorkNum }}</text>
    </view>

    <!-- Project Table -->
    <view class="table-container">
      <view class="table-header">
        <text class="col-index">序号</text>
        <text class="col-name">项目名称</text>
        <text class="col-desc">项目描述</text>
        <view class="col-completion">本日计划完成量</view>
        <view class="col-completion">本日实际完成量</view>
      </view>

      <view class="table-body">
        <view v-for="(item, index) in tableData" :key="index" class="table-row">
          <text class="col-index">{{ index + 1 }}</text>
          <text class="col-name">{{ item.taskName }}</text>
          <view class="col-desc">
            <text>{{ item.taskContent }}</text>
          </view>
          <view class="col-completion">
            <text>{{ item.completeNumDay }}</text>
          </view>
          <view class="col-completion">
            <input type="number" v-model="item.actualCompleteNumDay" class="completion-input" />
            <input type="hidden" name="dayContentId" :value="item.dayContentId" class="hidden-input" />
          </view>
        </view>
      </view>
    </view>

    <!-- Image Upload Section -->
    <view class="image-upload-section">
      <text class="upload-title">* 当天作业人员合照</text>
      <view class="upload-area" @tap="chooseImage">
        <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
        <text v-else class="upload-text">点击上传图片</text>
      </view>
      <text v-if="uploadStatus" :class="['upload-status', uploadStatus === 'success' ? 'success' : 'error']">
        {{ uploadStatusText }}
      </text>
    </view>

    <!-- Save Button -->
    <view class="save-button-container">
      <button type="primary" @click="saveData">保存</button>
    </view>
  </view>
</template>

<script>
import config from '@/config'
export default {
  onLoad(options) {
    this.dayId = decodeURIComponent(options.dayId)
    this.proName = decodeURIComponent(options.proName)
    this.id = decodeURIComponent(options.id)
    this.getListTable()
  },

  data() {
    return {
      dayId: '',
      proName: '',
      id: '',
      totalPlan: '',
      tableData: [],
      imageUrl: '',
      uploadStatus: '',
      uploadStatusText: '',
      planWorkNum: '',
      photoPath: ''
    }
  },
  methods: {
    getListTable() {
      let param = {
        dayId: this.dayId,
        id: this.id
      }

      uni.request({
        url: config.lpBmwUrl + '/bmw/workPlanDay/getPlanDetailByIdEdit',
        method: 'post',
        data: JSON.stringify(param),
        header: {
          'content-type': 'application/json',
          Authorization: uni.getStorageSync('realNameToken')
        },
        success: res => {
          console.log('日计划完成情况上传', res)
          if (res.data.code == 200) {
            this.tableData = res.data.data.contentList
            this.planWorkNum = res.data.data.planWorkNum
          } else {
            uni.$u.toast(res.data.msg)
          }
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
          const tempFilePaths = res.tempFilePaths
          this.imageUrl = tempFilePaths[0]
          this.uploadImage(tempFilePaths[0])
        }
      })
    },

    uploadImage(filePath) {
      this.uploadStatus = 'uploading'
      this.uploadStatusText = '上传中...'

      //上传考勤图片
      uni.uploadFile({
        url: config.realFileUrl + `file/upload`, //服务器地址
        fileType: 'image', //ZFB必填,不然报错
        filePath: filePath, //这个就是我们上面拍照返回或者先中照片返回的数组
        name: 'imgFile',
        formData: {
          photoType: 'attendance'
        },
        success: uploadFileRes => {
          if (uploadFileRes.statusCode == 200) {
            this.photoPath = JSON.parse(uploadFileRes.data).data.url
            this.uploadStatus = 'success'
            this.uploadStatusText = '上传成功'
          } else {
            uni.$u.toast('上传失败')
          }
        },
        fail: err => {
          uni.$u.toast('上传失败')
          console.log(err)
        }
      })
    },
    saveData() {
      if (this.photoPath == null || this.photoPath == '') {
        uni.$u.toast('请上传图片')
        return false
      }

      let isValid = true
      let errorMessage = ''

      this.tableData.forEach((item, index) => {
        const actualCompleteNumDay = Number(item.actualCompleteNumDay) || 0
        console.log('actualCompleteNumDay', actualCompleteNumDay)

        const completeNumDay = Number(item.completeNumDay)
        console.log('completeNumDay', completeNumDay)

        if (actualCompleteNumDay > completeNumDay) {
          isValid = false
          errorMessage += `第 ${index + 1} 行: 本日实际完成量 不能大于 本日计划完成量\n`
        }
      })

      if (!isValid) {
        uni.showModal({
          title: '验证错误',
          content: errorMessage,
          showCancel: false
        })
        return
      }

      const members = this.tableData.map(item => ({
        actualCompleteNumDay: item.actualCompleteNumDay,
        dayContentId: item.dayContentId
      }))

      const incompleteTasks = this.tableData.filter(
        item => item.actualCompleteNumDay == null || item.actualCompleteNumDay < 0
      )
      if (incompleteTasks.length > 0) {
        uni.showToast({
          icon: 'none',
          title: '请确保所有任务都有有效的本日实际完成量'
        })
        return
      }

      const allData = {
        dayId: this.dayId,
        path: this.photoPath,
        contentList: members
      }

      console.log(allData)

      uni.request({
        url: config.lpBmwUrl + '/bmw/workPlanDay/upload',
        method: 'post',
        data: JSON.stringify(allData),
        header: {
          'content-type': 'application/json',
          Authorization: uni.getStorageSync('realNameToken')
        },
        success: res => {
          console.log('日计划制定', res)
          if (res.data.code == 200) {
            // 模拟保存成功后提示用户
            uni.showToast({
              icon: 'success',
              title: '保存成功',
              duration: 2000, // 提示框显示时间，单位为毫秒
              success: () => {
                setTimeout(() => {
                  this.leftClick() // 在提示框消失后返回上一级页面
                }, 2000) // 确保与duration一致
              }
            })
          } else {
            uni.$u.toast(res.data.msg)
          }
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    // 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
        delta: 1 // 返回
      })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #fff;
}

.project-header {
  margin-bottom: 30rpx;
}

.project-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.completion-rates {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 28rpx;
}

.total-plan {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}

.total-input {
  width: 200rpx;
  height: 60rpx;
  border: 1px solid #ddd;
  padding: 0 20rpx;
  margin-left: 20rpx;
}

.table-container {
  border: 1px solid #ddd;
  margin-bottom: 30rpx;
}

.table-header,
.table-row {
  display: flex;
  font-size: 24rpx;
  padding: 15rpx 10rpx;
  border-bottom: 1px solid #ddd;
  align-items: center;
}

.table-header {
  background-color: #f5f5f5;
  font-weight: bold;
}

.table-body {
  background-color: #fff;
}

.table-row:nth-child(even) {
  background-color: #fafafa;
}

.table-row:last-child {
  border-bottom: none;
}

.table-row > * {
  display: flex;
  align-items: center;
}

.col-index {
  width: 60rpx;
  flex-shrink: 0;
}

.col-name {
  width: 140rpx;
  flex-shrink: 0;
}

.col-desc {
  flex: 1;
  /* min-width: 200rpx;  */
  flex-direction: column;
  align-items: flex-start;
}

.col-completion {
  /* width: 160rpx; */
  flex-shrink: 0;
  /* box-sizing: border-box;
  padding: 0 5rpx; */
  text-align: center;
  justify-content: center;

  width: 20%;
}

.completion-input {
  width: 100%;
  height: 50rpx;
  border: 1px solid #ddd;
  /* padding: 0 5rpx; */
  box-sizing: border-box;
  font-size: 24rpx;
}

input {
  background-color: #fff;
}

.image-upload-section {
  margin-top: 30rpx;
}

.upload-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.upload-area {
  width: 100%;
  height: 300rpx;
  border: 2rpx dashed #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.upload-text {
  color: #999;
  font-size: 28rpx;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-status {
  font-size: 24rpx;
  margin-top: 10rpx;
}

.upload-status.success {
  color: #52c41a;
}

.upload-status.error {
  color: #ff4d4f;
}
/* 确保隐藏输入字段 */
.hidden-input {
  display: none;
}
</style>
