﻿<template>
  <div class="NCC-common-layout">
    <div class="NCC-common-layout-center">
      <el-row class="NCC-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <!-- <el-col :span="6">
						<el-form-item label="开单会员">
							<el-select v-model="query.kdhy" placeholder="开单会员" clearable >
								<el-option v-for="(item, index) in kdhyOptions" :key="index" :label="item.fullName" :value="item.id"  />
							</el-select>
						</el-form-item>
					</el-col> -->
          <el-col :span="6">
            <el-form-item label="开单日期">
              <el-date-picker v-model="query.kdrq" type="daterange" value-format="timestamp" format="yyyy-MM-dd"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开单会员">
              <el-input v-model="query.kdhyc" placeholder="开单会员" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员手机号">
              <el-input v-model="query.kdhysjh" placeholder="会员手机号" clearable />
            </el-form-item>
          </el-col>

          <template v-if="showAll">

            <el-col :span="6">
              <el-form-item label="单据门店">
                <el-select v-model="query.djmd" placeholder="单据门店" clearable>
                  <el-option v-for="(item, index) in djmdOptions" :key="index" :label="item.fullName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合作机构">
                <el-select v-model="query.hgjg" placeholder="合作机构" clearable>
                  <el-option v-for="(item, index) in hgjgOptions" :key="index" :label="item.fullName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="整单业绩">
                <el-input v-model="query.zdyj" placeholder="整单业绩" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实付业绩">
                <el-input v-model="query.sfyj" placeholder="实付业绩" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="欠款">
                <el-input v-model="query.qk" placeholder="欠款" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款方式">
                <el-select v-model="query.fkfs" placeholder="付款方式" clearable>
                  <el-option v-for="(item, index) in fkfsOptions" :key="index" :label="item.fullName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款医院">
                <el-select v-model="query.fkyy" placeholder="付款医院" clearable>
                  <el-option v-for="(item, index) in fkyyOptions" :key="index" :label="item.fullName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="是否首开订单">
                <el-select v-model="query.sfskdd" placeholder="是否首开订单">
                  <el-option v-for="(item, index) in sfskddOptions" :key="index" :label="item.fullName"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>


          </template>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="NCC-common-layout-main NCC-flex-main">
        <div class="NCC-common-head">
          <!-- <div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
            <el-button type="success" icon="el-icon-user" @click="openMemberCreateDialog()">建档</el-button>
            <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
          </div> -->
          <div class="NCC-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
          <!-- 开单编号 -->
          <el-table-column label="开单编号" width="180" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="order-info">
                <i class="el-icon-document order-icon"></i>
                <span class="text-nowrap">{{ scope.row.id || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 开单会员 -->
          <!-- <el-table-column label="开单会员" width="100" align="center">
						<template slot-scope="scope">
							<div class="member-info">
								<i class="el-icon-user member-icon"></i>
								<span class="text-nowrap">{{ scope.row.kdhy | dynamicText(kdhyOptions) || '无' }}</span>
							</div>
						</template>
					</el-table-column> -->

          <!-- 开单会员名称 -->
          <el-table-column label="开单会员" width="100" align="center">
            <template slot-scope="scope">
              <div class="member-name">
                <i class="el-icon-user-solid member-name-icon"></i>
                <span class="text-nowrap">{{ scope.row.kdhyc || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 会员手机号 -->
          <el-table-column label="会员手机号" width="120" align="center">
            <template slot-scope="scope">
              <div class="phone-info">
                <i class="el-icon-phone phone-icon"></i>
                <span class="text-nowrap">{{ scope.row.kdhysjh || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 单据门店 -->
          <el-table-column label="单据门店" width="120" align="center">
            <template slot-scope="scope">
              <div class="store-info">
                <i class="el-icon-office-building store-icon"></i>
                <span class="text-nowrap">{{ scope.row.djmd | dynamicText(djmdOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 金三角 -->
          <el-table-column label="金三角" width="120" align="center">
            <template slot-scope="scope">
              <div class="jsj-info">
                <i class="el-icon-star-on jsj-icon"></i>
                <span class="text-nowrap">{{ scope.row.jsj | dynamicText(jsjOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 开单日期 -->
          <!-- <el-table-column label="开单日期" width="120" align="center">
            <template slot-scope="scope">
              <div class="date-info">
                <i class="el-icon-date date-icon"></i>
                <span class="text-nowrap">{{ formatDate(scope.row.kdrq) }}</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="kdrq" label="开单日期" width="140" align="left" :formatter="ncc.tableDateFormat" />
          <!-- 顾客类型 -->
          <el-table-column label="顾客类型" width="120" align="center">
            <template slot-scope="scope">
              <div class="customer-type-info">
                <i class="el-icon-user customer-type-icon"></i>
                <span class="text-nowrap">{{ scope.row.gjlx }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 整单业绩 -->
          <el-table-column label="整单业绩" width="120" align="center">
            <template slot-scope="scope">
              <div class="amount-info">
                <i class="el-icon-money amount-icon"></i>
                <span class="text-nowrap">{{ scope.row.zdyj || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 实付业绩 -->
          <el-table-column label="实付业绩" width="120" align="center">
            <template slot-scope="scope">
              <div class="paid-amount-info">
                <i class="el-icon-coin paid-amount-icon"></i>
                <span class="text-nowrap">{{ scope.row.sfyj || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 欠款 -->
          <el-table-column label="欠款" width="100" align="center">
            <template slot-scope="scope">
              <div class="debt-info">
                <i class="el-icon-warning debt-icon"></i>
                <span class="text-nowrap">{{ scope.row.qk || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 储扣方式 -->
          <el-table-column label="储扣方式" width="120" align="center">
            <template slot-scope="scope">
              <div class="storage-info">
                <i class="el-icon-coin storage-icon"></i>
                <span class="text-nowrap">{{ scope.row.ckfs | dynamicText(ckfsOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 储扣明细 -->
          <el-table-column label="储扣明细" width="120" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="storage-detail-info">
                <i class="el-icon-document storage-detail-icon"></i>
                <span class="text-nowrap">{{ scope.row.ckmx || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 付款方式 -->
          <el-table-column label="付款方式" width="120" align="center">
            <template slot-scope="scope">
              <div class="payment-info">
                <i class="el-icon-credit-card payment-icon"></i>
                <span class="text-nowrap">{{ scope.row.fkfs | dynamicText(fkfsOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 付款医院 -->
          <el-table-column label="付款医院" width="120" align="center">
            <template slot-scope="scope">
              <div class="hospital-info">
                <i class="el-icon-office-building hospital-icon"></i>
                <span class="text-nowrap">{{ scope.row.fkyy | dynamicText(fkyyOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 合作机构 -->
          <el-table-column label="合作机构" width="120" align="center">
            <template slot-scope="scope">
              <div class="cooperation-info">
                <i class="el-icon-office-building cooperation-icon"></i>
                <span class="text-nowrap">{{ scope.row.hgjg | dynamicText(hgjgOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 付款判断 -->
          <el-table-column label="付款判断" width="120" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="payment-judge-info">
                <i class="el-icon-check payment-judge-icon"></i>
                <span class="text-nowrap">{{ scope.row.fkpd || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 客户来源 -->
          <el-table-column label="客户来源" width="120" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="source-info">
                <i class="el-icon-connection source-icon"></i>
                <span class="text-nowrap">{{ scope.row.khly | dynamicText(khlyOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 推荐人 -->
          <el-table-column label="推荐人" width="100" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="referrer-info">
                <i class="el-icon-user referrer-icon"></i>
                <span class="text-nowrap">{{ scope.row.tjr || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 是否首开订单 -->
          <el-table-column label="是否首开订单" width="140" align="center">
            <template slot-scope="scope">
              <div class="first-order-info">
                <i class="el-icon-star-on first-order-icon"></i>
                <span class="text-nowrap">{{ scope.row.sfskdd | dynamicText(sfskddOptions) || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 简介 -->
          <el-table-column label="简介" width="120" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="intro-info">
                <i class="el-icon-document intro-icon"></i>
                <span class="text-nowrap">{{ scope.row.jj || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 备注 -->
          <el-table-column label="备注" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="remark-info">
                <i class="el-icon-document remark-icon"></i>
                <span class="text-nowrap">{{ scope.row.bz || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 健康师业绩 -->
          <el-table-column label="健康师业绩" width="130" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="jks-amount-info">
                <i class="el-icon-medicine-box jks-amount-icon"></i>
                <span class="text-nowrap">{{ scope.row.jksyj || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 科技部老师业绩 -->
          <el-table-column label="科技部老师业绩" width="150" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="kjb-amount-info">
                <i class="el-icon-cpu kjb-amount-icon"></i>
                <span class="text-nowrap">{{ scope.row.kjblsyj || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 品项信息 -->
          <el-table-column label="品项信息" width="120" align="center" v-if="isshow">
            <template slot-scope="scope">
              <div class="product-info">
                <i class="el-icon-goods product-icon"></i>
                <span class="text-nowrap">{{ scope.row.pxxx || '无' }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" width="160" align="left" fixed="right">
            <template slot-scope="scope">
              <div class="action-buttons">
                <!-- <el-button 
									type="text" 
									icon="el-icon-edit" 
									@click="addOrUpdateHandle(scope.row.id)"
									class="edit-btn"
								>
									编辑
								</el-button> -->
                <el-button type="text" @click="detailHandle(scope.row.id)" class="edit-btn">
                  详情
                </el-button>
                <el-button 
									type="text" 
									icon="el-icon-delete" 
									@click="handleDel(scope.row.id)"
									class="delete-btn"
								>
									删除
								</el-button>
              </div>
            </template>
          </el-table-column>
        </NCC-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" />
      </div>
    </div>
    <NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
    <LqKdKdjlbDetail ref="detailDialog" />
    <MemberCreateDialog :visible.sync="memberCreateVisible" @success="handleMemberCreateSuccess" />
  </div>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import NCCForm from './Form'
import ExportBox from './ExportBox'
import LqKdKdjlbDetail from './detail'
import MemberCreateDialog from './MemberCreateDialog'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
  components: { NCCForm, ExportBox, MemberCreateDialog, LqKdKdjlbDetail },
  data() {
    return {
      isshow: false,
      showAll: false,
      query: {
        id: undefined,
        kdhy: undefined,
        kdhyc: undefined,
        kdhysjh: undefined,
        djmd: undefined,
        jsj: undefined,
        kdrq: undefined,
        gjlx: undefined,
        hgjg: undefined,
        zdyj: undefined,
        sfyj: undefined,
        qk: undefined,
        ckfs: undefined,
        ckmx: undefined,
        fkfs: undefined,
        fkyy: undefined,
        fkpd: undefined,
        khly: undefined,
        tjr: undefined,
        sfskdd: undefined,
        jj: undefined,
        bz: undefined,
        jksyj: undefined,
        kjblsyj: undefined,
        pxxx: undefined,
      },
      list: [],
      listLoading: true,
      multipleSelection: [], total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      memberCreateVisible: false,
      columnList: [
        { prop: 'id', label: '开单编号' },
        { prop: 'kdhy', label: '开单会员' },
        { prop: 'kdhyc', label: '开单会员名称' },
        { prop: 'kdhysjh', label: '会员手机号' },
        { prop: 'djmd', label: '单据门店' },
        { prop: 'jsj', label: '金三角' },
        { prop: 'kdrq', label: '开单日期' },
        { prop: 'gjlx', label: '顾客类型' },
        { prop: 'hgjg', label: '合作机构' },
        { prop: 'zdyj', label: '整单业绩' },
        { prop: 'sfyj', label: '实付业绩' },
        { prop: 'qk', label: '欠款' },
        { prop: 'ckfs', label: '储扣方式' },
        { prop: 'ckmx', label: '储扣明细' },
        { prop: 'fkfs', label: '付款方式' },
        { prop: 'fkyy', label: '付款医院' },
        { prop: 'fkpd', label: '付款判断' },
        { prop: 'khly', label: '客户来源' },
        { prop: 'tjr', label: '推荐人' },
        { prop: 'sfskdd', label: '是否首开订单' },
        { prop: 'jj', label: '简介' },
        { prop: 'bz', label: '备注' },
        { prop: 'jksyj', label: '健康师业绩' },
        { prop: 'kjblsyj', label: '科技部老师业绩' },
        { prop: 'pxxx', label: '品项信息' },
      ],
      kdhyOptions: [],
      djmdOptions: [],
      jsjOptions: [],
      hgjgOptions: [],
      ckfsOptions: [{ "fullName": "储值卡", "id": "储值卡" }, { "fullName": "扣项", "id": "扣项" }, { "fullName": "套餐", "id": "套餐" }],
      fkfsOptions: [{ "fullName": "现金", "id": "现金" }, { "fullName": "微信", "id": "微信" }, { "fullName": "支付宝", "id": "支付宝" }, { "fullName": "银行卡", "id": "银行卡" }, { "fullName": "合作", "id": "合作" }, { "fullName": "医院", "id": "医院" }],
      fkyyOptions: [],
      khlyOptions: [{ "fullName": "自然到店", "id": "自然到店" }, { "fullName": "会员推广", "id": "会员推广" }, { "fullName": "网络推广", "id": "网络推广" }],
      sfskddOptions: [{ "fullName": "是", "id": "是" }, { "fullName": "否", "id": "否" }],
    }
  },
  computed: {},
  created() {
    this.initData()
    // this.getkdhyOptions();
    this.getdjmdOptions();
    this.getjsjOptions();
    this.gethgjgOptions();
    this.getfkyyOptions();
  },
  methods: {
    detailHandle(id) {
      this.$refs.detailDialog.init(id)
    },
    getkdhyOptions() {
      previewDataInterface('730998109110273285').then(res => {
        this.kdhyOptions = res.data
      });
    },
    getdjmdOptions() {
      previewDataInterface('730960205902251269').then(res => {
        this.djmdOptions = res.data
      });
    },
    getjsjOptions() {
      previewDataInterface('733894897408410885').then(res => {
        this.jsjOptions = res.data
      });
    },
    gethgjgOptions() {
      previewDataInterface('733896629660157189').then(res => {
        this.hgjgOptions = res.data
      });
    },
    getfkyyOptions() {
      previewDataInterface('733898797075137797').then(res => {
        this.fkyyOptions = res.data
      });
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query
      };
      let query = {}
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join()
        } else {
          query[key] = _query[key]
        }
      }
      request({
        url: `/api/Extend/LqKdKdjlb`,
        method: 'GET',
        data: query
      }).then(res => {
        this.list = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/Extend/LqKdKdjlb/${id}`,
          method: 'DELETE'
        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            onClose: () => {
              this.initData()
            }
          });
        })
      }).catch(() => {
      });
    },
    handleSelectionChange(val) {
      const res = val.map(item => item.id)
      this.multipleSelection = res
    },
    handleBatchRemoveDel() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'error',
          message: '请选择一条数据',
          duration: 1500,
        })
        return
      }
      const ids = this.multipleSelection
      this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/Extend/LqKdKdjlb/batchRemove`,
          method: 'POST',
          data: ids,
        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            onClose: () => {
              this.initData()
            }
          });
        })
      }).catch(() => { })
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.NCCForm.init(id, isDetail)
      })
    },
    exportData() {
      this.exportBoxVisible = true
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.columnList)
      })
    },
    download(data) {
      let query = { ...data, ...this.listQuery, ...this.query }
      request({
        url: `/api/Extend/LqKdKdjlb/Actions/Export`,
        method: 'GET',
        data: query
      }).then(res => {
        if (!res.data.url) return
        window.location.href = this.define.comUrl + res.data.url
        this.$refs.ExportBox.visible = false
        this.exportBoxVisible = false
      })
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    refresh(isrRefresh) {
      this.formVisible = false
      if (isrRefresh) this.reset()
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    // 格式化日期
    formatDate(date) {
      if (!date) return '无'
      const d = new Date(date)
      if (isNaN(d.getTime())) return '无'
      return d.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },
    // 打开会员建档弹窗
    openMemberCreateDialog() {
      this.memberCreateVisible = true
    },
    // 处理会员建档成功
    handleMemberCreateSuccess(memberData) {
      console.log('会员建档成功:', memberData)
      // 刷新会员列表
      this.getkdhyOptions()
      // 自动选择新创建的会员
      if (memberData && memberData.id) {
        this.query.kdhy = memberData.id
        this.$message.success('会员建档成功，已自动选择该会员')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 通用文本不换行样式
.text-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

// 开单编号样式
.order-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .order-icon {
    color: #409EFF;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 会员信息样式
.member-info,
.member-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .member-icon,
  .member-name-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 手机号样式
.phone-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .phone-icon {
    color: #409EFF;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 门店信息样式
.store-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .store-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 金三角样式
.jsj-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .jsj-icon {
    color: #E6A23C;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 日期样式
.date-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .date-icon {
    color: #909399;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 金额相关样式
.amount-info,
.paid-amount-info,
.jks-amount-info,
.kjb-amount-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .amount-icon,
  .paid-amount-icon,
  .jks-amount-icon,
  .kjb-amount-icon {
    color: #409EFF;
    font-size: 16px;
  }

  span {
    font-weight: 600;
    color: #409EFF;
  }
}

// 欠款样式
.debt-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .debt-icon {
    color: #F56C6C;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #F56C6C;
  }
}

// 付款方式样式
.payment-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .payment-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 客户来源样式
.source-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .source-icon {
    color: #909399;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 推荐人样式
.referrer-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .referrer-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 备注样式
.remark-info {
  display: flex;
  align-items: center;
  gap: 6px;

  .remark-icon {
    color: #909399;
    font-size: 14px;
  }

  span {
    color: #606266;
  }
}

// 顾客类型样式
.customer-type-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .customer-type-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 合作机构样式
.cooperation-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .cooperation-icon {
    color: #909399;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 储扣方式样式
.storage-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .storage-icon {
    color: #E6A23C;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 储扣明细样式
.storage-detail-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .storage-detail-icon {
    color: #909399;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 付款医院样式
.hospital-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .hospital-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 付款判断样式
.payment-judge-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .payment-judge-icon {
    color: #409EFF;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 是否首开订单样式
.first-order-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .first-order-icon {
    color: #E6A23C;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 简介样式
.intro-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .intro-icon {
    color: #909399;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 品项信息样式
.product-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .product-icon {
    color: #67C23A;
    font-size: 16px;
  }

  span {
    font-weight: 500;
    color: #303133;
  }
}

// 操作按钮样式
.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;

  .edit-btn {
    color: #409EFF;

    &:hover {
      color: #66b1ff;
    }
  }

  .delete-btn {
    color: #F56C6C;

    &:hover {
      color: #f78989;
    }
  }
}
</style>