<template>
  <el-dialog
    :visible.sync="visibleProxy"
    :show-close="false"
    width="1200px"
    :close-on-click-modal="false"
    custom-class="refund-dialog"
    append-to-body
  >
    <div class="refund-dialog-inner">
      <div class="refund-header">
        <div class="refund-title-wrap">
          <div class="refund-title">新建退卡</div>
          <div class="refund-subtitle" v-if="form.memberName">{{ form.memberName }}</div>
        </div>
        <span class="refund-close" @click="handleCancel">
          <i class="el-icon-close"></i>
        </span>
      </div>

      <div class="refund-content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="96px"
          size="small"
          class="refund-form"
        >
          <!-- ===== 左栏：基础信息 ===== -->
          <div class="refund-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
                remote
                reserve-keyword
                clearable
                :remote-method="searchMembers"
                :loading="memberLoading"
                @change="onMemberChange"
              >
                <el-option
                  v-for="m in memberOptions"
                  :key="m.value"
                  :label="m.optionLabel || `${m.label}（${m.phone || '无'}）`"
                  :value="m.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="退卡日期" prop="refundDate">
              <el-date-picker v-model="form.refundDate" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>

            <el-form-item label="退款金额">
              <el-input :value="totalRefundAmount" readonly>
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>

            <el-form-item label="实际退款金额">
              <el-input :value="actualRefundAmount" readonly>
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>

            <div class="section-title"><i class="el-icon-paperclip"></i> 附件与备注</div>

            <el-form-item label="上传文件">
              <oss-file-upload
                v-model="form.fileList"
                button-text="上传附件"
                tip="上传后自动保存至 OSS，支持图片、PDF"
              />
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
            </el-form-item>
          </div>

          <!-- ===== 右栏：品项明细 ===== -->
          <div class="refund-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.laborCost }}</b></el-col>
                </el-row>
              </div>

              <el-row :gutter="12" style="margin-top:8px">
                <el-col :span="12">
                  <el-form-item label="退卡次数" label-width="72px">
                    <el-input-number
                      v-model="item.refundCount"
                      :min="1"
                      :max="item.remaining || 999"
                      controls-position="right"
                      style="width:100%"
                      @change="onRefundCountChange(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"
                    @change="onWorkerChange(idx, wi)"
                  >
                    <el-option v-for="h in healthWorkerOptions" :key="h.value" :label="h.label" :value="h.value" />
                  </el-select>
                  <el-input v-model="w.jksyj" placeholder="业绩" size="mini" class="worker-field" @input="onWorkerPerformanceInput">
                    <template slot="prepend">¥</template>
                  </el-input>
                  <el-input :value="w.count" readonly placeholder="次数" size="mini" class="worker-field-sm" />
                  <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 v-model="t.kjblsyj" placeholder="业绩" size="mini" class="worker-field" @input="onWorkerPerformanceInput">
                    <template slot="prepend">¥</template>
                  </el-input>
                  <el-input :value="t.count" readonly placeholder="次数" size="mini" class="worker-field-sm" />
                  <el-button
                    v-if="item.techTeachers.length > 1"
                    type="text"
                    size="mini"
                    class="worker-remove"
                    @click="removeTechTeacher(idx, ti)"
                  >
                    <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="refund-footer">
        <div class="footer-summary">
          <span>退款金额 <b class="highlight">¥{{ totalRefundAmount }}</b></span>
          <span>实际退款 <b class="highlight-orange">¥{{ actualRefundAmount }}</b></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>
  </el-dialog>
</template>

<script>
import { getKhxxList, getMemberRemainingItems, getJsjInfo } from '@/api/lqKhxx'
import { getXmzlInfo } from '@/api/lqXmzl'
import { getStoreUserList } from '@/api/storeUser'
import { createHytkHytk } from '@/api/lqHytkHytk'
import { mapRemainingItemToOption } from '@/utils/appointmentHelper'
import OssFileUpload from '@/components/oss-file-upload.vue'
import {
  buildRefundSubmitBody,
  validateRefundForm,
  calcFormTkje,
  calcFormActualRefund,
  redistributeRefundWorkers,
  redistributeRefundTechTeachers,
  refundDateYmd
} from '@/utils/refundHelper'

