recycle-front/pages/manager/inspect-result.vue

<template>
  <view class="inspect-result-container" :class="{ 'popup-open': isPopupOpen }">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="20" color="#222" />
      </view>
      <text class="nav-title">步骤二：合格质检</text>
      <view class="nav-icons">
        <uni-icons type="more" size="24" color="#222" />
      </view>
    </view>
    <view class="main-content">
      <!-- 合格产品卡片 -->
      <view v-if="hasQualifiedItems" class="result-card">
        <view class="card-title">合格产品</view>
        <view v-for="item in qualifiedList" :key="item.shopId" class="result-row">
          <view class="row-main">
            <view class="goods-name-section">
              <text class="goods-name">{{ item.shopId ? getGoodsName(item.shopId) : (item.id === 'unrecyclable' ? '不可回收'
                : (item.id === 'quality_issue' ? '质量问题' : ''))}}</text>
              <text class="goods-brand">{{ getItemBrand(item.shopId) }}</text>
            </view>
            <text class="row-count">x{{ item.count }}</text>
            <text class="row-total">¥{{ item.total }}</text>
          </view>
          <view class="row-reason">
            <text class="reason-label">{{ getGoodsName(item.shopId) }}</text>
            <view class="reason-select" @tap="selectReasonForQualified(item)">
              <text class="reason-placeholder" :class="{ 'selected': hasSelectedReason(item) }">
                {{ hasSelectedReason(item) ? '已选择' : '请选择理由（选填）' }}
              </text>
              <uni-icons type="right" size="18" color="#bbb" />
            </view>
          </view>
        </view>
      </view>
      <!-- 不合格产品卡片 -->
      <view v-if="hasUnqualifiedItems" class="result-card">
        <view class="card-title">不合格产品</view>
        <view v-for="group in unqualifiedGroups" :key="group.shopId" class="result-group">
          <view class="row-main">
            <view class="goods-name-section">
              <text class="goods-name">质量问题</text>
              <text class="goods-brand"></text>
            </view>
            <text class="row-count">x{{ group.count }}</text>
            <text class="row-total">¥{{ group.total }}</text>
          </view>
          <!-- 选择理由模块 -->
          <view v-if="inspectData && inspectData.list">
            <view v-for="(item, index) in (inspectData.list.find(i => i.id === 'quality_issue')?.commonOrderList || [])"
              :key="item.id || item.testingStatus" class="row-reason">
              <text class="reason-label">质量问题{{ index + 1 }}</text>
              <view class="reason-select" @tap="selectReason(item)">
                <text class="reason-placeholder" :class="{ 'selected': hasSelectedReason(item) }">
                  {{ hasSelectedReason(item) ? '已选择' : '请选择理由' }}
                </text>
                <uni-icons type="right" size="18" color="#bbb" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 不可回收产品卡片 -->
      <view v-if="hasUnrecyclableItems" class="result-card">
        <view class="card-title">不可回收产品</view>
        <view v-for="item in unrecyclableList" :key="item.id" class="result-group">
          <view class="row-main">
            <view class="goods-name-section">
              <text class="goods-name">不可回收</text>
              <text class="goods-brand"></text>
            </view>
            <text class="row-count">x{{ item.count }}</text>
            <text class="row-total">¥{{ item.total }}</text>
          </view>
          <!-- 选择理由模块 -->
          <view v-if="inspectData && inspectData.list">
            <view v-for="(commonItem,index) in (inspectData.list.find(i => i.id === 'unrecyclable')?.commonOrderList || [])"
              :key="commonItem.id || commonItem.testingStatus" class="row-reason">
              <text class="reason-label">不可回收{{ index +1 }}</text>
              <view class="reason-select" @tap="selectReason(commonItem)">
                <text class="reason-placeholder" :class="{ 'selected': hasSelectedReason(commonItem) }">
                  {{ hasSelectedReason(commonItem) ? '已选择' : '请选择理由' }}
              </text>
              <uni-icons type="right" size="18" color="#bbb" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 回收信息卡片 -->
      <view class="result-card info-card">
        <view class="card-title-row">
          <text class="card-title">回收信息</text>
          <view class="status-tag">待质检</view>
        </view>
        <view class="info-row">
          <text class="info-label">订单编号</text>
          <text class="info-value copy-btn">{{ order?.ordeNo || 'RE82738127861525' }} 复制</text>
        </view>
        <view class="info-row">
          <text class="info-label">取件时间</text>
          <text class="info-value">{{ order?.goTime || '2025-03-20 11:00' }}</text>
        </view>
      </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="footer-btns">
      <button class="btn-outline" @tap="goPrev">上一步</button>
      <button class="btn-main" @tap="finishInspect">完成质检</button>
    </view>
    <!-- 理由弹窗 -->
    <uni-popup ref="reasonPopup" type="bottom" :mask-click="false" :safe-area="false" class="reason-popup-wrapper">
      <view class="reason-popup">
        <view class="popup-header">
          <text class="popup-close" @tap="closeReasonPopup">关闭</text>
          <text class="popup-title">{{ currentReasonTitle }}</text>
        </view>
        <scroll-view class="popup-content" scroll-y="true">
          <view class="popup-section">
            <text class="section-label">上传图片</text>
            <view class="img-list">
              <view class="img-item add" @tap="addReasonImg">
                <uni-icons type="plusempty" size="32" color="#bbb" />
              </view>
              <view v-for="(img, idx) in reasonImages" :key="idx" class="img-item">
                <image :src="img" class="img" />
                <view class="img-del" @tap="removeReasonImg(idx)">×</view>
              </view>
            </view>
          </view>
          <view class="popup-section">
            <text class="section-label">选择理由</text>
            <view v-for="(item, index) in reasonOptions" :key="item.id" class="reason-row" @tap="toggleReason(index)">
              <view :class="['checkbox', { checked: reasonChecked.includes(item.reason) }]" />
              <text class="reason-text">{{ item.reason }}</text>
            </view>
          </view>
        </scroll-view>
        <button class="popup-save-btn" @tap="saveReason">保存</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
