antissoft / lvqianmeiye_ERP

  <template>
    <el-dialog
      :visible.sync="visibleProxy"
      :show-close="false"
      width="1200px"
      :close-on-click-modal="false"
      custom-class="booking-consume-dialog"
      append-to-body
    >
      <div class="consume-dialog-inner">
        <div class="consume-header">
          <div class="consume-title-wrap">
            <div class="consume-title">预约消耗单</div>
            <div class="consume-subtitle" v-if="form.memberName">{{ form.memberName }}</div>
          </div>
          <div class="consume-header-actions">
            <el-button size="mini" class="ghost-btn" @click="roomUsageVisible = true">
              <i class="el-icon-office-building"></i> 查看房态
            </el-button>
            <span class="consume-close" @click="handleCancel">
              <i class="el-icon-close"></i>
            </span>
          </div>
        </div>
  
        <div class="consume-content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="96px"
            size="small"
            class="consume-form"
          >
            <div class="consume-left">
              <div class="section-title"><i class="el-icon-document"></i> 基础信息</div>
  
              <el-form-item label="会员" prop="memberId">
                <el-select v-model="form.memberId" placeholder="搜索会员" filterable clearable @change="onMemberChange">
                  <el-option v-for="m in memberOptions" :key="m.value" :label="`${m.label}（${m.phone}）`" :value="m.value" />
                </el-select>
              </el-form-item>
  
              <el-form-item label="预约日期" prop="date">
                <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width:100%" />
              </el-form-item>
  
              <el-form-item label="开始时间" prop="startTime">
                <el-time-select v-model="form.startTime" :picker-options="timeOptions" placeholder="开始时间" style="width:100%" />
              </el-form-item>
              <el-form-item label="结束时间" prop="endTime">
                <el-time-select v-model="form.endTime" :picker-options="timeOptionsEnd" placeholder="结束时间" style="width:100%" />
              </el-form-item>
  
              <el-form-item label="房间" prop="roomId">
                <el-select v-model="form.roomId" placeholder="选择房间" filterable clearable @change="onRoomChange">
                  <el-option v-for="r in roomOptions" :key="r.id" :label="r.name" :value="r.id" />
                </el-select>
              </el-form-item>
  
              <el-form-item label="服务健康师">
                <div class="readonly-workers">
                  <span v-if="selectedTherapistNames.length" class="readonly-workers-text">{{ selectedTherapistNames.join('、') }}</span>
                  <span v-else class="readonly-workers-empty">请在右侧品项中选择服务健康师</span>
                </div>
              </el-form-item>
  
              <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
              </el-form-item>
            </div>
  
            <div class="consume-right">
              <div class="section-title"><i class="el-icon-goods"></i> 品项明细</div>
  
              <div v-for="(item, idx) in form.items" :key="'item-' + idx" class="item-card">
                <div class="item-card-head">
                  <span class="item-card-no">品项 {{ idx + 1 }}</span>
                  <el-button
                    v-if="form.items.length > 1"
                    type="text"
                    class="item-remove-btn"
                    @click="removeItem(idx)"
                  >
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </div>
  
                <el-form-item
                  label="品项"
                  :prop="'items.' + idx + '.projectId'"
                  :rules="[{ required: true, message: '请选择品项', trigger: 'change' }]"
                  label-width="56px"
                >
                  <el-select
                    v-model="item.projectId"
                    placeholder="搜索品项"
                    filterable
                    clearable
                    @change="onProjectChange(idx)"
                  >
                    <el-option v-for="p in availableItems" :key="p.value" :label="p.label" :value="p.value" />
                  </el-select>
                </el-form-item>
  
                <div v-if="item.projectId" class="px-info-panel">
                  <el-row :gutter="8">
                    <el-col :span="8"><span class="px-tag">单价</span> <b>¥{{ item.price }}</b></el-col>
                    <el-col :span="8"><span class="px-tag">总购买</span> <b>{{ item.totalPurchased }}</b></el-col>
                    <el-col :span="8"><span class="px-tag">已消费</span> <b>{{ item.consumed }}</b></el-col>
                  </el-row>
                  <el-row :gutter="8" style="margin-top:4px">
                    <el-col :span="8"><span class="px-tag">剩余</span> <b class="remaining">{{ item.remaining }}</b></el-col>
                    <el-col :span="8"><span class="px-tag">来源</span> <b>{{ item.sourceType || '无' }}</b></el-col>
                    <el-col :span="8"><span class="px-tag">健康师手工费</span> <b>{{ item.healthCoachLaborCost }}</b></el-col>
                  </el-row>
                  <el-row :gutter="8" style="margin-top:4px" v-if="item.qt2 === '科美'">
                    <el-col :span="8"><span class="px-tag">科美手工费</span> <b>{{ item.techBeautyLaborCost }}</b></el-col>
                  </el-row>
                </div>
  
                <el-row :gutter="12" style="margin-top:8px">
                  <el-col :span="16">
                    <el-form-item label="次数" label-width="56px">
                      <el-input-number
                        v-model="item.count"
                        :min="1"
                        :max="item.remaining || 999"
                        controls-position="right"
                        style="width:100%"
                        @change="onCountChange(idx)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
  
                <div class="worker-section">
                  <div class="worker-label">
                    <span>服务健康师</span>
                    <el-button type="text" size="mini" @click="addWorker(idx)">
                      <i class="el-icon-plus"></i> 添加健康师
                    </el-button>
                  </div>
                  <div v-for="(w, wi) in item.workers" :key="'w-' + wi" class="worker-row">
                    <el-select v-model="w.workerId" placeholder="选择健康师" filterable size="mini" class="worker-select">
                      <el-option v-for="h in healthWorkerOptions" :key="h.value" :label="h.label" :value="h.value" />
                    </el-select>
                    <el-button
                      v-if="item.workers.length > 1"
                      type="text"
                      size="mini"
                      class="worker-remove"
                      @click="removeWorker(idx, wi)"
                    >
                      <i class="el-icon-close"></i>
                    </el-button>
                  </div>
                </div>
  
                <div class="worker-section" v-if="item.qt2 === '科美'">
                  <div class="worker-label">
                    <span>科技部老师</span>
                    <el-button type="text" size="mini" @click="addTechTeacher(idx)">
                      <i class="el-icon-plus"></i> 添加科技部老师
                    </el-button>
                  </div>
                  <div v-for="(t, ti) in item.techTeachers" :key="'t-' + ti" class="worker-row">
                    <el-select v-model="t.teacherId" placeholder="选择老师" filterable size="mini" class="worker-select">
                      <el-option v-for="tt in techTeacherOptions" :key="tt.value" :label="tt.label" :value="tt.value" />
                    </el-select>
                    <el-input :value="t.performance" readonly placeholder="业绩" size="mini" class="worker-field">
                      <template slot="prepend">¥</template>
                    </el-input>
                    <el-input :value="t.laborCost" readonly placeholder="手工费" size="mini" class="worker-field" />
                    <el-input :value="t.count" readonly placeholder="次数" size="mini" class="worker-field-sm" />
                    <el-button
                      type="text"
                      size="mini"
                      class="worker-remove"
                      @click="removeTechTeacher(idx, ti)"
                    >
                      <i class="el-icon-close"></i>
                    </el-button>
                  </div>
                </div>
  
                <div class="worker-section" v-if="item.isAllowAccompanied == 1">
                  <div class="worker-label">
                    <span>陪同健康师</span>
                    <el-button type="text" size="mini" @click="addAccompanied(idx)">
                      <i class="el-icon-plus"></i> 添加陪同健康师
                    </el-button>
                  </div>
                  <div v-for="(a, ai) in item.accompanied" :key="'a-' + ai" class="worker-row">
                    <el-select v-model="a.workerId" placeholder="选择健康师" filterable size="mini" class="worker-select">
                      <el-option v-for="h in healthWorkerOptions" :key="h.value" :label="h.label" :value="h.value" />
                    </el-select>
                    <el-input-number v-model="a.count" :min="1" controls-position="right" size="mini" style="width:100px" />
                    <el-button
                      type="text"
                      size="mini"
                      class="worker-remove"
                      @click="removeAccompanied(idx, ai)"
                    >
                      <i class="el-icon-close"></i>
                    </el-button>
                  </div>
                </div>
              </div>
  
              <div class="add-btn-row">
                <el-button type="text" @click="addItem">
                  <i class="el-icon-circle-plus-outline"></i> 添加品项
                </el-button>
              </div>
            </div>
          </el-form>
        </div>
  
        <div class="consume-footer">
          <div class="footer-summary">
            <span class="footer-tip">提示：服务健康师来自右侧品项选择（用于排班占用展示）</span>
          </div>
          <div class="footer-actions">
            <el-button size="small" @click="handleCancel">取 消</el-button>
            <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">
              {{ submitting ? '提交中...' : '保 存' }}
            </el-button>
          </div>
        </div>
      </div>
  
      <room-usage-dialog
        :visible.sync="roomUsageVisible"
        :date="roomUsageDate"
        :rooms="roomOptions"
      />
    </el-dialog>
  </template>
  
  <script>
  import RoomUsageDialog from '@/components/room-usage-dialog.vue'
  
  const STORAGE_KEY = 'store_pc_pre_consume_bookings'
  
  export default {
    name: 'BookingConsumeDialog',
    components: { RoomUsageDialog },
    props: {
      visible: { type: Boolean, default: false }
    },
    data() {
      return {
        submitting: false,
        roomUsageVisible: false,
        form: this.createEmptyForm(),
        memberOptions: [
          { value: 'cust001', label: '林小纤', phone: '13800138000' },
          { value: 'cust002', label: '王丽', phone: '13800138001' },
          { value: 'cust003', label: '张敏', phone: '13800138002' }
        ],
        memberItemsMap: {
          'cust001': [
            { value: 'item001', label: '面部深层护理（次卡）', price: 380, remaining: 6, totalPurchased: 10, consumed: 4, sourceType: '购买', qt2: '', healthCoachLaborCost: 50, techBeautyLaborCost: 0, isAllowAccompanied: 0 },
            { value: 'item002', label: '肩颈调理（疗程）', price: 268, remaining: 3, totalPurchased: 5, consumed: 2, sourceType: '购买', qt2: '科美', healthCoachLaborCost: 30, techBeautyLaborCost: 40, isAllowAccompanied: 0 },
            { value: 'item003', label: '眼周护理套餐', price: 198, remaining: 3, totalPurchased: 4, consumed: 1, sourceType: '赠送', qt2: '', healthCoachLaborCost: 25, techBeautyLaborCost: 0, isAllowAccompanied: 1 }
          ],
          'cust002': [
            { value: 'item004', label: '面部深层护理（次卡）', price: 380, remaining: 4, totalPurchased: 8, consumed: 4, sourceType: '购买', qt2: '', healthCoachLaborCost: 50, techBeautyLaborCost: 0, isAllowAccompanied: 0 }
          ],
          'cust003': [
            { value: 'item005', label: '肩颈调理（疗程）', price: 268, remaining: 5, totalPurchased: 5, consumed: 0, sourceType: '购买', qt2: '科美', healthCoachLaborCost: 30, techBeautyLaborCost: 40, isAllowAccompanied: 1 }
          ]
        },
        healthWorkerOptions: [
          { value: 'E001', label: '董顺秀' },
          { value: 'E002', label: '张丽' },
          { value: 'E003', label: '贾琳' },
          { value: 'E004', label: '刘恬恬' }
        ],
        techTeacherOptions: [
          { value: 'kjb001', label: '赵科技老师' },
          { value: 'kjb002', label: '钱科技老师' }
        ],
        roomOptions: [
          { id: 'R001', name: '1号房' },
          { id: 'R002', name: '2号房' },
          { id: 'R003', name: '3号房' },
          { id: 'R004', name: 'VIP房' }
        ],
        availableItems: [],
        timeOptions: { start: '09:00', step: '00:30', end: '21:00' },
        rules: {
          memberId: [{ required: true, message: '请选择会员', trigger: 'change' }],
          date: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
          startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'change' },
            { validator: (rule, value, cb) => {
              if (!value || !this.form.startTime) { cb(); return }
              const [sh, sm] = this.form.startTime.split(':').map(Number)
              const [eh, em] = value.split(':').map(Number)
              if (eh < sh || (eh === sh && em <= sm)) cb(new Error('结束时间须晚于开始时间'))
              else cb()
            }, trigger: 'change' }
          ],
          roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
          items: [{ validator: (rule, value, cb) => {
            const list = this.form.items || []
            if (!Array.isArray(list) || list.length < 1) cb(new Error('请至少添加 1 个品项'))
            else if (list.some(x => !x || !x.projectId)) cb(new Error('请完善品项选择'))
            else if (list.some(x => !x.workers || x.workers.length < 1 || x.workers.some(w => !w.workerId))) cb(new Error('请为每个品项选择服务健康师'))
            else cb()
          }, trigger: 'change' }]
        }
      }
    },
    computed: {
      visibleProxy: {
        get() { return this.visible },
        set(v) { this.$emit('update:visible', v) }
      },
      selectedTherapistIds() {
        const set = new Set()
        ;(this.form.items || []).forEach(it => {
          ;(it.workers || []).forEach(w => {
            if (w && w.workerId) set.add(w.workerId)
          })
        })
        return Array.from(set)
      },
      selectedTherapistNames() {
        const map = new Map((this.healthWorkerOptions || []).map(x => [x.value, x.label]))
        return this.selectedTherapistIds.map(id => map.get(id) || id).filter(Boolean)
      },
      timeOptionsEnd() {
        const base = { ...this.timeOptions }
        if (this.form.startTime) {
          const [h, m] = this.form.startTime.split(':').map(Number)
          const next = (h * 60 + m + 30) % (24 * 60)
          base.start = `${String(Math.floor(next / 60)).padStart(2, '0')}:${String(next % 60).padStart(2, '0')}`
          const [eh, em] = (base.end || '21:00').split(':').map(Number)
          if (next >= eh * 60 + em) base.end = '22:00'
        }
        return base
      },
      roomUsageDate() {
        return this.form.date instanceof Date ? this.formatDate(this.form.date) : this.formatDate(new Date())
      }
    },
    watch: {
      visible(val) {
        if (val) this.resetFormForOpen()
      }
    },
    methods: {
      createEmptyForm() {
        return {
          memberId: '',
          memberName: '',
          date: new Date(),
          startTime: '',
          endTime: '',
          roomId: '',
          roomName: '',
          therapistIds: [],
          items: [this.createEmptyItem()],
          remark: ''
        }
      },
      createEmptyItem() {
        return {
          projectId: '',
          label: '',
          price: 0,
          remaining: 0,
          totalPurchased: 0,
          consumed: 0,
          sourceType: '',
          qt2: '',
          beautyType: '',
          healthCoachLaborCost: 0,
          techBeautyLaborCost: 0,
          isAllowAccompanied: 0,
          count: 1,
          workers: [{ workerId: '' }],
          techTeachers: [],
          accompanied: []
        }
      },
      resetFormForOpen() {
        this.form = this.createEmptyForm()
        this.roomUsageVisible = false
        this.submitting = false
        this.availableItems = []
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate()
        })
      },
      onMemberChange(val) {
        const m = this.memberOptions.find(x => x.value === val)
        this.form.memberName = m ? m.label : ''
        this.form.items = [this.createEmptyItem()]
        this.loadMemberItems(val)
      },
      loadMemberItems(memberId) {
        const items = this.memberItemsMap[memberId] || []
        this.availableItems = items.map(it => ({
          ...it,
          label: `${it.label}（剩余${it.remaining}次）`
        }))
      },
      onRoomChange(val) {
        const r = this.roomOptions.find(x => x.id === val)
        this.form.roomName = r ? r.name : ''
      },
      handleCancel() {
        this.visibleProxy = false
      },
      formatDate(d) {
        const dt = d instanceof Date ? d : new Date(d)
        const y = dt.getFullYear()
        const m = String(dt.getMonth() + 1).padStart(2, '0')
        const day = String(dt.getDate()).padStart(2, '0')
        return `${y}-${m}-${day}`
      },
      readStorage() {
        try {
          const raw = localStorage.getItem(STORAGE_KEY)
          if (!raw) return []
          const arr = JSON.parse(raw)
          return Array.isArray(arr) ? arr : []
        } catch (e) {
          return []
        }
      },
      writeStorage(list) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(list || []))
      },
      buildColorKey(id) {
        const palette = ['blue', 'green', 'orange', 'purple', 'gray']
        let sum = 0
        for (let i = 0; i < id.length; i++) sum += id.charCodeAt(i)
        return palette[sum % palette.length]
      },
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (!valid) return
          this.submitting = true
          setTimeout(() => {
            const id = `PCB_${Date.now()}_${Math.floor(Math.random() * 1000)}`
            const dateStr = this.formatDate(this.form.date)
            const therapistIds = this.selectedTherapistIds
            const therapistNames = this.selectedTherapistNames
            const itemLabels = (this.form.items || []).map(x => {
              const base = x.label || this.getProjectLabel(x.projectId)
              const cnt = x.count != null ? `×${x.count}` : ''
              return `${base}${cnt}`.trim()
            }).filter(Boolean)
            const record = {
              id,
              memberId: this.form.memberId,
              memberName: this.form.memberName || '',
              date: dateStr,
              startTime: this.form.startTime,
              endTime: this.form.endTime,
              roomId: this.form.roomId,
              roomName: this.form.roomName || '',
              therapistIds,
              therapistNames,
              items: (this.form.items || []).map(x => ({
                projectId: x.projectId,
                label: x.label || this.getProjectLabel(x.projectId),
                count: x.count || 1,
                workers: Array.isArray(x.workers) ? x.workers.map(w => ({ workerId: w.workerId || '' })) : [],
                techTeachers: Array.isArray(x.techTeachers) ? x.techTeachers.map(t => ({ teacherId: t.teacherId || '' })) : [],
                accompanied: Array.isArray(x.accompanied) ? x.accompanied.map(a => ({ workerId: a.workerId || '', count: a.count || 1 })) : []
              })),
              itemLabels,
              remark: this.form.remark || '',
              status: 'booked',
              colorKey: this.buildColorKey(id),
              createdAt: new Date().toISOString()
            }
            const list = this.readStorage()
            list.unshift(record)
            this.writeStorage(list)
            this.submitting = false
            this.$emit('saved', record)
          }, 500)
        })
      }
      ,
      addItem() {
        this.form.items.push(this.createEmptyItem())
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate('items')
        })
      },
      removeItem(idx) {
        this.form.items.splice(idx, 1)
        if (!this.form.items.length) this.form.items.push(this.createEmptyItem())
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate('items')
        })
      },
      getProjectLabel(pid) {
        const hit = this.availableItems.find(x => x.value === pid)
        if (!hit || !hit.label) return ''
        return (hit.label || '').split('（剩余')[0] || ''
      },
      onProjectChange(idx) {
        const item = this.form.items[idx]
        if (!item) return
        const p = this.availableItems.find(o => o.value === item.projectId)
        if (p) {
          item.label = (p.label || '').split('（剩余')[0] || p.label || ''
          item.price = p.price
          item.remaining = p.remaining
          item.totalPurchased = p.totalPurchased
          item.consumed = p.consumed
          item.sourceType = p.sourceType
          item.qt2 = p.qt2
          item.healthCoachLaborCost = p.healthCoachLaborCost
          item.techBeautyLaborCost = p.techBeautyLaborCost
          item.isAllowAccompanied = p.isAllowAccompanied
          item.count = 1
          item.workers = [{ workerId: '', performance: '', laborCost: '', count: '' }]
          item.techTeachers = []
          item.accompanied = []
        }
        this.redistributeWorkers(idx)
      },
      onCountChange(idx) {
        this.redistributeWorkers(idx)
        this.redistributeTechTeachers(idx)
      },
      redistributeWorkers(idx) {
        const item = this.form.items[idx]
        if (!item.workers || item.workers.length === 0) return
        const totalCount = item.count || 0
        const totalPerf = item.price * totalCount
        const isKemei = item.qt2 === '科美' && item.beautyType !== 'cell'
        const isCell = item.qt2 === '科美' && item.beautyType === 'cell'
        const hasTech = item.techTeachers && item.techTeachers.length > 0
        const n = item.workers.length
        if (isKemei || (isCell && hasTech)) {
          item.workers.forEach(w => {
            w.performance = (totalPerf / n).toFixed(2)
            w.laborCost = '0.00'
            w.count = '0'
          })
        } else {
          const totalLabor = (item.healthCoachLaborCost || 0) * totalCount
          item.workers.forEach(w => {
            w.performance = (totalPerf / n).toFixed(2)
            w.laborCost = (totalLabor / n).toFixed(2)
            w.count = (totalCount / n).toFixed(2)
          })
        }
      },
      redistributeTechTeachers(idx) {
        const item = this.form.items[idx]
        if (!item.techTeachers || item.techTeachers.length === 0) return
        const totalCount = item.count || 0
        const totalPerf = item.price * totalCount
        const totalLabor = (item.techBeautyLaborCost || 0) * totalCount
        const n = item.techTeachers.length
        item.techTeachers.forEach(t => {
          t.performance = (totalPerf / n).toFixed(2)
          t.laborCost = (totalLabor / n).toFixed(2)
          t.count = (totalCount / n).toFixed(2)
        })
        this.redistributeWorkers(idx)
      },
      addWorker(idx) {
        this.form.items[idx].workers.push({ workerId: '', performance: '', laborCost: '', count: '' })
        this.redistributeWorkers(idx)
      },
      removeWorker(idx, wi) {
        this.form.items[idx].workers.splice(wi, 1)
        this.redistributeWorkers(idx)
      },
      addTechTeacher(idx) {
        this.form.items[idx].techTeachers.push({ teacherId: '', performance: '', laborCost: '', count: '' })
        this.redistributeTechTeachers(idx)
      },
      removeTechTeacher(idx, ti) {
        this.form.items[idx].techTeachers.splice(ti, 1)
        this.redistributeTechTeachers(idx)
      },
      addAccompanied(idx) {
        this.form.items[idx].accompanied.push({ workerId: '', count: 1 })
      },
      removeAccompanied(idx, ai) {
        this.form.items[idx].accompanied.splice(ai, 1)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .ghost-btn {
    border-radius: 999px !important;
    background: rgba(239, 246, 255, 0.9) !important;
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
  }
  
  /* ====== 内部结构（对齐 ConsumeDialog） ====== */
  .consume-dialog-inner {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
  }
  
  .consume-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 22px 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(219, 234, 254, 0.96);
  }
  
  .consume-title-wrap {
    flex: 1;
  }
  
  .consume-title {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
  }
  
  .consume-subtitle {
    font-size: 12px;
    color: #475569;
    margin-top: 2px;
  }
  
  .consume-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .consume-close {
    flex-shrink: 0;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #64748b;
    transition: all 0.15s;
  
    &:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #0f172a;
    }
  }
  
  .consume-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
  }
  
  .consume-form {
    display: flex;
    flex: 1;
    min-height: 0;
  }
  
  .consume-left {
    flex: 0 0 440px;
    overflow-y: auto;
    padding: 10px 16px 10px 22px;
    border-right: 1px solid rgba(229, 231, 235, 0.6);
    min-height: 0;
  }
  
  .consume-right {
    flex: 1;
    overflow-y: auto;
    padding: 10px 22px 10px 16px;
    min-height: 0;
  }
  
  .section-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 14px 0 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(241, 245, 249, 0.7);
  
    i {
      margin-right: 4px;
      color: #2563eb;
    }
  
    &:first-child {
      margin-top: 4px;
    }
  }
  
  .item-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px 4px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.15s;
  
    &:hover {
      border-color: #93c5fd;
    }
  }
  
  .item-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  
  .item-card-no {
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
  }
  
  .item-remove-btn {
    color: #ef4444 !important;
    font-size: 12px;
    padding: 0;
  }
  
  .px-info-panel {
    margin: 4px 0 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(241, 245, 249, 0.5);
    font-size: 12px;
    color: #475569;
    line-height: 1.8;
  
    .px-tag {
      color: #94a3b8;
      margin-right: 2px;
    }
  
    b {
      color: #0f172a;
      font-weight: 600;
    }
  
    .remaining {
      color: #2563eb;
    }
  }
  
  .worker-section {
    margin: 2px 0 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(241, 245, 249, 0.5);
  }
  
  .worker-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
  }
  
  .worker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  
  .worker-select {
    flex: 1;
  }
  
  .worker-field {
    width: 120px;
    flex-shrink: 0;
  }
  
  .worker-field-sm {
    width: 70px;
    flex-shrink: 0;
  }
  
  .worker-remove {
    color: #ef4444 !important;
    padding: 0;
  }
  
  .add-btn-row {
    text-align: center;
    margin-bottom: 6px;
  }
  
  .consume-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 22px 14px;
    border-top: 1px solid rgba(229, 231, 235, 0.6);
  }
  
  .footer-summary {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
  
    b {
      color: #0f172a;
    }
  
    .highlight {
      color: #2563eb;
      font-size: 14px;
    }
  }
  
  .footer-actions {
    display: flex;
    gap: 10px;
  }
  
  ::v-deep .booking-consume-dialog {
    max-width: 1200px;
    margin-top: 8vh !important;
    border-radius: 20px;
    padding: 0;
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.96) 0, rgba(248, 250, 252, 0.98) 40%, rgba(241, 245, 249, 0.98) 100%);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  
  ::v-deep .booking-consume-dialog .el-dialog__header { display: none; }
  ::v-deep .booking-consume-dialog .el-dialog__body { padding: 0; }
  
  ::v-deep .booking-consume-dialog .el-form-item__label { white-space: nowrap; }
  ::v-deep .booking-consume-dialog .el-input__inner {
    border-radius: 999px;
    height: 32px;
    line-height: 32px;
    border-color: #e5e7eb;
    background-color: #f9fafb;
  }
  ::v-deep .booking-consume-dialog .el-input__inner:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
  }
  ::v-deep .booking-consume-dialog .el-textarea__inner {
    border-radius: 12px;
    border-color: #e5e7eb;
    background-color: #f9fafb;
  }
  ::v-deep .booking-consume-dialog .el-input-group__prepend {
    border-radius: 999px 0 0 999px;
    background: #f1f5f9;
    border-color: #e5e7eb;
    padding: 0 10px;
    color: #64748b;
  }
  ::v-deep .booking-consume-dialog .el-input-group .el-input__inner {
    border-radius: 0 999px 999px 0;
  }
  ::v-deep .booking-consume-dialog .el-input-number {
    .el-input__inner {
      border-radius: 999px;
    }
  }
  ::v-deep .booking-consume-dialog .el-button--primary {
    border-radius: 999px;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    font-size: 12px;
  }
  ::v-deep .booking-consume-dialog .el-button--default {
    border-radius: 999px;
    padding: 0 18px;
    height: 30px;
    line-height: 30px;
    background: rgba(239, 246, 255, 0.9);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.18);
    font-size: 12px;
  }
  ::v-deep .booking-consume-dialog .el-form-item {
    margin-bottom: 12px;
  }
  ::v-deep .booking-consume-dialog .el-select {
    width: 100%;
  }
  </style>