<template>
  <view class="accept page-common">
    <div class="card">
      <uni-row :gutter="24">
        <uni-col :span="6">任务创建：</uni-col>
        <uni-col :span="6">
          <view class="coding-btn" @tap="codeSearch">编码检索</view>
        </uni-col>
        <uni-col :span="6">
          <view class="coding-btn" @tap="codeScanIdentify">编码识别</view>
        </uni-col>
        <uni-col :span="6">
          <view class="coding-btn" @tap="codeScan">二维码识别</view>
        </uni-col>
      </uni-row>
    </div>

    <ScanQrCode
        ref="scanQrCodeRef"
        @scanSuccess="handleScanSuccess"
        @scanError="handleScanError"
    />
    <div class="card">
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="6">设备编码：</uni-col>
        <uni-col :span="16">
          <uni-easyinput v-model="maInfo.maCode" placeholder="请输入设备编码" maxlength="20" />
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="6">退料单位：</uni-col>
        <uni-col :span="16">
          <uni-easyinput type="textarea" v-model="maInfo.unitName" autoHeight  disabled="true" :clearable="false" class="readonly-input"/>
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="6">退料工程：</uni-col>
        <uni-col :span="16">
          <uni-easyinput type="textarea" v-model="maInfo.proName" autoHeight disabled="true" :clearable="false" class="readonly-input" />
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="6">退料人：</uni-col>
        <uni-col :span="16">
          <uni-easyinput placeholder="请输入退料人" maxlength="10" v-model="backPerson" />
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="6">联系电话：</uni-col>
        <uni-col :span="16">
          <uni-easyinput placeholder="请输入联系电话" maxlength="11" v-model="phone" />
        </uni-col>
      </uni-row>

      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="8">物资类型：</uni-col>
        <uni-col :span="16">
          {{ maInfo.typeName }}
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="8">规格型号：</uni-col>
        <uni-col :span="16">
          {{ maInfo.typeModelName }}
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="8">设备状态：</uni-col>
        <uni-col :span="16">
          {{ maInfo.maStatusName }}
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="6">外观判定：</uni-col>
        <uni-col :span="16">
          <!-- <uni-easyinput placeholder="请输入内容" v-model="apDetection"/> -->
          <radio-group @change="changeRadio">
            <radio value="完好" checked style="margin-right: 5px">完好</radio>
            <radio value="不合格">不合格</radio>
          </radio-group>
        </uni-col>
      </uni-row>
      <uni-row :gutter="24" style="display: flex; align-items: center; margin-bottom: 20px">
        <uni-col :span="4">附件：</uni-col>
        <uni-col :span="20">
          <div class="upload-container">
            <div v-for="(img, index) in imgList" :key="index" class="upload-item">
              <image :src="img.url" style="width: 160rpx; height: 160rpx" mode="aspectFill"></image>
              <view class="delete-btn" @click.stop="deleteImage(index)">×</view>
            </div>
            <div class="upload" @click="uploadImg" v-if="imgList.length < 3">+</div>
          </div>
        </uni-col>
      </uni-row>
    </div>
    <div class="btn">
      <!-- <button class="btn-cont" @click="reject">取消</button> -->
      <button class="btn-cont" @click="submitCode">确认</button>
    </div>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getMachine, insertBack, getMachineByQrCodeApi,getMachineByCodeApi } from '../../services/back.js'
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
import { baseURL } from '@/utils/http'
import { useMemberStore } from '@/stores'
import { decryptWithSM4, encryptWithSM4, hashWithSM3AndSalt } from '@/utils/sm'
const memberStore = useMemberStore()
const backPerson = ref('')
const phone = ref('')
const apDetection = ref('完好') //外观判定
const imgBeseUrl = ref('') //图片展示
const imgList = ref([])
const bmFileInfos = ref([])
const qrCode = ref('') //二维码
const maInfo = ref({}) //二维码
const scanQrCodeRef = ref(null)