import OSS from '@/utils/oss-upload/oss/index.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      inspectData: null, // 从步骤一传过来的质检数据
      order: null, // 订单数据
      qualifiedList: [],
      unqualifiedGroups: [],
      unrecyclableList: [],
      goodsNameMap: {}, // 商品id => 名称
      reasonPopupVisible: false,
      currentReasonTitle: '',
      reasonImages: [],
      reasonOptions: [],
      reasonChecked: [],
      currentReasonItem: null,
      isPopupOpen: false // 控制弹窗状态
    }
  },
  computed: {
    hasQualifiedItems() {
      return this.qualifiedList && this.qualifiedList.length > 0
    },
    hasUnqualifiedItems() {
      return this.unqualifiedGroups && this.unqualifiedGroups.length > 0
    },
    hasUnrecyclableItems() {
      return this.unrecyclableList && this.unrecyclableList.length > 0
    }
  },
  onLoad(options) {
    // 接收质检数据和订单数据
    if (options && options.resultData) {
      try {
        const resultData = JSON.parse(decodeURIComponent(options.resultData))
        this.inspectData = resultData.inspectResult
        this.order = resultData.order
        this.processInspectData()
      } catch (error) {
        console.error('解析数据失败:', error)
      }
    }
    if (options && options.inspectData && !options.resultData) {
      try {
        this.inspectData = JSON.parse(decodeURIComponent(options.inspectData))
        this.processInspectData()
      } catch (error) {
        console.error('解析质检数据失败:', error)
      }
    }
  },
  methods: {
    async processInspectData() {
      if (!this.inspectData || !this.inspectData["list"]) return
      this.qualifiedList = []
      this.unqualifiedGroups = []
      this.unrecyclableList = []
      // 只收集普通商品的 shopId 作为 goodsId
      const allIds = []
      this.inspectData["list"].forEach(item => {
        if (item.shopId && item.id !== 'unrecyclable' && item.id !== 'quality_issue') {
          allIds.push(item.shopId)
        }
      })
      console.log('allIds', allIds)
      const uniqueIds = Array.from(new Set(allIds.filter(Boolean)))
      console.log('uniqueIds', uniqueIds)
      await this.fetchGoodsNames(uniqueIds)
      // 合格商品
      this.inspectData["list"].forEach(item => {
        if (item.qualifiedNum > 0 && item.id !== 'unrecyclable' && item.id !== 'quality_issue') {
          this.qualifiedList.push({
            shopId: item.shopId,
            count: item.qualifiedNum,
            total: item.price
          })
        }
      })
      // 不合格商品（只展示质量问题）
      this.inspectData["list"].forEach(item => {
        if (item.id === 'quality_issue' && item.noQualifiedNum > 0) {
          this.unqualifiedGroups.push({
            shopId: item.id,
            count: item.noQualifiedNum,
            total: item.price,
            items: item.commonOrderList ? [...item.commonOrderList] : []
          })
        }
      })
      // 不可回收商品
      this.inspectData["list"].forEach(item => {
        if (item.id === 'unrecyclable' && item.unrecyclable > 0) {
          this.unrecyclableList.push({
            id: item.id,
            count: item.unrecyclable,
            total: item.price
          })
        }
      })
    },
    async fetchGoodsNames(ids) {
      // 批量获取商品名称
      const nameMap = {}
      for (const id of ids) {
        try {
          const res = await this.$api('getGoodsDetail', { goodsId: id })
          if (res && res.code === 200 && res.result) {
            nameMap[id] = res.result.name
          }
        } catch (e) {
          nameMap[id] = '未知商品'
        }
      }
      this.goodsNameMap = nameMap
    },
    getGoodsName(id) {
      return this.goodsNameMap[id] || '未知商品'
    },
    goBack() {
      uni.navigateBack()
    },
    goPrev() {
      uni.navigateBack()
    },
    finishInspect() {
      // 校验理由必填性
      // 1. 合格产品理由可选填
      // 2. 质量问题和不可回收理由必填
      // 检查质量问题
      const qualityItem = this.inspectData["list"].find(item => item.id === 'quality_issue')
      if (qualityItem && qualityItem.noQualifiedNum > 0) {
        const hasReason = qualityItem.commonOrderList && qualityItem.commonOrderList.some(c => {
          // 只要填写了理由或图片即可
          return (c.testingInstructions && c.testingInstructions.trim() !== '') ||
            (c.testingImages && c.testingImages.trim() !== '')
        })
        if (!hasReason) {
          uni.showToast({ title: '质量问题理由必填', icon: 'none' })
          return
        }
      }
      // 检查不可回收
      const unrecyclableItem = this.inspectData["list"].find(item => item.id === 'unrecyclable')
      if (unrecyclableItem && unrecyclableItem.unrecyclable > 0) {
        const hasReason = unrecyclableItem.commonOrderList && unrecyclableItem.commonOrderList.some(c => {
          return (c.testingInstructions && c.testingInstructions.trim() !== '') ||
            (c.testingImages && c.testingImages.trim() !== '')
        })
        if (!hasReason) {
          uni.showToast({ title: '不可回收理由必填', icon: 'none' })
          return
        }
      }
      // 在提交前将质量问题和不可回收中的id值置为空
      const processedList = this.inspectData["list"].map(item => {
        if (item.id === 'quality_issue' || item.id === 'unrecyclable') {
          // 对于质量问题和不可回收，将id置为空
          return { ...item, id: '' }
        }
        return item
      })
      
      const inspectDatas = {...this.inspectData, list: JSON.stringify(processedList, null, 2)}
      console.log('最终的质检数据:', inspectDatas);
      this.$api('submitQualityInfo',  inspectDatas , res => {
        if (res && res.code === 200) {
          uni.showToast({ title: '质检完成', icon: 'success' })
          uni.reLaunch({ url: '/pages/component/home' })
        }
      })
      uni.showToast({ title: '完成质检', icon: 'success' })
    },
    selectReason(item) {
      // 直接使用传入的item，因为它已经是commonOrderList中的具体项
      let popupItem = item
      let type = 0 // 默认类型
      
      // 根据testingStatus确定类型
      if (item.testingStatus === 1) {
        type = 1 // 质量问题
      } else if (item.testingStatus === 2) {
        type = 2 // 不可回收
        }
      
      this.currentReasonItem = popupItem
      // 判断类型，动态设置标题
      if (popupItem.testingStatus === 1) {
        this.currentReasonTitle = '质量问题'
      } else if (popupItem.testingStatus === 2) {
        this.currentReasonTitle = '不可回收'
      } else {
        this.currentReasonTitle = this.getGoodsName(popupItem.shopId || popupItem.id)
      }
      // 只使用testingImages字段
      if (popupItem.testingImages && popupItem.testingImages.trim() !== '') {
        this.reasonImages = popupItem.testingImages.split(',').filter(img => img.trim() !== '')
      } else {
        this.reasonImages = []
      }
      // 不在这里设置reasonChecked
      this.selectReasonForUnqualified(popupItem, type)
      this.lockScroll()
      this.$refs.reasonPopup.open()
    },
    selectReasonForQualified(item) {
      this.currentReasonItem = item
      this.currentReasonTitle = this.getGoodsName(item.shopId || item.id)
      // 只使用testingImages字段
      if (item.testingImages && item.testingImages.trim() !== '') {
        this.reasonImages = item.testingImages.split(',').filter(img => img.trim() !== '')
      } else {
        this.reasonImages = []
      }
      // 不在这里设置reasonChecked
      this.selectReasonForUnqualified(item, 1)
      this.lockScroll()
      this.$refs.reasonPopup.open()
    },

    selectReasonForUnqualified(item, type) {
      // 根据类型确定classId
      let classId = ''
      if (type === 1) {
        // 质量问题
        classId = 'quality_issue'
      } else if (type === 2) {
        // 不可回收
        classId = 'unrecyclable'
      } else {
        // 普通商品，使用shopClass
        classId = item.shopClass || ''
      }
      
      console.log('[selectReasonForUnqualified] classId:', classId, 'type:', type)
      
      this.$api('getcheckoutReasons', {
        classId: classId,
        type: type
      }, res => {
        if (res.code == 200) {
          this.reasonOptions = res.result;
          if (item.testingInstructions && item.testingInstructions.trim() !== '') {
            this.reasonChecked = item.testingInstructions.split(',').map(s => s.trim()).filter(Boolean)
          } else {
            this.reasonChecked = []
          }
          this.$nextTick(() => {
            this.reasonChecked = [...this.reasonChecked]
            console.log('[selectReasonForUnqualified] reasonOptions:', this.reasonOptions)
            console.log('[selectReasonForUnqualified] reasonChecked:', this.reasonChecked)
          })
        } else {
          console.error('[selectReasonForUnqualified] API返回错误:', res)
          uni.showToast({
            title: '获取理由列表失败',
            icon: 'none'
          })
        }
      }, err => {
        console.error('[selectReasonForUnqualified] API调用失败:', err)
        uni.showToast({
          title: '获取理由列表失败',
          icon: 'none'
        })
      })
    },
    closeReasonPopup() {
      this.unlockScroll()
      this.$refs.reasonPopup.close()
    },
    addReasonImg() {
      // 检查是否已达到最大数量限制
      if (this.reasonImages.length >= 3) {
        uni.showToast({
          title: '最多只能上传3张图片',
          icon: 'none'
        })
        return
      }

      uni.chooseMedia({
        count: 3 - this.reasonImages.length, // 剩余可选择数量
        mediaType: ['image'], // 只选择图片
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
        maxDuration: 30,
        sizeType: [ 'compressed'],
        camera: 'back',
        success: (res) => {
          console.log('选择的图片:', res.tempFiles)

          // 显示上传进度
          uni.showLoading({
            title: '上传中...'
          })

          // 处理选择的图片
          const uploadPromises = res.tempFiles.map(file => {
            return this.uploadImageToOSS(file.tempFilePath)
          })

          // 批量上传
          Promise.all(uploadPromises).then(urls => {
            this.reasonImages = this.reasonImages.concat(urls)
            uni.hideLoading()
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            })
          }).catch(error => {
            console.error('上传失败:', error)
            uni.hideLoading()
            uni.showToast({
              title: '上传失败，请重试',
              icon: 'none'
            })
          })
        },
        fail: (error) => {
          console.error('选择图片失败:', error)
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          })
        }
      })
    },
    async uploadImageToOSS(filePath) {
      try {
        // 使用项目中的OSS上传工具
        const url = await OSS.ossUpload(filePath)
        return url
      } catch (error) {
        console.error('OSS上传失败:', error)
        throw error
      }
    },
    removeReasonImg(idx) {
      this.reasonImages.splice(idx, 1)
    },
    toggleReason(idx) {
      const val = this.reasonOptions[idx].reason.toString()
      const i = this.reasonChecked.indexOf(val)
      if (i > -1) {
        this.reasonChecked.splice(i, 1)
      } else {
        this.reasonChecked.push(val)
      }
      this.reasonChecked = [...this.reasonChecked]
      console.log('[toggleReason] reasonChecked:', this.reasonChecked)
    },
    saveReason() {
      if (this.currentReasonItem) {
        console.log('this.currentReasonItem', this.currentReasonItem)
        // 直接更新当前项
        this.currentReasonItem.testingInstructions = this.reasonChecked.join(',')
        this.currentReasonItem.testingImages = this.reasonImages.join(',')
      }
      this.closeReasonPopup()
    },


    lockScroll() {
      // 禁用页面滚动
      this.isPopupOpen = true
    },
    unlockScroll() {
      // 恢复页面滚动
      this.isPopupOpen = false
    },
    async onRefresh() {
      await this.refreshData && this.refreshData()
    },
    refreshData() {
      // 可根据实际需求刷新质检结果数据
      // 例如重新请求接口或重置数据
    },
    getItemBrand(id) {
      if (this.order && this.order.commonOrderList) {
        const orderItem = this.order.commonOrderList.find(item => item.id == id)
        return orderItem ? (orderItem.pinName || '') : ''
      }
      return ''
    },
    parseTestingInstructions() {
      return []
    },
    hasSelectedReason(item) {
      // console.log('item', item)
      // 检查该商品是否已选择理由或上传图片
      return (item.testingInstructions && item.testingInstructions.trim() !== '') ||
             (item.testingImages && item.testingImages.trim() !== '')
    }
  }
}
</script>