export default {
  name: 'RefundDialog',
  components: { OssFileUpload },
  props: {
    visible: { type: Boolean, default: false },
    prefill: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      submitting: false,
      memberLoading: false,
      form: this.createEmptyForm(),
      memberOptions: [],
      healthWorkerOptions: [],
      techTeacherOptions: [],
      availableItems: [],
      rules: {
        memberId: [{ required: true, message: '请选择会员', trigger: 'change' }],
        refundDate: [{ required: true, message: '请选择退卡日期', trigger: 'change' }]
      }
    }
  },
  computed: {
    visibleProxy: {
      get() { return this.visible },
      set(val) { this.$emit('update:visible', val) }
    },
    storeId() {
      return (this.$store.getters.storeInfo || {}).storeId || ''
    },
    storeName() {
      return (this.$store.getters.storeInfo || {}).storeName || ''
    },
    selectedMember() {
      return this.memberOptions.find(m => m.value === this.form.memberId) || null
    },
    totalRefundAmount() {
      return calcFormTkje(this.form).toFixed(2)
    },
    actualRefundAmount() {
      return calcFormActualRefund(this.form).toFixed(2)
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.loadStaff()
        if (!this.memberOptions.length) this.searchMembers('')
        this.applyPrefill()
      }
    },
    prefill: {
      deep: true,
      handler() {
        if (this.visible) this.applyPrefill()
      }
    }
  },
  methods: {
    createEmptyForm() {
      return {
        memberId: '',
        memberName: '',
        memberPhone: '',
        memberType: '',
        refundDate: new Date(),
        remark: '',
        fileList: [],
        items: [this.createEmptyItem()]
      }
    },
    createEmptyItem() {
      return {
        projectId: '',
        billingItemId: '',
        itemId: '',
        label: '',
        price: 0,
        remaining: 0,
        totalPurchased: 0,
        consumed: 0,
        sourceType: '',
        qt2: '',
        laborCost: 0,
        refundCount: 1,
        workers: [{ workerId: '', workerName: '', jksyj: '', laborCost: '0', count: '', jsjId: '' }],
        techTeachers: []
      }
    },
    async searchMembers(kw) {
      this.memberLoading = true
      try {
        const res = await getKhxxList({
          currentPage: 1,
          pageSize: 30,
          keyWord: (kw || '').trim()
        })
        const list = res.data?.list || []
        this.memberOptions = list.map(m => {
          const name = m.khmc || m.name || '无'
          const phone = m.sjh || m.mobile || ''
          return {
            value: m.id,
            label: name,
            phone,
            type: m.khlx || m.gklx || '',
            optionLabel: phone ? `${name}（${phone}）` : name
          }
        })
      } catch (e) {
        this.memberOptions = []
      } finally {
        this.memberLoading = false
      }
    },
    async loadStaff() {
      const storeId = this.storeId
      if (!storeId) {
        this.healthWorkerOptions = []
        this.techTeacherOptions = []
        return
      }
      try {
        const [jksRes, kjbRes] = await Promise.all([
          getStoreUserList({ mdid: storeId, gw: '健康师', currentPage: 1, pageSize: 500 }),
          getStoreUserList({ mdid: storeId, gw: '科技老师', currentPage: 1, pageSize: 500 })
        ])
        const mapUser = u => ({
          value: u.id,
          label: u.realName || u.account || u.id
        })
        this.healthWorkerOptions = (jksRes.data?.list || []).map(mapUser)
        this.techTeacherOptions = (kjbRes.data?.list || []).map(mapUser)
      } catch (e) {
        this.healthWorkerOptions = []
        this.techTeacherOptions = []
      }
    },
    async applyPrefill() {
      this.form = this.createEmptyForm()
      this.availableItems = []
      const p = this.prefill || {}
      if (p.memberId) {
        this.form.memberId = p.memberId
        this.form.memberName = p.memberName || p.name || ''
        this.form.memberPhone = p.mobile || p.phone || ''
        if (!this.memberOptions.some(m => m.value === p.memberId)) {
          this.memberOptions.unshift({
            value: p.memberId,
            label: this.form.memberName || '会员',
            phone: this.form.memberPhone,
            type: '',
            optionLabel: this.form.memberPhone
              ? `${this.form.memberName || '会员'}（${this.form.memberPhone}）`
              : (this.form.memberName || '会员')
          })
        }
        await this.loadMemberItems(p.memberId)
      } else if (p.name) {
        await this.searchMembers(p.name)
        const found = this.memberOptions.find(m => m.label === p.name)
        if (found) {
          this.form.memberId = found.value
          this.form.memberName = found.label
          this.form.memberPhone = found.phone || ''
          await this.loadMemberItems(found.value)
        }
      }
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    onMemberChange(val) {
      const m = this.memberOptions.find(o => o.value === val)
      this.form.memberName = m ? m.label : ''
      this.form.memberPhone = m ? m.phone : ''
      this.form.memberType = m ? m.type : ''
      this.form.items = [this.createEmptyItem()]
      this.loadMemberItems(val)
    },
    async enrichRemainingOptions(list) {
      const ids = [...new Set(list.map(o => o.itemId).filter(Boolean))]
      const detailMap = {}
      await Promise.all(ids.map(async id => {
        try {
          const res = await getXmzlInfo(id)
          detailMap[id] = res.data || {}
        } catch (e) {
          detailMap[id] = {}
        }
      }))
      return list.map(opt => {
        const d = detailMap[opt.itemId] || {}
        return {
          ...opt,
          qt2: opt.qt2 || d.qt2 || '',
          laborCost: Number(d.sgf) || 0
        }
      })
    },
    async loadMemberItems(memberId) {
      if (!memberId) {
        this.availableItems = []
        return
      }
      try {
        const res = await getMemberRemainingItems(memberId)
        const list = res.data?.RemainingItems || res.data?.remainingItems || []
        const mapped = (list || [])
          .filter(item => Number(item.RemainingCount) > 0)
          .map(mapRemainingItemToOption)
        this.availableItems = await this.enrichRemainingOptions(mapped)
      } catch (e) {
        this.availableItems = []
      }
    },
    async onProjectChange(idx) {
      const item = this.form.items[idx]
      const p = this.availableItems.find(o => o.value === item.projectId)
      if (!p) return
      item.billingItemId = p.billingItemId || p.value
      item.itemId = p.itemId || ''
      item.label = (p.label || '').replace(/（剩余\d+次）$/, '')
      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.laborCost = p.laborCost
      item.refundCount = 1
      item.workers = [{ workerId: '', workerName: '', jksyj: '', laborCost: '0', count: '', jsjId: '' }]
      item.techTeachers = []
      if (item.qt2 === '科美') {
        item.techTeachers = [{ teacherId: '', teacherName: '', kjblsyj: '', laborCost: '0', count: '' }]
      }
      this.redistributeWorkers(idx)
      this.redistributeTechTeachers(idx)
    },
    onRefundCountChange(idx) {
      this.redistributeWorkers(idx)
      this.redistributeTechTeachers(idx)
    },
    onWorkerPerformanceInput() {
      this.$forceUpdate()
    },
    redistributeWorkers(idx) {
      redistributeRefundWorkers(this.form.items[idx])
    },
    redistributeTechTeachers(idx) {
      redistributeRefundTechTeachers(this.form.items[idx])
    },
    addItem() {
      this.form.items.push(this.createEmptyItem())
    },
    removeItem(idx) {
      this.form.items.splice(idx, 1)
      if (!this.form.items.length) this.form.items.push(this.createEmptyItem())
    },
    addWorker(idx) {
      this.form.items[idx].workers.push({
        workerId: '',
        workerName: '',
        jksyj: '',
        laborCost: '0',
        count: '',
        jsjId: ''
      })
      this.redistributeWorkers(idx)
    },
    removeWorker(idx, wi) {
      this.form.items[idx].workers.splice(wi, 1)
      if (!this.form.items[idx].workers.length) {
        this.form.items[idx].workers.push({
          workerId: '',
          workerName: '',
          jksyj: '',
          laborCost: '0',
          count: '',
          jsjId: ''
        })
      }
      this.redistributeWorkers(idx)
    },
    addTechTeacher(idx) {
      this.form.items[idx].techTeachers.push({
        teacherId: '',
        teacherName: '',
        kjblsyj: '',
        laborCost: '0',
        count: ''
      })
      this.redistributeTechTeachers(idx)
    },
    removeTechTeacher(idx, ti) {
      this.form.items[idx].techTeachers.splice(ti, 1)
      this.redistributeTechTeachers(idx)
    },
    async onWorkerChange(idx, wi) {
      const w = this.form.items[idx].workers[wi]
      const opt = this.healthWorkerOptions.find(o => o.value === w.workerId)
      w.workerName = opt ? opt.label : ''
      if (!w.workerId) return
      try {
        const res = await getJsjInfo(w.workerId, refundDateYmd(this.form))
        if (res.code === 200 && res.data) {
          w.jsjId = res.data.jsjId || ''
        }
      } catch (e) {}
    },
    resetForm() {
      this.form = this.createEmptyForm()
      this.availableItems = []
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    handleCancel() {
      this.visibleProxy = false
      this.resetForm()
    },
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        const err = validateRefundForm(this.form)
        if (err) {
          this.$message.warning(err)
          return
        }
        if (!this.storeId) {
          this.$message.warning('未获取到门店信息')
          return
        }
        this.submitting = true
        try {
          const body = buildRefundSubmitBody(this.form, {
            storeId: this.storeId,
            storeName: this.storeName,
            member: this.selectedMember,
            healthWorkerOptions: this.healthWorkerOptions,
            kjbWorkerOptions: this.techTeacherOptions
          })
          const res = await createHytkHytk(body)
          if (res.code === 200) {
            this.$message.success('退卡记录已保存')
            this.$emit('submitted', body)
            try {
              window.dispatchEvent(new CustomEvent('store_pc_refund_updated'))
            } catch (e) {}
            this.visibleProxy = false
            this.resetForm()
          }
        } catch (e) {
          // 拦截器提示
        } finally {
          this.submitting = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* ====== 弹窗外壳 ====== */
::v-deep .refund-dialog {
  max-width: 1200px;
  margin-top: 5vh !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 .refund-dialog .el-dialog__header {
  display: none;
}

::v-deep .refund-dialog .el-dialog__body {
  padding: 0;
}

/* ====== 内部结构 ====== */
.refund-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.refund-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);
}

.refund-title-wrap {
  flex: 1;
}

.refund-title {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}

.refund-subtitle {
  font-size: 12px;
  color: #475569;
  margin-top: 2px;
}

.refund-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;
  }
}

/* ====== 双栏主体 ====== */
.refund-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}