// 二维码扫码
const codeScan = async () => {
  qrCode.value = ''

  if (scanQrCodeRef.value) {
    scanQrCodeRef.value.scanQrCode()
  }
  // var mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
  // mpaasScanModule.mpaasScan(
  //     {
  //         // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
  //         scanType: ['qrCode', 'barCode'],
  //         // 是否隐藏相册，默认false不隐藏
  //         hideAlbum: false,
  //         //ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
  //         language: 'en',
  //         //相册选择照片识别错误提示(ios)
  //         failedMsg: '未识别到二维码，请重试',
  //         //Android支持全屏需要设置此参数
  //         screenType: 'full',
  //     },
  //     (ret) => {
  //         console.log(ret)
  //         if (ret.resp_code == 10) {
  //             uni.showToast({ title: '用户取消', icon: 'none' })
  //             maInfo.value = {}
  //         }
  //         if (ret.resp_code == 11) {
  //             uni.showToast({ title: '扫码失败', icon: 'none' })
  //         }
  //         if (ret.resp_code == 1000) {
  //             // uni.showToast({ title: '扫码成功', icon: 'none' })
  //             qrCode.value = ret.resp_result
  //             codeToBack()
  //         }
  //     },
  // )
}
// 二维码
const codeToBack = async () => {
  if (qrCode.value == '') {
    uni.showToast({ title: '扫码识别失败', icon: 'none' })
  } else {
    let param = {
      qrCode: qrCode.value,
    }
    //通过二维码获取相绑定的设备编码
    const res = await getMachineByQrCodeApi(param)
    console.log(res)
    if (res.code == 200) {
      if (res.data.length > 0) {
        maInfo.value = res.data[0]
        console.log('22222222', maInfo.value)
      } else {
        uni.showToast({ title: '扫码二维码未绑定设备编码！', icon: 'none' })
      }
    } else {
      uni.showToast({ title: res.data.msg, icon: 'none' })
    }
  }
}

const changeRadio = (e) => {
  console.log(e.detail.value)
  apDetection.value = e.detail.value
}


const codeSearch = async () => {
    let param = {
    maCode: maInfo.value.maCode,
  }
  //通过二维码获取相绑定的设备编码
  const res = await getMachineByCodeApi(param)
  console.log(res)
  if (res.code == 200) {

      maInfo.value = res.data
      console.log('22222222', maInfo.value)
    
    //  else {
    //   uni.showToast({ title: '未查询到该设备编号信息！', icon: 'none' })
    // }
  } else {
    uni.showToast({ title: res.data.msg, icon: 'none' })
  }
}

//提交
const submitCode = () => {
  if (maInfo.value.agreementId == undefined) {
    uni.showToast({ title: '请先扫码确认退料单位,退料工程!', icon: 'none' })
  } else if (backPerson.value == '') {
    uni.showToast({ title: '请填写退料人!', icon: 'none' })
  } else {
    let info = {
      agreementId: maInfo.value.agreementId,
      backPerson: backPerson.value,
      phone: phone.value,
      proId: maInfo.value.proId,
      unitId: maInfo.value.unitId,
    }
    let detail = [
      {
        maId: maInfo.value.maId,
        maCode: maInfo.value.maCode,
        typeId: maInfo.value.typeId,
        apDetection: apDetection.value,
        goodNum: apDetection.value == '完好' ? 1 : 0,
        badNum: apDetection.value == '不合格' ? 1 : 0,
        bmFileInfos: bmFileInfos.value,
        preNum: 1,
      },
    ]
    let param = {
      backApplyInfo: info,
      backApplyDetailsList: detail,
    }
    insertBack(param)
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            uni.showToast({ title: '新增成功', icon: 'none' })
            uni.navigateTo({ url: `/pages/back/index` })
            // uni.navigateBack({
            //   delta: 1, // 返回到已存在的页面
            // })
          } else {
            uni.showToast({ title: res.msg, icon: 'none' })
          }
        })
        .catch((error) => {
          console.log(error)
        })
  }
}