<style lang="scss" scoped>
.inspect-result-container {
  min-height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;

  &.popup-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
  }
}

.nav-bar {
  display: flex;
  align-items: center;
  height: calc(150rpx + var(--status-bar-height));
  padding: 0 32rpx;
  padding-top: var(--status-bar-height);
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-sizing: border-box;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);

  .back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #222;
  }

  .nav-icons {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.main-content {
  margin-top: calc(200rpx + var(--status-bar-height));
  display: flex;
  flex-direction: column;
  background: none;
  padding-bottom: 120px;
}

.result-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  margin: 0 24px 24px 24px;
  padding: 24px 24px 0 24px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin-bottom: 18px;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.status-tag {
  background: #fff7e6;
  color: #ffb400;
  font-size: 12px;
  border-radius: 12px;
  padding: 2px 14px;
  font-weight: 400;
  height: 22px;
  display: flex;
  align-items: center;
}

.result-row,
.result-group {
  margin-bottom: 18px;
}

.row-main {
  display: flex;
  align-items: center;

  .goods-name-section {
    display: flex;
    flex-direction: column;
    margin-right: 8px;

    .goods-name {
      font-size: 14px;
      font-weight: bold;
      color: #222;
      line-height: 1.2;
    }

    .goods-brand {
      font-size: 11px;
      color: #999;
      font-weight: normal;
      line-height: 1.2;
      margin-top: 2px;
    }
  }

  .row-name {
    font-size: 14px;
    font-weight: bold;
    color: #222;
    margin-right: 8px;
  }

  .row-count {
    font-size: 13px;
    color: #888;
    margin-right: 8px;
  }

  .row-total {
    font-size: 14px;
    color: #222;
    font-weight: bold;
    margin-left: auto;
  }
}

.row-reason {
  display: flex;
  align-items: center;
  margin-top: 8px;

  .reason-label {
    font-size: 13px;
    color: #bbb;
    min-width: 80px;
  }

  .reason-input {
    flex: 1;
    height: 36px;
    border-radius: 12px;
    background: #f6f6f6;
    border: none;
    font-size: 14px;
    color: #222;
    padding-left: 12px;
    margin-left: 8px;
  }

  .reason-select {
    flex: 1;
    display: flex;
    align-items: center;
    height: 36px;
    border-radius: 12px;
    background: #f6f6f6;
    font-size: 14px;
    color: #bbb;
    padding-left: 12px;
    margin-left: 8px;
    justify-content: flex-end;
  }

  .reason-placeholder {
    color: #bbb;
    font-size: 14px;

    &.selected {
      color: #52c41a;
      font-weight: 500;
    }
  }
}

.info-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  margin: 0 24px 24px 24px;
  padding: 24px 24px 0 24px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .info-label {
    font-size: 13px;
    color: #bbb;
    min-width: 80px;
  }

  .info-value {
    font-size: 13px;
    color: #222;
    margin-left: 8px;
  }

  .copy-btn {
    color: #ffb400;
    margin-left: 8px;
  }
}