.refund-form {
  display: flex;
  flex: 1;
  min-height: 0;
}

.refund-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;
}

.refund-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;
}

/* ====== 上传提示 ====== */
.upload-tip {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 8px;
}

/* ====== footer ====== */
.refund-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;
  }

  .highlight-orange {
    color: #f97316;
    font-size: 14px;
  }
}

.footer-actions {
  display: flex;
  gap: 10px;
}

/* ====== 统一输入框 / 按钮风格 ====== */
::v-deep .refund-dialog .el-form-item__label {
  white-space: nowrap;
}

::v-deep .refund-dialog .el-input__inner {
  border-radius: 999px;
  height: 32px;
  line-height: 32px;
  border-color: #e5e7eb;
  background-color: #f9fafb;
}

::v-deep .refund-dialog .el-input__inner:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}

::v-deep .refund-dialog .el-input-group__prepend {
  border-radius: 999px 0 0 999px;
  background: #f1f5f9;
  border-color: #e5e7eb;
  padding: 0 10px;
  color: #64748b;
}

::v-deep .refund-dialog .el-input-group .el-input__inner {
  border-radius: 0 999px 999px 0;
}

::v-deep .refund-dialog .el-textarea__inner {
  border-radius: 12px;
  border-color: #e5e7eb;
  background-color: #f9fafb;
}

::v-deep .refund-dialog .el-textarea__inner:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}

::v-deep .refund-dialog .el-input-number {
  .el-input__inner {
    border-radius: 999px;
  }
}

::v-deep .refund-dialog .el-upload-list__item {
  border-radius: 8px;
}

::v-deep .refund-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 .refund-dialog .el-button--primary.is-disabled {
  box-shadow: none;
}

::v-deep .refund-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 .refund-dialog .el-button--default:hover {
  background: rgba(219, 234, 254, 0.95);
  color: #1d4ed8;
}

::v-deep .refund-dialog .el-form-item {
  margin-bottom: 12px;
}

::v-deep .refund-dialog .el-picker-panel {
  border-radius: 12px;
}

::v-deep .refund-dialog .el-select {
  width: 100%;
}
</style>
