wuye / webui

<template>
  <el-dialog :title="$t('applyRoomDiscount.review.title')" :visible.sync="visible" width="70%" @close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <template v-if="form.state !== '5'">
        <el-form-item :label="$t('applyRoomDiscount.review.discountType')" prop="discountType">
          <el-select v-model="form.discountType" :placeholder="$t('applyRoomDiscount.review.discountTypePlaceholder')"
            style="width:100%" @change="handleDiscountTypeChange">
            <el-option :label="$t('applyRoomDiscount.discountType.discount')" value="3003" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('applyRoomDiscount.review.discountName')" prop="discountId">
          <el-select v-model="form.discountId" :placeholder="$t('applyRoomDiscount.review.discountNamePlaceholder')"
            style="width:100%">
            <el-option v-for="item in discounts" :key="item.discountId" :label="item.discountName"
              :value="item.discountId" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('applyRoomDiscount.review.returnWay')" prop="returnWay">
          <el-select v-model="form.returnWay" :placeholder="$t('applyRoomDiscount.review.returnWayPlaceholder')"
            style="width:100%">
            <el-option :label="$t('applyRoomDiscount.returnWay.discount')" value="1001" />
            <el-option :label="$t('applyRoomDiscount.returnWay.account')" value="1002" />
          </el-select>
        </el-form-item>

        <div v-show="form.returnWay === '1002'">
          <el-form-item :label="$t('applyRoomDiscount.review.paymentRecords')">
            <div class="checkbox-group">
              <el-checkbox v-for="item in fees" :key="item.detailId" v-model="form.selectedFees" :label="item.detailId"
                @change="handleFeeSelection(item)">
                【{{ item.feeName }}】<span class="text-danger">{{ item.receivedAmount }}{{ $t('common.yuan') }}</span> -
                {{ item.createTime }}
              </el-checkbox>
            </div>
          </el-form-item>

          <el-form-item :label="$t('applyRoomDiscount.review.refundAmount')" prop="refundAmount">
            <el-input v-model="form.refundAmount"
              :placeholder="$t('applyRoomDiscount.review.refundAmountPlaceholder')" />
          </el-form-item>
        </div>
      </template>

      <el-form-item :label="$t('applyRoomDiscount.review.startTime')" prop="startTime">
        <el-date-picker v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"          :placeholder="$t('applyRoomDiscount.review.startTimePlaceholder')" 
          style="width:100%" />
      </el-form-item>

      <el-form-item :label="$t('applyRoomDiscount.review.endTime')" prop="endTime">
        <el-date-picker v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"          :placeholder="$t('applyRoomDiscount.review.endTimePlaceholder')" 
          style="width:100%" />
      </el-form-item>

      <el-form-item :label="$t('applyRoomDiscount.review.state')" prop="state">
        <el-select v-model="form.state" :placeholder="$t('applyRoomDiscount.review.statePlaceholder')"
          style="width:100%">
          <el-option :label="$t('applyRoomDiscount.status.reviewPass')" value="4" />
          <el-option :label="$t('applyRoomDiscount.status.reviewReject')" value="5" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('applyRoomDiscount.review.createRemark')">
        <el-input v-model="form.createRemark" type="textarea" :rows="2" disabled />
      </el-form-item>

      <el-form-item :label="$t('applyRoomDiscount.review.checkRemark')">
        <el-input v-model="form.checkRemark" type="textarea" :rows="2" disabled />
      </el-form-item>

      <el-form-item :label="$t('applyRoomDiscount.review.reviewRemark')" prop="reviewRemark">
        <el-input v-model="form.reviewRemark" type="textarea"
          :placeholder="$t('applyRoomDiscount.review.reviewRemarkPlaceholder')" :rows="3" />
      </el-form-item>

      <el-form-item :label="$t('applyRoomDiscount.review.images')">
        <div class="image-preview-group">
          <div v-for="(url, index) in form.images" :key="index" class="image-preview-item">
            <img :src="getImageUrl(url)" @click="showImage(url)" />
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" @click="submitForm">
        {{ $t('common.save') }}
      </el-button>
    </div>

    <view-image ref="viewImage" />
  </el-dialog>
</template>

<script>
//import { getDict } from '@/api/community/communityApi'
import { queryFeeDiscount, updateReviewApplyRoomDiscount } from '@/api/fee/applyRoomDiscountManageApi'
import ViewImage from '@/components/system/viewImage'
import { getCommunityId } from '@/api/community/communityApi'
import { queryFeeDetail } from '@/api/fee/propertyFeeApi'

