antissoft / lvqianmeiye_ERP

<template>
  <el-dialog
    :visible.sync="visibleProxy"
    :show-close="false"
    width="1200px"
    :close-on-click-modal="false"
    custom-class="billing-dialog"
    append-to-body
  >
    <div class="billing-dialog-inner">
      <div class="billing-header">
        <div class="billing-title-wrap">
          <div class="billing-title">快速开单</div>
          <div class="billing-subtitle" v-if="form.memberName">{{ form.memberName }}</div>
        </div>
        <div class="booking-source-tag" v-if="prefill && prefill.fromBooking">
          <i class="el-icon-date"></i>
          <span>预约开单</span>
          <span class="booking-source-detail">
            {{ prefill.bookingProject }} · {{ prefill.bookingDate }} {{ prefill.bookingTimeRange }}
            <template v-if="prefill.bookingStaff"> · {{ prefill.bookingStaff }}</template>
          </span>
        </div>
        <span class="billing-close" @click="handleCancel">
          <i class="el-icon-close"></i>
        </span>
      </div>

      <div class="billing-content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="96px"
          size="small"
          class="billing-form"
        >
          <!-- ===== 左栏 ===== -->
          <div class="billing-left">
            <div class="section-title"><i class="el-icon-document"></i> 基础信息</div>

            <el-form-item label="开单活动">
              <el-select v-model="form.activityId" placeholder="请选择活动（可选）" filterable clearable>
                <el-option v-for="a in activityOptions" :key="a.value" :label="a.label" :value="a.value" />
              </el-select>
            </el-form-item>

            <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="billingDate">
              <el-date-picker v-model="form.billingDate" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>

            <el-form-item label="整单业绩" prop="totalPerformance">
              <el-input v-model="form.totalPerformance" placeholder="请输入整单业绩">
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>

            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="实付业绩">
                  <el-input :value="actualPaid" readonly>
                    <template slot="prepend">¥</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="欠款">
                  <el-input :value="arrears" readonly>
                    <template slot="prepend">¥</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 储扣设置 -->
            <div class="section-title"><i class="el-icon-wallet"></i> 储扣设置</div>

            <el-form-item label="是否储扣">
              <el-radio-group v-model="form.isDeduct">
                <el-radio label="否">否</el-radio>
                <el-radio label="是">是</el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="form.isDeduct === '是'">
              <div
                v-for="(d, di) in form.deductItems"
                :key="'deduct-' + di"
                class="item-card deduct-card"
              >
                <div class="item-card-head">
                  <span class="item-card-no">储扣 {{ di + 1 }}</span>
                  <el-button
                    v-if="form.deductItems.length > 1"
                    type="text"
                    class="item-remove-btn"
                    @click="removeDeductItem(di)"
                  >
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </div>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-form-item label="品项" label-width="56px">
                      <el-select v-model="d.deductId" placeholder="选择储扣品项" filterable clearable @change="onDeductChange(di)">
                        <el-option v-for="dd in deductOptions" :key="dd.value" :label="dd.label" :value="dd.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="单价" label-width="48px">
                      <el-input :value="d.price" readonly />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="12">
                  <el-col :span="12">
                    <el-form-item label="数量" label-width="56px">
                      <el-input-number v-model="d.quantity" :min="1" :max="d.maxQty || 999" controls-position="right" style="width:100%" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="小计" label-width="48px">
                      <el-input :value="deductSubtotal(d)" readonly />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="add-btn-row">
                <el-button type="text" @click="addDeductItem">
                  <i class="el-icon-circle-plus-outline"></i> 添加储扣品项
                </el-button>
              </div>
            </template>

            <!-- 付款与其他 -->
            <div class="section-title"><i class="el-icon-bank-card"></i> 付款与其他</div>

            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择付款方式">
                <el-option v-for="p in paymentOptions" :key="p.value" :label="p.label" :value="p.value" />
              </el-select>
            </el-form-item>

            <el-form-item v-if="form.paymentMethod === '合作'" label="合作机构">
              <el-select v-model="form.cooperateOrg" placeholder="请选择合作机构" filterable clearable>
                <el-option v-for="o in orgOptions" :key="o.value" :label="o.label" :value="o.value" />
              </el-select>
            </el-form-item>
            <el-form-item v-else label="结算机构">
              <el-select v-model="form.settleOrg" placeholder="请选择结算机构" filterable clearable>
                <el-option v-for="o in orgOptions" :key="o.value" :label="o.label" :value="o.value" />
              </el-select>
            </el-form-item>

            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="是否首开">
                  <el-select v-model="form.isFirstOrder" placeholder="请选择">
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="简介">
                  <el-input v-model="form.intro" placeholder="简要说明（可选）" />
                </el-form-item>
              </el-col>
            </el-row>

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

            <el-form-item label="收据文件">
              <el-upload
                action="#"
                :auto-upload="false"
                :file-list="form.receiptFiles"
                :on-change="(f, fl) => form.receiptFiles = fl"
                :on-remove="(f, fl) => form.receiptFiles = fl"
                multiple
              >
                <el-button size="mini" type="primary" plain><i class="el-icon-upload2"></i> 上传收据</el-button>
                <span slot="tip" class="upload-tip">支持图片、PDF，可多个</span>
              </el-upload>
            </el-form-item>

            <el-form-item label="方案文件">
              <el-upload
                action="#"
                :auto-upload="false"
                :file-list="form.otherFiles"
                :on-change="(f, fl) => form.otherFiles = fl"
                :on-remove="(f, fl) => form.otherFiles = fl"
                multiple
              >
                <el-button size="mini" type="primary" plain><i class="el-icon-upload2"></i> 上传文件</el-button>
                <span slot="tip" class="upload-tip">方案/其他附件</span>
              </el-upload>
            </el-form-item>

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

          <!-- ===== 右栏：品项明细 ===== -->
          <div class="billing-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-row :gutter="12">
                <el-col :span="12">
                  <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 projectOptions" :key="p.value" :label="p.label" :value="p.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="类型" label-width="48px">
                    <el-select v-model="item.type" placeholder="类型">
                      <el-option label="购买" value="购买" />
                      <el-option label="体验" value="体验" />
                      <el-option label="赠送" value="赠送" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="12">
                <el-col :span="8">
                  <el-form-item label="总价" label-width="48px">
                    <el-input v-model="item.totalPrice" placeholder="总价" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="数量" label-width="48px">
                    <el-input-number v-model="item.quantity" :min="1" :max="999" controls-position="right" style="width:100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单价" label-width="48px">
                    <el-input :value="itemUnitPrice(item)" readonly />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="备注" label-width="56px">
                <el-input v-model="item.remark" placeholder="品项备注（可选）" />
              </el-form-item>

              <!-- 健康师 -->
              <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-input v-model="w.amount" placeholder="业绩金额" size="mini" class="worker-amount">
                    <template slot="prepend">¥</template>
                  </el-input>
                  <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>

            <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="billing-footer">
        <div class="footer-summary">
          <span>品项合计 <b>¥{{ itemsTotal }}</b></span>
          <span v-if="form.isDeduct === '是'">储扣合计 <b>¥{{ deductTotal }}</b></span>
          <span>实付 <b class="highlight">¥{{ actualPaid }}</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>
