﻿<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-select
                :style='{"width":"100%"}'
                v-model="query.kdhy"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="kdhyLoading">
                <el-option
                v-for="item in kdhyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据门店">
              <el-select v-model="query.djmd" placeholder="单据门店" clearable @change="handleDjmdChange">
                <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-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.jksId" placeholder="健康师" clearable filterable>
                  <el-option v-for="(item, index) in jksOptions" :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.kjblsId" placeholder="科技老师" clearable filterable>
                  <el-option v-for="(item, index) in kjbOptions" :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>
            <el-col :span="6">
              <el-form-item label="是否作废">
                <el-select v-model="query.isEffective" placeholder="是否作废">
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="作废" value="-1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="ID">
                <el-input v-model="query.id" placeholder="ID" clearable />
              </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 prop="id" label="ID" width="150" align="left" />
          <!-- 展开行 -->
          <el-table-column type="expand" width="50">
            <template slot-scope="props">
              <div class="expand-container" v-if="props.row.ItemDetails && props.row.ItemDetails.length > 0">
                <div class="expand-title">
                  <i class="el-icon-goods"></i>
                  项目明细
                </div>
                <el-table :data="props.row.ItemDetails" border size="small" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
                  <el-table-column prop="pxmc" label="项目名称" align="left" width="180">
                    <template slot-scope="scope">
                      <div class="item-name">
                        <i class="el-icon-goods item-icon"></i>
                        <span>{{ scope.row.pxmc || '无' }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="px" label="项目编号" align="left" width="120">
                    <template slot-scope="scope">
                      <span>{{ scope.row.px || '无' }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="pxjg" label="项目价格" align="right" width="120">
                    <template slot-scope="scope">
                      <span class="amount-value">¥{{ formatMoney(scope.row.pxjg) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="projectNumber" label="项目次数" align="right" width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.row.projectNumber || 0 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalPrice" label="总价" align="right" width="120">
                    <template slot-scope="scope">
                      <span class="amount-value">¥{{ formatMoney(scope.row.totalPrice) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="actualPrice" label="实付金额" align="right" width="120">
                    <template slot-scope="scope">
                      <span class="amount-paid">¥{{ formatMoney(scope.row.actualPrice) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="sourceType" label="来源类型" align="left" width="100">
                    <template slot-scope="scope">
                      <el-tag size="small" type="info">
                        {{ scope.row.sourceType || '无' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="left" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.remark || '无' }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="expand-empty" v-else>
                <i class="el-icon-info"></i>
                <span>暂无项目明细</span>
              </div>
            </template>
          </el-table-column>
          <!-- 开单编号 -->
          <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 | dynamicText(khlxOptions) }}</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="300" align="center">
            <template slot-scope="scope">
              <div class="paid-amount-info">
                <i class="el-icon-money amount-icon"></i>  
                <span class="text-nowrap">{{ scope.row.deductAmount || '无' }}</span> 
                <!-- -
                <span class="text-nowrap">{{ (Number(scope.row.zdyj)-Number(scope.row.sfyj) - Number(scope.row.qk)) || '无' }}</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" v-if="isshow">
            <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" v-if="isshow">
            <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 prop="appointmentId" label="关联预约号" align="left" width="180">
            <template slot-scope="scope">
              <el-link v-if="scope.row.appointmentId" type="primary" @click="goToYyjl(scope.row.appointmentId)" :underline="false">
                {{ scope.row.appointmentId }}
              </el-link>
              <span v-else>-</span>
            </template>
          </el-table-column>
           <!-- 操作人 -->
           <el-table-column label="操作人" width="180" align="center" >
            <template slot-scope="scope">
              <div class="referrer-info">
                <i class="el-icon-user referrer-icon"></i>
                <span class="text-nowrap">{{ scope.row.createUserName?scope.row.createUserName+'('+scope.row.createUser+')':'无' }}</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.isEffective == '1'?'正常':'作废'}}</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 v-if="isshow">
            <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="240" align="left" fixed="right">
            <template slot-scope="scope">
              <div class="action-buttons">
                <el-button 
                  v-has="'btn_edit'"
									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 
                  v-has="'btn_remove'"
									type="text" 
									icon="el-icon-delete" 
									@click="handleDel(scope.row.id)"
									class="delete-btn"
								>
									删除
								</el-button>
                <!-- <el-button v-if="scope.row.sfyj >= 0" type="text" @click="handleHedge(scope.row.id)">对冲</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" />
    <HedgeDialog ref="hedgeDialog" @refresh="refresh" />
  </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 HedgeDialog from './hedge-dialog'
import { previewDataInterface } from '@/api/systemData/dataInterface'
import { number } from 'echarts/lib/export'
export default {
  components: { NCCForm, ExportBox, MemberCreateDialog, LqKdKdjlbDetail, HedgeDialog },
  data() {
    return {
      kdhyLoading: false,
      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,
        jksId: undefined,
        kjblsId: undefined,
      },
      list: [],
      listLoading: true,
      multipleSelection: [], total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        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": "否" }],
      jksOptions: [],
      kjbOptions: [],
      khlxOptions: [],
    }
  },
  computed: {},
  created() {
    // if(this.$route.query.employeeId){
    //     this.query.createUser = this.$route.query.employeeId
    // }
    if(this.$route.query.storeId){
        this.query.djmd = this.$route.query.storeId
    }
    if(this.$route.query.startTime && this.$route.query.endTime) {
        this.query.kdrq = [this.$route.query.startTime, this.$route.query.endTime]
    }
    // 从路由参数中读取健康师ID，用于筛选开单记录
    if(this.$route.query.jksId){
        this.query.jksId = this.$route.query.jksId
    }
    this.initData()
    this.getkdhyOptions();
    this.getdjmdOptions();
    this.getjsjOptions();
    this.gethgjgOptions();
    this.getfkyyOptions();
    this.getjksOptions();
    this.getkjbOptions();
    this.getkhlxOptions();
  },
  methods: {
    goToYyjl(id) {
      if (id) {
        this.$router.push({
          path: '/lqYyjl',
          query: { id: id }
        })
      }
    },
    detailHandle(id) {
      this.$refs.detailDialog.init(id)
    },
    getkdhyOptions() {
      request({
				url: '/api/Extend/LqKhxx?page=1&pageSize=10',
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data.list.length > 0) {
					this.kdhyOptions = res.data.list.map(item => ({
						value: item.id,
						label: `${item.khmc}`+'('+item.sjh+' '+item.gsmdName+')',
					}));
				} else {
					this.kdhyOptions = [];
				}
				console.error(this.kdhyOptions)
			})
    },
    async remoteMethod(query){
			if (query !== '') {
				this.kdhyLoading = true;
				await request({
					url: '/api/Extend/LqKhxx?page=1&pageSize=20&keyword='+query,
					method: 'GET',
				}).then((res) => {
					this.kdhyLoading = false;
					if (res.code == 200 && res.data.list.length > 0) {
						this.kdhyOptions = res.data.list.map(item => ({
							value: item.id,
							label: `${item.khmc}`+'('+item.sjh +' '+item.gsmdName+')',
						}));
					} else {
						this.kdhyOptions = [];
					}
					console.error(this.kdhyOptions)
				})
			
			} else {
				// this.kdhyOptions = [];
			}
		},
    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
      });
    },
    // 获取健康师选项
    getjksOptions() {
      // 如果选择了门店，则根据门店获取健康师；否则获取所有健康师
      const mdid = this.query.djmd ? `&mdid=${this.query.djmd}` : '';
      request({
        url: `/api/Extend/user?page=1&pageSize=1000${mdid}&gw=健康师`,
        method: 'GET',
      }).then((res) => {
        if (res.code == 200 && res.data.list.length > 0) {
          this.jksOptions = res.data.list.map(item => ({
            fullName: item.realName || item.name || item.userName,
            id: item.id,
            value: item.id,
            label: item.realName || item.name || item.userName,
          }));
        } else {
          this.jksOptions = [];
        }
      })
    },
    // 获取科技部老师选项
    async getkjbOptions() {
      const userResponse = await request({
        url: `/api/Extend/user?page=1&pageSize=1000&gw=科技老师`,
        method: 'GET',
      });
      
      if (userResponse.code == 200 && userResponse.data && userResponse.data.list.length > 0) {
        this.kjbOptions = userResponse.data.list.map(item => ({
          fullName: item.realName || item.name || item.userName,
          id: item.id,
          value: item.id,
          label: item.realName || item.name || item.userName,
        }));
      } else {
        this.kjbOptions = [];
      }
    },
    // 获取顾客类型选项
    getkhlxOptions() {
      request({
        url: '/api/Extend/lqkhxx/deduct-types',
        method: 'GET',
      }).then((res) => {
        this.khlxOptions = res.data.map(item => ({
          fullName: item.Name,
          id: item.Value + '',
          value: item.Value + '',
          label: item.Name,
        }));
      }).catch((err) => {
        this.khlxOptions = [];
        console.error('获取客户类型失败:', err);
      })
    },
    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: 10,
        sort: "desc",
        sidx: "",
      }
      this.initData()
    },
    refresh(isrRefresh) {
      this.formVisible = false
      if (isrRefresh) {
        this.initData()
      }
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 10,
        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'
      })
    },
    // 格式化金额
    formatMoney(amount) {
      if (!amount && amount !== 0) return '0.00'
      return Number(amount).toFixed(2)
    },
    // 打开会员建档弹窗
    openMemberCreateDialog() {
      this.memberCreateVisible = true
    },
    // 处理会员建档成功
    handleMemberCreateSuccess(memberData) {
      console.log('会员建档成功:', memberData)
      // 刷新会员列表
      this.getkdhyOptions()
      // 自动选择新创建的会员
      if (memberData && memberData.id) {
        this.query.kdhy = memberData.id
        this.$message.success('会员建档成功，已自动选择该会员')
      }
    },
    // 单据门店变化时重新加载健康师列表
    handleDjmdChange() {
      this.query.jksId = undefined; // 清空健康师选择
      this.getjksOptions();
    },
    // 处理对冲
    handleHedge(billingId) {
      this.$refs.hedgeDialog.init(billingId)
    }
  }
}
</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;
    }
  }
}

// 展开行样式
.expand-container {
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
  margin: 8px 0;

  .expand-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e4e7ed;

    i {
      color: #409EFF;
      font-size: 16px;
    }
  }

  .item-name {
    display: flex;
    align-items: center;
    gap: 6px;

    .item-icon {
      color: #67C23A;
      font-size: 14px;
    }
  }

  .amount-value {
    font-weight: 600;
    color: #409EFF;
  }

  .amount-paid {
    font-weight: 600;
    color: #67C23A;
  }
}

.expand-empty {
  padding: 20px;
  text-align: center;
  color: #909399;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  i {
    font-size: 16px;
  }
}
</style>