const deleteImage = (index) => {
  imgList.value.splice(index, 1)
  bmFileInfos.value.splice(index, 1)
}

//上传
const uploadImg = () => {
  const count = 3 - imgList.value.length 
  if (count <= 0) {
    uni.showToast({ title: '最多上传3张图片', icon: 'none' })
    return
  }else{
      uni.showActionSheet({
        itemList: ['拍照', '从相册选择'],
        success: (res) => {
          if (res.tapIndex === 0) {
            getCameraFj()
          } else if (res.tapIndex === 1) {
            // 从相册选择
            getPhotoFj()
          }
        },
        fail: (err) => {
          console.error('操作菜单选择失败:', err)
        },
      })
  }
}

// 附件拍照
const getCameraFj = () => {
      navigator.camera.getPicture(onCameraSuccessFj, onCameraErrorFj, {
        quality: 50,
        destinationType: window.Camera.DestinationType.DATA_URL,
        sourceType: window.Camera.PictureSourceType.CAMERA,
      })
}
// 附件从相册选择
const getPhotoFj = () => {
      navigator.camera.getPicture(onCameraSuccessFj, onCameraErrorFj, {
        quality: 50,
        destinationType: window.Camera.DestinationType.DATA_URL,
        sourceType: window.Camera.PictureSourceType.SAVEDPHOTOALBUM,
      })
}

const onCameraErrorFj = (message) => {
      console.log(message)
}

// 将 base64 数据转换为 Blob 对象
// const base64ToBlob = (base64Data, contentType = 'image/jpeg') => {
//   const byteCharacters = atob(base64Data.split(',')[1]);
//   const byteNumbers = new Array(byteCharacters.length);
//   for (let i = 0; i < byteCharacters.length; i++) {
//     byteNumbers[i] = byteCharacters.charCodeAt(i);
//   }
//   const byteArray = new Uint8Array(byteNumbers);
//   return new Blob([byteArray], { type: contentType });
// }



const onCameraSuccessFj = (file) => {
      uploadSignUrlFj(file)
}

const generateRandomString = (length) => {
      let result = '';
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      const charactersLength = characters.length;
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      return result;
}