export default {
  name: 'BillingDialog',
  props: {
    visible: { type: Boolean, default: false },
    prefill: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      submitting: false,
      form: this.createEmptyForm(),
      activityOptions: [
        { value: '1', label: '社区拓客活动' },
        { value: '2', label: '商场联营活动' }
      ],
      memberOptions: [
        { value: 'cust001', label: '张三', phone: '13800000001', type: '散客' },
        { value: 'cust002', label: '李四', phone: '13800000002', type: 'VIP' },
        { value: 'cust003', label: '王五', phone: '13800000003', type: '散客' }
      ],
      projectOptions: [
        { value: 'proj001', label: '基础护理', price: 380 },
        { value: 'proj002', label: '深度清洁', price: 268 },
        { value: 'proj003', label: '美白护理', price: 498 },
        { value: 'proj004', label: '补水保湿', price: 168 },
        { value: 'proj005', label: '储值10000', price: 1, isStoredValue: true }
      ],
      healthWorkerOptions: [
        { value: 'jks001', label: '张健康师' },
        { value: 'jks002', label: '李健康师' },
        { value: 'jks003', label: '王健康师' }
      ],
      paymentOptions: [
        { value: '现金', label: '现金' },
        { value: '微信', label: '微信' },
        { value: '支付宝', label: '支付宝' },
        { value: '银行卡', label: '银行卡' },
        { value: '合作', label: '合作' },
        { value: '直播收款', label: '直播收款' },
        { value: '合作方退', label: '合作方退' }
      ],
      orgOptions: [
        { value: 'org001', label: '合作机构A' },
        { value: 'org002', label: '合作机构B' }
      ],
      deductOptions: [
        { value: 'd001', label: '基础护理（剩余3次）', price: 380, remaining: 3 },
        { value: 'd002', label: '深度清洁（剩余2次）', price: 268, remaining: 2 }
      ],
      rules: {
        memberId: [{ required: true, message: '请选择开单会员', trigger: 'change' }],
        billingDate: [{ required: true, message: '请选择开单日期', trigger: 'change' }],
        totalPerformance: [{ required: true, message: '请输入整单业绩', trigger: 'blur' }],
        paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }]
      }
    }
  },
  computed: {
    visibleProxy: {
      get() { return this.visible },
      set(val) { this.$emit('update:visible', val) }
    },
    itemsTotal() {
      return this.form.items.reduce((sum, it) => {
        return sum + (parseFloat(it.totalPrice) || 0)
      }, 0).toFixed(2)
    },
    deductTotal() {
      if (this.form.isDeduct !== '是') return '0.00'
      return this.form.deductItems.reduce((sum, d) => {
        return sum + (parseFloat(d.price) || 0) * (d.quantity || 0)
      }, 0).toFixed(2)
    },
    actualPaid() {
      const items = parseFloat(this.itemsTotal) || 0
      const deduct = parseFloat(this.deductTotal) || 0
      const val = items - deduct
      return (val < 0 ? 0 : val).toFixed(2)
    },
    arrears() {
      const total = parseFloat(this.form.totalPerformance) || 0
      const paid = parseFloat(this.actualPaid) || 0
      const val = total - paid
      return (val < 0 ? 0 : val).toFixed(2)
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.applyPrefill()
      }
    },
    prefill: {
      deep: true,
      handler() {
        if (this.visible) this.applyPrefill()
      }
    }
  },
  methods: {
    createEmptyForm() {
      return {
        activityId: '',
        memberId: '',
        memberName: '',
        billingDate: new Date(),
        totalPerformance: '',
        paymentMethod: '微信',
        cooperateOrg: '',
        settleOrg: '',
        isFirstOrder: '否',
        isDeduct: '否',
        intro: '',
        remark: '',
        receiptFiles: [],
        otherFiles: [],
        items: [this.createEmptyItem()],
        deductItems: [this.createEmptyDeduct()]
      }
    },
    createEmptyItem() {
      return {
        projectId: '',
        totalPrice: '',
        quantity: 1,
        type: '购买',
        remark: '',
        workers: [{ workerId: '', amount: '' }]
      }
    },
    createEmptyDeduct() {
      return { deductId: '', price: '', quantity: 1, maxQty: 999 }
    },
    applyPrefill() {
      this.form = this.createEmptyForm()
      if (this.prefill) {
        if (this.prefill.memberId) {
          this.form.memberId = this.prefill.memberId
          this.form.memberName = this.prefill.name || ''
        } else if (this.prefill.name) {
          const found = this.memberOptions.find(m => m.label === this.prefill.name)
          if (found) {
            this.form.memberId = found.value
            this.form.memberName = found.label
          }
        }
      }
      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 : ''
    },
    onProjectChange(idx) {
      const item = this.form.items[idx]
      const p = this.projectOptions.find(o => o.value === item.projectId)
      if (p) {
        item.totalPrice = String(p.price * item.quantity)
      }
    },
    onDeductChange(di) {
      const d = this.form.deductItems[di]
      const found = this.deductOptions.find(o => o.value === d.deductId)
      if (found) {
        d.price = found.price
        d.maxQty = found.remaining
        if (d.quantity > found.remaining) d.quantity = found.remaining
      }
    },
    itemUnitPrice(item) {
      const qty = item.quantity || 1
      const total = parseFloat(item.totalPrice) || 0
      return qty > 0 ? (total / qty).toFixed(2) : '0.00'
    },
    deductSubtotal(d) {
      return ((parseFloat(d.price) || 0) * (d.quantity || 0)).toFixed(2)
    },
    addItem() {
      this.form.items.push(this.createEmptyItem())
    },
    removeItem(idx) {
      this.form.items.splice(idx, 1)
    },
    addWorker(idx) {
      this.form.items[idx].workers.push({ workerId: '', amount: '' })
    },
    removeWorker(idx, wi) {
      this.form.items[idx].workers.splice(wi, 1)
    },
    addDeductItem() {
      this.form.deductItems.push(this.createEmptyDeduct())
    },
    removeDeductItem(di) {
      this.form.deductItems.splice(di, 1)
    },
    resetForm() {
      this.form = this.createEmptyForm()
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    handleCancel() {
      this.visibleProxy = false
      this.resetForm()
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.submitting = true
        setTimeout(() => {
          this.submitting = false
          this.$message.success('开单已保存（示例）')
          this.$emit('submitted', this.form)
          this.visibleProxy = false
          this.resetForm()
        }, 800)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* ====== 弹窗外壳（统一风格） ====== */
::v-deep .billing-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 .el-dialog__header {
  display: none;
}

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

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

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

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

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

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

.booking-source-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  font-size: 12px;
  color: #ea580c;
  font-weight: 500;
  white-space: nowrap;

  i {
    font-size: 13px;
  }

  .booking-source-detail {
    color: #9a3412;
    font-weight: 400;
  }
}

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

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

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

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

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

.deduct-card {
  border-color: #fde68a;

  &:hover {
    border-color: #fbbf24;
  }
}

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

/* ====== 健康师行 ====== */
.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-amount {
  width: 140px;
  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 固定底部 ====== */
.billing-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 .billing-dialog .el-form-item__label {
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

::v-deep .billing-dialog .el-radio__input.is-checked .el-radio__inner {
  border-color: #2563eb;
  background: #2563eb;
}

::v-deep .billing-dialog .el-radio__input.is-checked + .el-radio__label {
  color: #2563eb;
}

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

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

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