export default {
  name: 'ReviewApplyRoomDiscount',
  components: {
    ViewImage
  },
  data() {
    return {
      visible: false,
      form: {
        ardId: '',
        discountId: '',
        discountType: '',
        startTime: '',
        endTime: '',
        createRemark: '',
        checkRemark: '',
        reviewRemark: '',
        refundAmount: '',
        state: '',
        roomId: '',
        discounts: [],
        fees: [],
        selectedFees: [],
        images: [],
        returnWay: '1001',
        feeId: ''
      },
      discounts: [],
      fees: [],
      rules: {
        discountId: [
          { required: true, message: this.$t('applyRoomDiscount.validate.discountIdRequired'), trigger: 'change' }
        ],
        discountType: [
          { required: true, message: this.$t('applyRoomDiscount.validate.discountTypeRequired'), trigger: 'change' }
        ],
        returnWay: [
          { required: true, message: this.$t('applyRoomDiscount.validate.returnWayRequired'), trigger: 'change' }
        ],
        refundAmount: [
          {
            required: true,
            message: this.$t('applyRoomDiscount.validate.refundAmountRequired'),
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (this.form.returnWay === '1002' && !value) {
                callback(new Error(this.$t('applyRoomDiscount.validate.refundAmountRequired')))
              } else {
                callback()
              }
            }
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: this.$t('applyRoomDiscount.validate.refundAmountFormat'),
            trigger: 'blur'
          }
        ],
        startTime: [
          { required: true, message: this.$t('applyRoomDiscount.validate.startTimeRequired'), trigger: 'change' }
        ],
        endTime: [
          { required: true, message: this.$t('applyRoomDiscount.validate.endTimeRequired'), trigger: 'change' }
        ],
        state: [
          { required: true, message: this.$t('applyRoomDiscount.validate.stateRequired'), trigger: 'change' }
        ],
        reviewRemark: [
          { required: true, message: this.$t('applyRoomDiscount.validate.reviewRemarkRequired'), trigger: 'blur' },
          { max: 512, message: this.$t('applyRoomDiscount.validate.reviewRemarkFormat'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    open(data) {
      this.form = {
        ...this.form,
        ...data,
        communityId: getCommunityId(),
        selectedFees: [],
        refundAmount: '',
        state:''
      }
      this.visible = true
      this.loadDiscounts()
      this.loadFees()
    },
    handleClose() {
      this.$refs.form.resetFields()
      this.form = {
        ardId: '',
        discountId: '',
        discountType: '',
        startTime: '',
        endTime: '',
        createRemark: '',
        checkRemark: '',
        reviewRemark: '',
        refundAmount: '',
        state: '',
        roomId: '',
        discounts: [],
        fees: [],
        selectedFees: [],
        images: [],
        returnWay: '1001',
        feeId: ''
      }
    },
    async loadDiscounts() {
      try {
        const { data } = await queryFeeDiscount({
          page: 1,
          row: 100,
          communityId: this.form.communityId,
          discountType: this.form.discountType || '3003'
        })
        this.discounts = data
      } catch (error) {
        console.error('加载折扣信息失败:', error)
      }
    },
    async loadFees() {
      try {
        const { feeDetails } = await queryFeeDetail({
          page: 1,
          row: 50,
          communityId: this.form.communityId,
          feeId: this.form.feeId,
          state: '1400'
        })
        this.fees = feeDetails
      } catch (error) {
        console.error('加载缴费记录失败:', error)
      }
    },
    handleDiscountTypeChange() {
      this.form.discountId = ''
      this.loadDiscounts()
    },
    handleFeeSelection(item) {
      console.log(item)
      this.calculateRefundAmount()
    },
    calculateRefundAmount() {
      if (this.form.returnWay !== '1002') return

      let total = 0
      this.fees.forEach(item => {
        if (this.form.selectedFees.includes(item.detailId)) {
          total += parseFloat(item.receivedAmount) || 0
        }
      })
      this.form.refundAmount = total.toFixed(2)
    },
    getImageUrl(url) {
      if (url.startsWith('http') || url.startsWith('https') || url.startsWith('data:')) {
        return url
      }
      return `/callComponent/download/getFile/file?fileId=${url}&communityId=-1&time=${new Date().getTime()}`
    },
    showImage(url) {
      setTimeout(() => {
        this.$refs.viewImage.open(this.getImageUrl(url))
      }, 100)
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.updateReview()
        }
      })
    },
    async updateReview() {
      try {
        await updateReviewApplyRoomDiscount(this.form)
        this.$message.success(this.$t('common.operationSuccess'))
        this.visible = false
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message || this.$t('applyRoomDiscount.message.reviewFailed'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 22px;
}

.checkbox-group {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;

  .el-checkbox {
    display: block;
    margin: 5px 0;
  }
}

.text-danger {
  color: #f56c6c;
}

.image-preview-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .image-preview-item {
    width: 60px;
    height: 60px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>