.footer-btns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  gap: 16px;
  padding: 12px 16px 24px 16px;
  z-index: 101;

  .btn-outline {
    flex: 1;
    height: 40px;
    border-radius: 16px;
    border: 1px solid #ffe09a;
    color: #ffb400;
    background: #fff0d2;
    font-size: 15px;
    font-weight: 500;
    box-shadow: none;
    padding: 0 18px;
  }

  .btn-main {
    flex: 1;
    height: 40px;
    border-radius: 16px;
    background: linear-gradient(90deg, #ffd01e 0%, #ffac04 100%);
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 500;
    box-shadow: none;
    padding: 0 18px;
  }
}

.reason-popup-wrapper {
  z-index: 10000 !important;
}

.reason-popup-wrapper .uni-popup__wrapper {
  z-index: 10000 !important;
}

.reason-popup {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 0;
  height: 75vh;
  position: relative;
  z-index: 9999;

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;

    .popup-close {
      position: absolute;
      left: 20px;
      color: #666;
      font-size: 16px;
    }

    .popup-title {
      font-size: 18px;
      font-weight: 600;
      color: #222;
    }
  }

  .popup-content {
    height: calc(75vh - 60px - 82px);
    overflow-y: auto;
  }

  .popup-section {
    padding: 0 20px 24px 20px;

    &:first-child {
      padding-top: 24px;
    }

    .section-label {
      font-size: 16px;
      color: #222;
      margin-bottom: 16px;
      display: block;
      font-weight: 500;
    }

    .img-list {
      display: flex;
      gap: 12px;
      margin-bottom: 32px;

      .img-item {
        width: 80px;
        height: 80px;
        border-radius: 12px;
        background: #f8f8f8;
        position: relative;

        .img {
          width: 100%;
          height: 100%;
          border-radius: 12px;
          object-fit: cover;
        }

        .img-del {
          position: absolute;
          top: -6px;
          right: -6px;
          width: 24px;
          height: 24px;
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 24px;
          font-size: 16px;
          font-weight: bold;
        }

        &.add {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f8f8f8;
          border: 2px dashed #ddd;
          color: #bbb;
        }
      }
    }

    .reason-row {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;

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

      .checkbox {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 2px solid #ddd;
        margin-right: 12px;
        background: #fff;
        position: relative;

        &.checked {
          border-color: #ffb400;
          background: #ffb400;

          &::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 12px;
            font-weight: bold;
          }
        }
      }

      .reason-text {
        font-size: 16px;
        color: #222;
        line-height: 1.4;
      }
    }
  }

  .popup-save-btn {
    position: fixed;
    bottom: 34px;
    left: 20px;
    right: 20px;
    height: 48px;
    border-radius: 24px;
    background: linear-gradient(90deg, #ffd01e 0%, #ffac04 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 172, 4, 0.3);
  }
}
</style>