<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"  label-width="auto">
      <el-form-item label="微信支付单号" prop="transactionId">
        <el-input
          v-model="queryParams.transactionId"
          placeholder="微信支付单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单号" prop="orderId"  label-width="auto">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
     
      <el-form-item label="用户" prop="name"  label-width="auto">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入用户"
          clearable
          @keyup.enter.native="handleQuery"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="下单手机号" prop="phone"  label-width="auto">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入下单手机号"
          clearable
          @keyup.enter.native="handleQuery"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="商品" prop="transactionId"  label-width="auto">
        <el-input
          v-model="queryParams.transactionId"
          placeholder="请输入商品"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="mark"  label-width="auto">
        <el-input
          v-model="queryParams.mark"
          placeholder="请输入订单状态"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="师傅" prop="mark"  label-width="auto">
        <el-input
          v-model="queryParams.mark"
          placeholder="请输入师傅"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="总价" prop="priceRange"  label-width="auto">
        <el-input
          v-model="queryParams.priceMin"
          placeholder="最低价"
          style="width: 100px; margin-right: 10px;"
          type="number"
          min="0"
          clearable
        />
        <span style="margin: 0 5px;">-</span>
        <el-input
          v-model="queryParams.priceMax"
          placeholder="最高价"
          style="width: 100px;"
          type="number"
          min="0"
          clearable
        />
      </el-form-item>

      <el-form-item label="支付金额" prop="priceRange">
        <el-input
          v-model="queryParams.priceMin"
          placeholder="最低价"
          style="width: 100px; margin-right: 10px;"
          type="number"
          min="0"
          clearable
        />
        <span style="margin: 0 5px;">-</span>
        <el-input
          v-model="queryParams.priceMax"
          placeholder="最高价"
          style="width: 100px;"
          type="number"
          min="0"
          clearable
        />
      </el-form-item>
 
      <el-form-item label="支付时间">
        <el-date-picker
          v-model="daterangePayTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="daterangePayTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:Order:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:Order:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:Order:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:Order:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="OrderList"
      @selection-change="handleSelectionChange"
      border
      stripe
      highlight-current-row
      style="width: 100%"
      :row-key="row => row.id"
    >
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="ID" align="center" width="55" prop="id" fixed="left" />
      <el-table-column label="订单号" align="center" prop="orderId" width="130" show-overflow-tooltip />
      <el-table-column label="用户" align="center" width="85" prop="uname" />
      <el-table-column label="商品" align="center" prop="productName" show-overflow-tooltip />
      <el-table-column label="姓名" align="center" width="80" prop="name"/>
       
      <el-table-column label="电话" align="center" width="120" prop="phone"/>
        

      <el-table-column label="总价" width="100" align="right" prop="totalPrice" >
        <template slot-scope="scope">
          <span class="price-tag">￥{{ (scope.row.totalPrice != null ? scope.row.totalPrice : 0).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" width="100" align="right" prop="payPrice" >
        <template slot-scope="scope">
          <span class="pay-price-tag">￥{{ (scope.row.payPrice != null ? scope.row.payPrice : 0).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="抵扣金额" width="100" align="right" prop="deduction" >
        <template slot-scope="scope">
          <span class="discount-tag">￥{{ (scope.row.deduction != null ? scope.row.deduction : 0).toFixed(2) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="支付时间" align="center" prop="payTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createdAt" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通话记录" align="center" width="100">
        <template slot-scope="scope">
          <div class="record-box" @click="showRecordDetails(scope.row, 'call')">
            <el-button type="text" class="expand-button">
              <span class="record-count">{{ scope.row.thjl || 0 }}</span>
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录音文件" align="center" width="100">
        <template slot-scope="scope">
          <div class="record-box" @click="showRecordDetails(scope.row, 'audio')">
            <el-button type="text" class="expand-button">
              <span class="record-count">{{ scope.row.lywj || 0 }}</span>
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="接单记录" align="center" width="100">
        <template slot-scope="scope">
          <div class="record-box" @click="showRecordDetails(scope.row, 'receive')">
            <el-button type="text" class="expand-button">
              <span class="record-count">{{ scope.row.jdjl || 0 }}</span>
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="通知记录" align="center" width="100">
        <template slot-scope="scope">
          <div class="record-box" @click="showRecordDetails(scope.row, 'notify')">
            <el-button type="text" class="expand-button">
              <span class="record-count">{{ scope.row.tzjl || 0 }}</span>
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>

      <!-- 修改评价列，点击时弹出对话框而非展开行 -->
      <el-table-column label="评价" align="center" width="100">
        <template slot-scope="scope">
          <div class="comment-box" @click="showCommentDetails(scope.row)">
            <el-button type="text" class="expand-button">
              <span class="comment-count">{{ scope.row.fwpj || 0 }}</span>
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </template>
      </el-table-column>

      <!-- 修复操作栏样式，确保按钮是标准圆形 -->
      <el-table-column label="操作" align="center" width="160"    fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="button-group" v-if="scope.row.id">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:Order:edit']"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:Order:remove']"
            ></el-button>
            <el-dropdown trigger="click" @command="(command) => handleCommand(command, scope.row)">
              <el-button
                size="mini"
                type="info"
                icon="el-icon-more"
                circle
                @click.stop
              ></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="jdjl" icon="el-icon-notebook-2">接单记录</el-dropdown-item>
                <el-dropdown-item command="lywj" icon="el-icon-headset">录音文件</el-dropdown-item>
                <el-dropdown-item command="tzjl" icon="el-icon-bell">通知记录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改服务订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="主订单号" prop="mainOrderId">
          <el-input v-model="form.mainOrderId" placeholder="请输入主订单号" />
        </el-form-item>
        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="form.orderId" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="微信支付单号" prop="transactionId">
          <el-input v-model="form.transactionId" placeholder="请输入微信支付单号" />
        </el-form-item>
        <el-form-item label="后台下单用户手机号" prop="createPhone">
          <el-input v-model="form.createPhone" placeholder="请输入后台下单用户手机号" />
        </el-form-item>
        <el-form-item label="用户" prop="uid">
          <el-input v-model="form.uid" placeholder="请输入用户" />
        </el-form-item>
        <el-form-item label="商品" prop="productId">
          <el-input v-model="form.productId" placeholder="请输入商品" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="预约时间-天" prop="makeTime">
          <el-input v-model="form.makeTime" placeholder="请输入预约时间-天" />
        </el-form-item>
        <el-form-item label="预约时间-小时" prop="makeHour">
          <el-input v-model="form.makeHour" placeholder="请输入预约时间-小时" />
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input v-model="form.num" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="总价" prop="totalPrice">
          <el-input v-model="form.totalPrice" placeholder="请输入总价" />
        </el-form-item>
        <el-form-item label="商品金额" prop="goodPrice">
          <el-input v-model="form.goodPrice" placeholder="请输入商品金额" />
        </el-form-item>
        <el-form-item label="服务金额" prop="servicePrice">
          <el-input v-model="form.servicePrice" placeholder="请输入服务金额" />
        </el-form-item>
        <el-form-item label="支付金额" prop="payPrice">
          <el-input v-model="form.payPrice" placeholder="请输入支付金额" />
        </el-form-item>
        <el-form-item label="优惠券ID" prop="couponId">
          <el-input v-model="form.couponId" placeholder="请输入优惠券ID" />
        </el-form-item>
        <el-form-item label="抵扣金额" prop="deduction">
          <el-input v-model="form.deduction" placeholder="请输入抵扣金额" />
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-date-picker clearable
                          v-model="form.payTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择支付时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="1：开始服务 2：暂停服务" prop="isPause">
          <el-input v-model="form.isPause" placeholder="请输入1：开始服务 2：暂停服务" />
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model="form.mark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="关联地址" prop="addressId">
          <el-input v-model="form.addressId" placeholder="请输入关联地址" />
        </el-form-item>
        <el-form-item label="多规格产品" prop="sku">
          <el-input v-model="form.sku" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="师傅ID" prop="workerId">
          <el-input v-model="form.workerId" placeholder="请输入师傅ID" />
        </el-form-item>
        <el-form-item label="转单之后，第一次接单的师傅" prop="firstWorkerId">
          <el-input v-model="form.firstWorkerId" placeholder="请输入转单之后，第一次接单的师傅" />
        </el-form-item>
        <el-form-item label="接单时间" prop="receiveTime">
          <el-date-picker clearable
                          v-model="form.receiveTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择接单时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="1:已评价 0：未评价" prop="isComment">
          <el-input v-model="form.isComment" placeholder="请输入1:已评价 0：未评价" />
        </el-form-item>
        <el-form-item label="1：已经接单" prop="isAccept">
          <el-input v-model="form.isAccept" placeholder="请输入1：已经接单" />
        </el-form-item>
        <el-form-item label="中间虚拟号" prop="middlePhone">
          <el-input v-model="form.middlePhone" placeholder="请输入中间虚拟号" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="userPhone">
          <el-input v-model="form.userPhone" placeholder="请输入用户手机号" />
        </el-form-item>
        <el-form-item label="师傅手机号" prop="workerPhone">
          <el-input v-model="form.workerPhone" placeholder="请输入师傅手机号" />
        </el-form-item>
        <el-form-item label="${comment}" prop="addressEn">
          <el-input v-model="form.addressEn" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="${comment}" prop="uidAdmin">
          <el-input v-model="form.uidAdmin" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="${comment}" prop="addressAdmin">
          <el-input v-model="form.addressAdmin" placeholder="请输入${comment}" />
        </el-form-item>
        <el-form-item label="${comment}" prop="logJson">
          <el-input v-model="form.logJson" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="${comment}" prop="logImages">
          <image-upload v-model="form.logImages"/>
        </el-form-item>
        <el-form-item label="${comment}" prop="createdAt">
          <el-date-picker clearable
                          v-model="form.createdAt"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择${comment}">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="${comment}" prop="updatedAt">
          <el-date-picker clearable
                          v-model="form.updatedAt"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择${comment}">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="${comment}" prop="deletedAt">
          <el-date-picker clearable
                          v-model="form.deletedAt"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择${comment}">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 通话记录弹窗 -->
    <call-record
      v-if="recordDialogVisible && currentRecordType === 'call'"
      :visible.sync="recordDialogVisible"
      :order-info="currentOrder"
    />

    <!-- 录音文件弹窗 -->
    <audio-record
      v-if="recordDialogVisible && currentRecordType === 'audio'"
      :visible.sync="recordDialogVisible"
      :order-info="currentOrder"
    />

    <!-- 接单记录弹窗 -->
    <receive-record
      v-if="recordDialogVisible && currentRecordType === 'receive'"
      :visible.sync="recordDialogVisible"
      :order-info="currentOrder"
    />

    <!-- 通知记录弹窗 -->
    <notify-record
      v-if="recordDialogVisible && currentRecordType === 'notify'"
      :visible.sync="recordDialogVisible"
      :order-info="currentOrder"
    />

    <!-- 评价弹窗 -->
    <comment-record
      v-if="commentDialogVisible"
      :visible.sync="commentDialogVisible"
      :order-info="currentOrder"
    />

    <!-- 编辑信息弹窗 -->
    <edit-info
      v-if="editInfoVisible"
      :visible.sync="editInfoVisible"
      :title="editInfoTitle"
      :label="editInfoLabel"
      :value="editInfoValue"
      :order-info="editInfoOrder"
      @success="handleEditInfoSuccess"
    />
  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder, getReceiveRecords, getCallRecords, getAudioRecords, getNotifyRecords } from "@/api/system/Order"
import CallRecord from './components/CallRecord'
import AudioRecord from './components/AudioRecord'
import ReceiveRecord from './components/ReceiveRecord'
import NotifyRecord from './components/NotifyRecord'
import CommentRecord from './components/CommentRecord'
import EditInfo from './components/EditInfo'

export default {
  name: "Order",
  components: {
    CallRecord,
    AudioRecord,
    ReceiveRecord,
    NotifyRecord,
    CommentRecord,
    EditInfo
  },
  dicts: ['order_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 服务订单表格数据
      OrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 当前编辑的行
      currentEditRow: null,
      currentPhoneEditRow: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        mainOrderId: null,
        orderId: null,
        transactionId: null,
        name: null,
        phone: null,
        mark: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        type: [
          { required: true, message: "1:服务项目 2：商品不能为空", trigger: "change" }
        ],
        orderId: [
          { required: true, message: "订单号不能为空", trigger: "blur" }
        ],
        createType: [
          { required: true, message: "1：用户自主下单，2：后台下单不能为空", trigger: "change" }
        ],
        productId: [
          { required: true, message: "商品不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "电话不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        num: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        totalPrice: [
          { required: true, message: "总价不能为空", trigger: "blur" }
        ],
        payPrice: [
          { required: true, message: "支付金额不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "订单状态  1:待接单  2：待服务，3：服务中，4：已结束 5：已取消  6:师傅完成服务 7：未服务提前结束订单不能为空", trigger: "change" }
        ],
        isPause: [
          { required: true, message: "1：开始服务 2：暂停服务不能为空", trigger: "blur" }
        ],
        isComment: [
          { required: true, message: "1:已评价 0：未评价不能为空", trigger: "blur" }
        ],
        isAccept: [
          { required: true, message: "1：已经接单不能为空", trigger: "blur" }
        ],
      },
      commentDialogVisible: false, // 评价详情对话框可见性
      currentOrder: null, // 当前操作的订单
      commentList: [], // 当前评价列表
      commentLoading: false, // 评价加载状态
      recordDialogVisible: false,
      recordDialogTitle: '',
      currentRecordType: '',
      recordList: [],
      recordLoading: false,
      // 编辑信息弹窗
      editInfoVisible: false,
      editInfoTitle: '',
      editInfoLabel: '',
      editInfoValue: '',
      editInfoOrder: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询服务订单列表 */
    getList() {
      this.loading = true
      listOrder(this.queryParams).then(response => {
        this.OrderList = response.rows.map(item => ({
          ...item,
          id: item.id || item.orderId, // 确保每行都有唯一标识
          thjl: item.thjl || 0,    // 通话记录数
          lywj: item.lywj || 0,   // 录音文件数
          jdjl: item.jdjl || 0, // 接单记录数
          tzjl: item.tzjl || 0,   // 通知记录数
          fwpj: item.fwpj || 0   // 评价数
        }))
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type: null,
        mainOrderId: null,
        orderId: null,
        transactionId: null,
        createType: null,
        createPhone: null,
        uid: null,
        productId: null,
        name: null,
        phone: null,
        address: null,
        makeTime: null,
        makeHour: null,
        num: null,
        totalPrice: null,
        goodPrice: null,
        servicePrice: null,
        payPrice: null,
        couponId: null,
        deduction: null,
        payTime: null,
        status: null,
        isPause: null,
        mark: null,
        addressId: null,
        sku: null,
        workerId: null,
        firstWorkerId: null,
        receiveTime: null,
        isComment: null,
        receiveType: null,
        isAccept: null,
        middlePhone: null,
        userPhone: null,
        workerPhone: null,
        addressEn: null,
        uidAdmin: null,
        addressAdmin: null,
        logStatus: null,
        logJson: null,
        jsonStatus: null,
        logImages: null,
        createdAt: null,
        updatedAt: null,
        deletedAt: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加服务订单"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getOrder(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改服务订单"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateOrder(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addOrder(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除服务订单编号为"' + ids + '"的数据项？').then(function() {
        return delOrder(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/Order/export', {
        ...this.queryParams
      }, `Order_${new Date().getTime()}.xlsx`)
    },
    /** 处理姓名修改弹窗 */
    handleNameEdit(row) {
      if (row) {
        // 来自表格行点击 - 直接修改行数据
        this.editInfoOrder = row
        this.editInfoValue = row.name || ''
      } else {
        // 来自搜索框点击 - 修改查询条件
        this.editInfoOrder = null
        this.editInfoValue = this.queryParams.name || ''
      }
      this.editInfoTitle = '修改姓名'
      this.editInfoLabel = '姓名'
      this.editInfoVisible = true
    },
    /** 处理电话修改弹窗 */
    handlePhoneEdit(row) {
      if (row) {
        // 来自表格行点击 - 直接修改行数据
        this.editInfoOrder = row
        this.editInfoValue = row.phone || ''
      } else {
        // 来自搜索框点击 - 修改查询条件
        this.editInfoOrder = null
        this.editInfoValue = this.queryParams.phone || ''
      }
      this.editInfoTitle = '修改电话'
      this.editInfoLabel = '电话'
      this.editInfoVisible = true
    },
    /** 处理编辑信息成功 */
    handleEditInfoSuccess(value) {
      if (this.editInfoOrder) {
        // 修改表格行数据
        this.editInfoOrder[this.editInfoLabel === '姓名' ? 'name' : 'phone'] = value
      } else {
        // 修改查询条件
        this.queryParams[this.editInfoLabel === '姓名' ? 'name' : 'phone'] = value
        this.handleQuery()
      }
    },
    /** 显示记录详情 */
    showRecordDetails(row, type) {
      this.currentOrder = row
      this.currentRecordType = type
      this.recordDialogVisible = true
    },
    /** 显示评价详情 */
    showCommentDetails(row) {
      this.currentOrder = row
      this.commentDialogVisible = true
    },
    /** 处理命令 */
    handleCommand(command, row) {
      if (command === 'jdjl') {
        this.showRecordDetails(row, 'receive')
      } else if (command === 'lywj') {
        this.showRecordDetails(row, 'audio')
      } else if (command === 'tzjl') {
        this.showRecordDetails(row, 'notify')
      }
    },
    statusTypeMap(status) {
      const statusMap = {
        '1': 'warning',  // 待接单
        '2': 'info',     // 待服务
        '3': 'primary',  // 服务中
        '4': 'success',  // 已结束
        '5': 'danger',   // 已取消
        '6': 'success',  // 师傅完成服务
        '7': 'danger'    // 未服务提前结束订单
      }
      return statusMap[status] || 'info';
    },
    // 格式化时长
    formatDuration(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}分${remainingSeconds}秒`;
    },
    // 获取通知类型标签样式
    getNotifyTypeTag(type) {
      const typeMap = {
        1: 'success',
        2: 'warning',
        3: 'info'
      };
      return typeMap[type] || 'info';
    },
    // 获取通知类型名称
    getNotifyTypeName(type) {
      const typeMap = {
        1: '接单通知',
        2: '服务通知',
        3: '系统通知'
      };
      return typeMap[type] || '其他通知';
    },
    // 播放音频
    playAudio(url) {
      // 实现音频播放逻辑
    },
    // 下载音频
    downloadAudio(url) {
      // 实现音频下载逻辑
    },
    // 刷新记录
    refreshRecords() {
      if (this.currentOrder) {
        this.getRecordList(this.currentOrder.orderId, this.currentRecordType);
      }
    },
    // 处理弹窗关闭
    handleRecordDialogClose() {
      this.recordDialogVisible = false;
      this.recordList = [];
    },
    // 解析 JSON 内容为对象数组
    parseContentItems(content) {
      if (!content) return [];
      try {
        const data = JSON.parse(content);
        return Array.isArray(data) ? data : [data];
      } catch (e) {
        return [];
      }
    },
    // 根据 item 对象解析 image 数组，用于 el-image 预览
    getItemImageList(item) {
      if (!item.image) return [];
      try {
        const imgs = item.image;
        if (Array.isArray(imgs)) return imgs;
        return imgs.toString().split(',').filter(u => u);
      } catch (e) {
        return [];
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .search-box {
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 4px;
  }
}

.price-tag {
  font-weight: bold;
  color: #606266;
}

.pay-price-tag {
  font-weight: bold;
  color: #409EFF;
}

.discount-tag {
  font-weight: bold;
  color: #E6A23C;
}

.name-button:hover {
  color: #409EFF;
  text-decoration: underline;
}

.button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 5px;
  min-width: 150px;
}

.button-group .el-button {
  padding: 6px;
  margin: 0 3px;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-group .el-button + .el-button {
  margin-left: 5px;
}

.button-group .el-dropdown {
  margin: 0 3px;
  height: 28px;
  line-height: 28px;
}

.button-group .el-dropdown .el-button {
  margin: 0;
}

.small-padding.fixed-width {
  padding: 8px 0;
}

.expand-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #606266;
  font-size: 14px;
}

.expand-button:hover {
  color: #409EFF;
}

.comment-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.comment-count {
  margin-right: 5px;
  font-weight: bold;
}

.dialog-content {
  min-height: 300px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.order-info {
  font-weight: bold;
  font-size: 14px;
}

.comment-content {
  line-height: 1.6;
  text-align: left;
  padding: 5px 0;
}

.image-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  max-height: 300px;
  overflow-y: auto;
}

.image-preview-popover {
  max-width: 150px;
  max-height: 300px;
}

.empty-comment {
  padding: 40px 0;
  text-align: center;
  color: #909399;
}

.empty-comment i {
  font-size: 40px;
  margin-bottom: 15px;
}

.record-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

.record-box:hover .expand-button {
  color: #409EFF;
}

.record-count {
  margin-right: 5px;
  font-weight: bold;
}

.empty-record {
  padding: 40px 0;
  text-align: center;
  color: #909399;
}

.empty-record i {
  font-size: 40px;
  margin-bottom: 15px;
}

.code-content {
  position: relative;
  background: #f8f9fa;
  border-radius: 4px;
  padding: 8px 12px;

  pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;

    code {
      ::v-deep {
        .keyword {
          color: #d73a49;
          font-weight: bold;
        }

        .string {
          color: #22863a;
        }

        .comment {
          color: #6a737d;
          font-style: italic;
        }
      }
    }
  }

  .copy-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;

    i {
      font-size: 14px;
    }
  }

  &:hover {
    .copy-btn {
      opacity: 1;
    }
  }
}

// 滚动条样式
.code-content pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.code-content pre::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.code-content pre::-webkit-scrollbar-track {
  background: #f8f9fa;
}
</style>