const uploadSignUrlFj = (file) => {
       const base64Data = file

        uni.request({  
          url: '/file/uploadBase64',
          method: 'POST',
          data: {
            base64File:base64Data,
            fileName: `${generateRandomString(10)}_${Date.now()}.png`,
            fileType: 'image/png'
          },
          success: (uploadRes) => {
            if(!uploadRes.data.code){
              uploadRes = JSON.parse(decryptWithSM4(uploadRes.data))
            }else{
              uploadRes = JSON.parse(uploadRes.data)
            }
            if (uploadRes.code && uploadRes.code == 200) {
              imgList.value.push({
                url: uploadRes.data.url, // Show local path first
                serverUrl: uploadRes.data.url // Store server URL
              })
              bmFileInfos.value.push({
                name: uploadRes.data.name,
                url: uploadRes.data.url,
                taskType: '10'
              })
                uni.showToast({ title: '上传成功', icon: 'none' })
            } else {
              uni.showToast({ title: '上传失败', icon: 'none' })
            }
          },
          fail: (err) => {
            console.error('上传失败', err)
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        })
    }




  // uni.chooseImage({
  //   count: count, // Allow to select up to remaining slots
  //   sizeType: ['original', 'compressed'],
  //   sourceType: ['album', 'camera'],
  //   success: (res) => {
  //     const tempFilePaths = res.tempFilePaths
  //     tempFilePaths.forEach((filePath, index) => {
  //       uni.uploadFile({
  //         url: '/file/upload',
  //         filePath: filePath,
  //         name: 'file',
  //         success: (uploadRes) => {
  //           uploadRes = JSON.parse(uploadRes.data)
  //           if (uploadRes.code && uploadRes.code == 200) {
  //             imgList.value.push({
  //               url: filePath, // Show local path first
  //               serverUrl: uploadRes.data.url // Store server URL
  //             })
  //             bmFileInfos.value.push({
  //               name: uploadRes.data.name,
  //               url: uploadRes.data.url,
  //               taskType: '10'
  //             })
  //             if (index === tempFilePaths.length - 1) {
  //               uni.showToast({ title: '上传成功', icon: 'none' })
  //             }
  //           } else {
  //             uni.showToast({ title: '上传失败', icon: 'none' })
  //           }
  //         },
  //         fail: (err) => {
  //           console.error('上传失败', err)
  //           uni.showToast({ title: '上传失败', icon: 'none' })
  //         }
  //       })
  //     })
  //   }
  // })


// 处理扫描成功事件
const handleScanSuccess = (result) => {
  qrCode.value = result?.data?.split('?qrcode=')[1] || result?.data
  if (qrCode.value === '') {
    uni.showToast({ title: '扫码识别失败', icon: 'none' })
  } else {
    getMaInfoScan()
  }
}

// 处理扫描失败事件
const handleScanError = (error) => {
  console.error('扫描出错:', error.message)
  uni.showToast({ title: error.message, icon: 'none' })
}

//查看是否是该规格型号
const getMaInfoScan = async () => {
  let param = {
    qrCode: qrCode.value,
  }
  //通过二维码获取相绑定的设备编码
  const res = await getMachineByQrCodeApi(param)
  console.log(res)
  if (res.code == 200) {
    if (res.data.length > 0) {
      maInfo.value = res.data[0]
      console.log('22222222', maInfo.value)
    } else {
      uni.showToast({ title: '扫码二维码未绑定设备编码！', icon: 'none' })
    }
  } else {
    uni.showToast({ title: res.data.msg, icon: 'none' })
  }
}

onLoad((options) => {
  console.log(options)
  // backPerson.value = memberStore.userInfo.nickName
})
</script>

<script>
export default {
  methods: {
    codeScanIdentify() {
      // this.$refs.scanQrCodeRef.scanQrCode()

      console.log('编码识别')

      uni.showActionSheet({
        itemList: ['拍照', '从相册选择'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.getCamera()
          } else if (res.tapIndex === 1) {
            // 从相册选择
            this.getPhoto()
          }
        },
        fail: (err) => {
          console.error('操作菜单选择失败:', err)
        },
      })
    },

    // 拍照
    getCamera() {
      navigator.camera.getPicture(this.onCameraSuccess, this.onCameraError, {
        quality: 50,
        destinationType: window.Camera.DestinationType.DATA_URL,
        sourceType: window.Camera.PictureSourceType.CAMERA,
      })
    },
    // 从相册选择
    getPhoto() {
      navigator.camera.getPicture(this.onCameraSuccess, this.onCameraError, {
        quality: 50,
        destinationType: window.Camera.DestinationType.DATA_URL,
        sourceType: window.Camera.PictureSourceType.SAVEDPHOTOALBUM,
      })
    },

    onCameraError(message) {
      console.log(message)
    },
    onCameraSuccess(file) {
      // const file1 = "data:image/jpeg;base64," + file;
      const file1 = file
      let params = {
        image: file1,
        jiju_type: '',
        auth_lic:
            'xIWDlaDVdijcBB4mjhGCPYk5Kvk8tHZJbUn+vW+ih15+MYx98e/PXyBmKL5gFcWMPznLgDA15QuSAnZQSLddwdy9HkZgtuQDEEZZ351Eyb1eiDUccUnyoSGIrNimbx5TooBNNPYqU4qJeFrPJXAqjBHzRrxoBxuR2CEGKQPgHC4=',
      }

      this.testParams = params

      uni.request({
        url: '/material/app/ocr/getOcrCode',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/json', // 根据后端要求设置请求头，常见的 POST 请求数据格式为 JSON
        },
        success: (res) => {
          const { data: resData } = res

          if (resData.data.data.result) {
            this.getProjectInfoByCode(resData.data.data.result)
          } else {
            uni.showToast({
              title: '识别失败！' + resData.data.msg,
              icon: 'none',
            })
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '请求失败：' + err.errMsg,
            icon: 'none',
          })
        },
      })
    },

    // 根据code查询工程等信息
    getProjectInfoByCode(code) {
      console.log('根据code查询工程等信息', code)
      uni.showToast({
        title: '识别成功！' + code,
        icon: 'none',
        duration: 2000,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.readonly-input {
  ::v-deep .uni-easyinput__content.is-disabled {
    min-height: 30px !important;
    height: auto !important;
    opacity: 1; /* 覆盖禁用状态的透明度 */
    background-color: #fff; /* 覆盖灰色背景 */
    color: #333; /* 覆盖文字颜色，设置为和正常状态一样 */
    .uni-easyinput__content-input {
      color: #333; /* 确保输入框内文字颜色也被覆盖 */
    }
  }
}
.upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.upload-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30rpx;
  height: 30rpx;
  background: #ff4d4f;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  z-index: 1;
}

::v-deep .uni-radio-input {
  width: 16px;
  height: 16px;
}
.accept {
  padding: 24rpx;
  height: 95vh;
  word-break: break-all;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;

  // 卡片样式
  .card {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 24rpx;

    // 卡片标题
    > div:first-child {
      font-size: 32rpx;
      font-weight: 600;
      color: #262626;
      margin-bottom: 24rpx;
      position: relative;
      padding-left: 24rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background: #3784fb;
        border-radius: 6rpx;
      }
    }

    // 表单样式
    :deep(.uni-forms) {
      .uni-forms-item {
        padding: 18rpx 0;
        margin-bottom: 0;
        border-bottom: 2rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .uni-forms-item__label {
          color: #8c8c8c;
        }

        span {
          color: #262626;
          font-size: 28rpx;
        }
      }
    }

    // 扫码按钮样式
    .coding-btn {
      height: 70rpx;
      line-height: 70rpx;
      background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
      border-radius: 12rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      font-weight: 600;
      box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        opacity: 0.9;
        box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
      }

      // 检索按钮样式
      &.search-btn {
        background: #fff7eb;
        color: #fa8c16;
        border: 2rpx solid #fa8c16;
        box-shadow: none;

        &:active {
          background: #fff3e0;
        }
      }
    }

    // 扫码区域
    .scan-area {
      width: 100%;
      height: 240rpx;
      margin: 24rpx 0;
      border: 2rpx dashed #d9d9d9;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #8c8c8c;
      font-size: 28rpx;
    }

    // 信息展示行
    :deep(.uni-row) {
      /* margin-bottom: 24rpx; */

      &:last-child {
        margin-bottom: 0;
      }

      .uni-col-6 {
        color: #8c8c8c;
        font-size: 28rpx;
      }

      .uni-col-16 {
        color: #262626;
        font-size: 28rpx;
      }

      // 输入框样式
      .uni-easyinput__content {
        background-color: #f7f8fa;
        border: 2rpx solid #e8e8e8;
        border-radius: 12rpx;
        height: 75rpx;
        padding: 0 24rpx;
        transition: all 0.3s ease;

        &:focus-within {
          border-color: #3784fb;
          box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
        }

        .uni-easyinput__content-input {
          font-size: 28rpx;
          height: 75rpx;
          line-height: 75rpx;
        }
      }
    }

    // 上传区域样式
    .upload {
      width: 160rpx;
      height: 160rpx;
      background-color: #f7f8fa;
      border: 2rpx dashed #d9d9d9;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48rpx;
      color: #bfbfbf;
      transition: all 0.3s ease;

      &:active {
        background-color: #f0f0f0;
        border-color: #3784fb;
      }

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        object-fit: cover;
      }
    }
  }

  // 底部按钮
  .btn {
    margin-top: auto;
    padding: 32rpx;
    // background: #fff;
    // box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);

    .btn-cont {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
      color: #fff;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 600;
      box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
        opacity: 0.9;
        box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
      }
    }
  }
}
</style>