<template>
  <div class="order-content">
    <div class="order-status" v-if="order!=null">
      <el-steps :active="order.status==3?order.status+1:order.status" align-center>
        <el-step title="待支付"></el-step>
        <el-step title="待发货"></el-step>
        <el-step title="待收货"></el-step>
        <el-step title="交易完成"></el-step>
      </el-steps>
    </div>
    <div>

      <el-card shadow="never" style="margin-top: 15px">
        <div class="operate-container" v-show="order!=null">
        <span style="margin-left: 20px" class="color-danger">订单状态：
           <el-tag prop="status" v-for="(item, index) in statusOptions"
                   v-if="order.status==item.dictValue">{{ item.dictLabel }}</el-tag>
        </span>

          <div class="operate-button-container">
            <el-button size="mini" @click="handleCertificates()" v-hasPermi="['store:storeOrder:uploadCredentials']">
              上传凭证
            </el-button>
            <el-button size="mini" @click="handleEditAddress()" v-if="order.status==0||order.status==1"
                       v-hasPermi="['store:storeOrder:editAddress']">修改收货地址
            </el-button>
            <el-button size="mini" @click="handleBindCustomer()" v-hasPermi="['store:storeOrder:bindCustomer']">
              关联客户
            </el-button>
            <el-button size="mini" @click="editOrder()" v-hasPermi="['store:storeOrder:edit']">修改订单</el-button>
            <!-- <el-button size="mini" @click="handleEditUser()"  v-hasPermi="['users:user:edit']" >修改会员修改</el-button> -->
            <el-button size="mini" v-if="order.customerId!=null&&order.customerId>0" @click="handleCustomer()">
              查看客户详情
            </el-button>
          </div>

          <div class="operate-button-container" v-hasPermi="['store:storeOrder:express']">
            <el-button size="mini" @click="showExpress()">查看物流</el-button>
          </div>
            <div class="operate-button-container">
                <el-button size="mini"  v-if="showRefundButton" @click="handleRefund" v-hasPermi="['store:storePaymentScrm:refund']">退款</el-button>
                <el-button size="mini" v-if="showRedeemButton" @click="handleRedeem" v-hasPermi="['store:storeOrder:redeem']">核销</el-button>
            </div>
        </div>
        <div style="margin: 20px 0px" v-if="order!=null">
        <span class="font-small">
          基本信息
        </span>
        </div>
        <el-descriptions :column="4" border>
          <el-descriptions-item label="订单编号">
                <span v-if="order!=null">
                  {{ order.orderCode }}
                </span>
            <el-tag v-for="(item, index) in createTypeOptions"
                    v-if="order!=null&&order.orderCreateType==item.dictValue">{{ item.dictLabel }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="会员">
                <span v-if="user!=null">
                  {{ user.nickname }}({{ user.phone }})
                </span>
          </el-descriptions-item>
          <!-- <el-descriptions-item label="进线时间"  >
              <span v-if="user!=null">
                {{user.registerDate}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="推线编码"  >
              <span v-if="user!=null">
                {{user.registerCode}}
              </span>
          </el-descriptions-item> -->

          <el-descriptions-item label="收货人">
                <span v-if="order!=null ">
                  {{ order.realName }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">
                <span v-if="order!=null ">
                  {{ order.userPhone }}
                </span>
            <el-button type="text" size="mini" @click="callNumber(0,0,orderId)"
                       v-hasPermi="['store:storeOrder:callNumber']">拨号
            </el-button>
            <el-button type="text" size="mini" @click="handleSms(order.userPhone)"
                       v-hasPermi="['store:storeOrder:sendSms']">短信
            </el-button>
            <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle
                       v-hasPermi="['store:storeOrder:queryPhone']"></el-button>
          </el-descriptions-item>
          <el-descriptions-item label="收货地址">
            <el-popover
              v-if="order!=null"
              placement="top-start"
              title="收货地址"
              width="300"
              trigger="hover"
              :content="order.userAddress">
              <span slot="reference">{{ order.userAddress }}</span>
              <el-button icon="el-icon-search" size="mini" @click="handleAddress()" style="margin-left: 20px;" circle
                         v-hasPermi="['store:storeOrder:queryAddress']"></el-button>
            </el-popover>
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
                <span v-if="order!=null ">
                  <el-tag prop="orderType" v-for="(item, index) in payTypeOptions" v-if="order.payType==item.dictValue">{{
                      item.dictLabel
                    }}</el-tag>
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="订单类型">
                <span v-if="order!=null ">
                  <el-tag prop="orderType" v-for="(item, index) in orderTypeOptions"
                          v-if="order.orderType==item.dictValue">{{ item.dictLabel }}</el-tag>
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="物流公司编号">
                <span v-if="order!=null ">
                  {{ order.deliverySn }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="物流公司名称">
                <span v-if="order!=null ">
                  {{ order.deliveryName }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="快递单号">
                <span v-if="order!=null ">
                  {{ order.deliveryId }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="物流状态">
                <span v-if="order!=null">
                  <el-tag v-for="(item, index) in deliveryStatusOptions"
                          v-if="order.deliveryStatus==item.dictValue"
                          :key="index">{{ item.dictLabel }}</el-tag>
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="物流跟踪状态">
                <span v-if="order!=null">
                  <el-tag v-for="(item, index) in deliveryTypeOptions"
                          v-if="order.deliveryType==item.dictValue"
                          :key="index">{{ item.dictLabel }}</el-tag>
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="档期归属">
            <el-tag prop="scheduleId" v-for="(item, index) in scheduleOptions"
                    v-if="order!=null&&order.scheduleId==item.id">{{ item.name }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户备注">
                <span v-if="order!=null ">
                  {{ order.mark }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="平台备注">
                <span v-if="order!=null ">
                  {{ order.remark }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="销售名称" v-if="order!=null && order.orderType != 0">
                <span >
                  {{ order.companyUserName }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="销售公司" v-if="order!=null && order.orderType != 0">
                <span >
                  {{ order.companyName }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="所属营期" v-if="order!=null && order.orderType == 3">
                <span >
                  {{ order.periodName }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="所属小节" v-if="order!=null && order.orderType == 3">
                <span >
                  {{ order.videoName }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="跟随阶段" v-if="company.companyId == 174">
              <span v-if="order!=null ">
                <el-tag prop="orderVisit" v-for="(item, index) in customerUserStatusOptions"
                        v-if="order.orderVisit==item.dictValue">{{ item.dictLabel }}</el-tag>
              </span>
          </el-descriptions-item>
          <el-descriptions-item v-if="customerInfo!=null " label="客户编码">
                <span>
                  {{ customerInfo.customerCode }}
                </span>
          </el-descriptions-item>
          <el-descriptions-item v-if="customerInfo!=null " label="进线时间">
                <span>
                  {{ customerInfo.registerDate }}
                </span>
          </el-descriptions-item>

            <el-descriptions-item label="财务审核原因" v-if="isRefundOrder">
                <span>{{ financeAuditReasonText }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="财务审核备注" v-if="isRefundOrder">
                <span>{{ financeAuditRemarkText }}</span>
            </el-descriptions-item>

        </el-descriptions>
        <div style="margin: 20px 0px" v-if="order!=null">
        <span class="font-small">
          凭证信息
        </span>
        </div>
        <el-image
          v-if="this.certificates != null"
          :src="certificates"
          :preview-src-list="[certificates]"
          :style="{ width: '100px', height: '100px' }"
          @click.native="showImageDialog"
        ></el-image>
        <el-dialog :visible.sync="dialogVisibleImage" width="10%">
          <img :src="certificates" style="width: 100%" alt="">
        </el-dialog>

        <div style="margin-top: 20px">
          <span class="font-small">商品信息</span>
        </div>
        <el-table
          ref="itemsTable"
          border
          v-if="items!=null"
          :data="items"
          size="small"
          style="width: 100%;margin-top: 20px">
          <el-table-column label="商品图片" width="150" align="center">
            <template slot-scope="scope">
              <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="300" align="center">
            <template slot-scope="scope">
              <p>{{ JSON.parse(scope.row.jsonInfo).productName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="240" align="center">
            <template slot-scope="scope">
              <p>￥{{ JSON.parse(scope.row.jsonInfo).price.toFixed(2) }}</p>
            </template>
          </el-table-column>
          <el-table-column label="规格" width="240" align="center">
            <template slot-scope="scope">
              {{ JSON.parse(scope.row.jsonInfo).sku }}
            </template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="小计" align="center">
            <template slot-scope="scope">
              ￥{{ scope.row.num * JSON.parse(scope.row.jsonInfo).price.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right;margin: 20px" v-if="order!=null">
          合计：<span class="color-danger">￥{{ order.totalPrice.toFixed(2) }}</span>
        </div>

        <div style="margin: 60px 0px 20px 0px">
          <span class="font-small">费用信息</span>
        </div>
        <el-descriptions v-if="zdyInfo !== 'gzzdy'" :column="4" border>
          <el-descriptions-item label="商品合计">
              <span v-if="order!=null">
                ￥{{ order.totalPrice.toFixed(2) }}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="应付金额">
              <span v-if="order!=null">
                ￥{{ order.payPrice.toFixed(2) }}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="运费">
              <span v-if="order!=null">
                ￥{{ order.payPostage.toFixed(2) }}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="优惠券">
              <span v-if="order!=null">
                ￥{{ order.couponPrice.toFixed(2) }}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="积分抵扣">
              <span v-if="order!=null">
                ￥{{ order.deductionPrice.toFixed(2) }}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="实付金额">
              <span v-if="order!=null">
                ￥{{ order.payMoney.toFixed(2) }}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="代收金额">
              <span v-if="order!=null">
                ￥{{ order.payDelivery.toFixed(2) }}
              </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions v-if="zdyInfo === 'gzzdy'" :column="4" border>
          <el-descriptions-item label="商品合计">
            <span v-if="order!=null">
              ￥{{ order.totalPrice.toFixed(2) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="应付金额">
            <span v-if="order!=null">
              ￥{{ order.payPrice.toFixed(2) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="实付金额">
            <span v-if="order!=null">
              ￥{{ order.payMoney.toFixed(2) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="代收金额">
            <span v-if="order!=null">
              ￥{{ order.payDelivery.toFixed(2) }}
            </span>
            <el-button
              size="mini"
              type="primary"
              plain
              class="edit-quantity-btn"
              @click="editPayDeliveryHandle()"
              v-hasPermi="['store:storeOrder:editPayDelivery']">
              修改
            </el-button>
          </el-descriptions-item>
          <el-descriptions-item label="优惠券">
            <span v-if="order!=null">
              ￥{{ order.couponPrice.toFixed(2) }}
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">支付信息</span>
        </div>
        <el-table
          border
          :data="payments"
          size="small"
          style="width: 100%;margin-top: 20px">
          <el-table-column label="支付单号" align="center" prop="payCode" width="120px"/>
          <el-table-column label="支付金额" align="center" prop="payMoney"/>
          <el-table-column label="类型" align="center" prop="payTypeCode"/>
          <el-table-column label="交易单号" align="center" prop="bankTransactionId"/>
          <el-table-column label="银行单号" align="center" prop="bankSerialNo"/>
          <el-table-column label="创建时间" align="center" prop="createTime"/>
          <el-table-column label="支付时间" align="center" prop="payTime"/>
        </el-table>

        <div style="margin-top: 20px">
          <span class="font-small">操作信息</span>
        </div>
        <el-table style="margin-top: 20px;width: 100%"
                  ref="orderHistoryTable"
                  :data="logs" border>
          <el-table-column label="操作时间" width="160" align="center">
            <template slot-scope="scope">
              {{ scope.row.changeTime }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{ scope.row.changeMessage }}
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
          <span class="font-small">审批信息</span>
        </div>
        <el-table style="margin-top: 20px;width: 100%"
                  :data="auditLogs" border>
          <el-table-column label="操作时间" width="160" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{ scope.row.content }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog :title="edit.title" :visible.sync="edit.open" width="600px" append-to-body>
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
        <el-form-item label="订单类型" prop="orderType">
          <el-select style="width: 200px" v-model="editForm.orderType" placeholder="请选择订单类型" clearable
                     size="small">
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="档期归属" prop="scheduleId">
          <el-select filterable style="width: 200px" v-model="editForm.scheduleId" placeholder="请选择档期" clearable
                     size="small">
            <el-option
              v-for="item in scheduleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="跟随阶段" prop="orderVisit" v-if="company.companyId == 174">
          <el-select filterable style="width: 200px" v-model="editForm.orderVisit" placeholder="请选择跟随阶段"
                     clearable size="small">
            <el-option
              v-for="item in customerUserStatusOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model="editForm.mark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="editUser.title" :visible.sync="editUser.open" width="600px" append-to-body>
      <el-form ref="editUserForm" :model="editUserForm" :rules="editUserRules" label-width="100px">
        <el-form-item label="进线时间" prop="registerDate">
          <el-date-picker clearable size="small"
                          v-model="editUserForm.registerDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择进线时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="推线编码" prop="registerCode">
          <el-input v-model="editUserForm.registerCode" placeholder="请输入推线编码"/>
        </el-form-item>
        <el-form-item label="渠道来源" prop="source">
          <el-input v-model="editUserForm.source" placeholder="请输入渠道来源"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditUserForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="editAddress.title" :visible.sync="editAddress.open" width="600px" append-to-body>
      <el-form ref="editAddressForm" :model="editAddressForm" :rules="editAddressRules" label-width="100px">
        <el-form-item label="收件人" prop="realName">
          <el-input v-model="editAddressForm.realName" placeholder="请输入收件人"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="source">
          <el-input v-model="editAddressForm.userPhone" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="收货地址" prop="district">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-select @change="provinceChange" v-model="editAddressForm.provinceId" placeholder="请选择">
                <el-option
                  v-for="item in province"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select @change="cityChange" v-model="editAddressForm.cityId" placeholder="请选择">
                <el-option
                  v-for="item in city"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select @change="districtChange" v-model="editAddressForm.districtId" placeholder="请选择">
                <el-option
                  v-for="item in district"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="详细地址" prop="detail">
          <el-input v-model="editAddressForm.detail" placeholder="请输入收货人详细地址"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditAddressForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
      <el-table style="margin-top: 20px;width: 100%"
                ref="orderHistoryTable"
                :data="traces" border>
        <el-table-column label="操作时间" width="160" align="center">
          <template slot-scope="scope">
            {{ scope.row.AcceptTime }}
          </template>
        </el-table-column>
        <el-table-column label="位置" align="center">
          <template slot-scope="scope">
            {{ scope.row.Location }}
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center">
          <template slot-scope="scope">
            {{ scope.row.AcceptStation }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :title="bindCustomerDialog.title" :visible.sync="bindCustomerDialog.open" width="800px" append-to-body>
      <el-form ref="bindCustomerForm" :model="bindCustomerForm" :rules="bindCustomerRules" label-width="100px">
        <el-form-item label="客户查询">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-input v-model="bindCustomerForm.mobile" placeholder="请输入客户手机号"/>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" @click="searchCustomer">查看</el-button>
            </el-col>
          </el-row>

        </el-form-item>
        <el-form-item label="客户选择" prop="customerIds">
          <el-table @selection-change="handleSelectionChange"
                    :data="customers" border>
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="ID" align="center" prop="customerId"/>
            <el-table-column label="客户编号" width="160" align="center">
              <template slot-scope="scope">
                {{ scope.row.customerCode }}
              </template>
            </el-table-column>
            <el-table-column label="客户名称" width="160" align="center">
              <template slot-scope="scope">
                {{ scope.row.customerName }}
              </template>
            </el-table-column>
            <el-table-column label="客户手机号" width="160" align="center">
              <template slot-scope="scope">
                {{ scope.row.mobile }}
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBindCustomerForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="certificateDialig.title" :visible.sync="certificateDialig.open" append-to-body>
      <el-form ref="certificateForm" :model="certificateForm" :rules="certificateRules" label-width="100px">
        <el-form-item label="凭证" prop="certificates">
          <ImageUpload v-model="photoArr" type="image" :num="10" :width="150" :height="150"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :append-to-body="true"
      size="75%"
      :title="customer.title" :visible.sync="customer.open"
    >
      <customer-details ref="customerDetails"/>
    </el-drawer>
    <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
      <add-sms ref="sms" @close="closeSms()"></add-sms>
    </el-dialog>
    <!--  修改代收金额  -->
    <el-dialog :title="editPayDelivery.title" :visible.sync="editPayDelivery.open" width="500px" append-to-body>
      <el-form ref="payDeliveryForm" :model="payDeliveryForm" :rules="payDeliveryRules" label-width="150px">
        <el-form-item label="代收金额（元）" prop="payDelivery">
          <el-input-number
            v-model="payDeliveryForm.payDelivery"
            :min="0.00"
            :precision="2"
            :step="0.01"
            size="small"
            style="width: 150px"
          >
          </el-input-number>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editPayDelivery.open = false">取 消</el-button>
        <el-button type="primary" @click="submitPayDeliveryForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getExpress,
  getStoreOrder,
  getStoreOrderAddress,
  updateStoreOrder,
  bindCustomer,
  uploadCredentials,
  getUserPhone,
  editPayDelivery,
  refundStorePayment,
  redeemStoreOrder
} from "@/api/hisStore/storeOrder";
import {updateUser, getUser} from "@/api/users/user";
import {getTcmScheduleList} from "@/api/company/tcmScheduleReport";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Editor from '@/components/Editor/wang';
import singleImg from '@/components/Material/single'
import {getCustomerListBySearch} from "@/api/crm/customer";
import ImageUpload from '@/components/ImageUpload'
import Material from '@/components/Material'
import {getCitys} from "@/api/hisStore/city";
import customerDetails from '@/views/crm/components/customerDetails.vue';
import addSms from '@/views/crm/components/addSms.vue';

export default {
  name: "productOrderPick",
  components: {customerDetails, ImageUpload, Material, addSms, Treeselect, Editor, singleImg},
  data() {
    return {
      zdyInfo: process.env.VUE_APP_FS_USER_INFO,
      customerUserStatusOptions: [],
      scheduleOptions: [],
      dialogVisibleImage: false,
      customerInfo: null,
      customer: {
        title: "客户详情",
        open: false,
      },
      photoArr: null,
      certificateDialig: {
        title: "上传凭证",
        open: false,
      },
      certificateForm: {
        orderCode: null,
        certificates: null,
      },
      addSms: {
        open: false,
        title: "发短信"
      },
      certificateRules: {
        certificates: [
          {required: true, message: "凭证不能为空", trigger: "change"}
        ]
      },
      customers: [],
      bindCustomerDialog: {
        title: "关联客户",
        open: false,
      },
      bindCustomerForm: {
        mobile: null,
        customerIds: null,
      },
      bindCustomerRules: {
        customerIds: [
          {required: true, message: "客户不能为空", trigger: "change"}
        ],

      },
      orderId: null,
      expressDialog: {
        title: "物流信息",
        open: false,
      },
      citys: [],
      province: [],
      city: [],
      district: [],
      editAddress: {
        title: "修改收货地址",
        open: false,
      },
      editAddressForm: {
        districtId: null,

      },
      editAddressRules: {},
      editUser: {
        title: "修改会员信息",
        open: false,
      },
      editUserForm: {
        registerDate: null,
        registerCode: "",
        source: "",
      },
      editUserRules: {},
      edit: {
        title: "",
        open: false,
      },
      editForm: {
        orderType: null,
        scheduleId: null,
        orderVisit: null,
        mark: "",
      },
      editRules: {},
      createTypeOptions: [],
      deliveryStatusOptions: [],
      deliveryTypeOptions: [],
      orderTypeOptions: [],
      payTypeOptions: [],
      statusOptions: [],
      certificates: null,
      order: null,
      user: {},
      logs: [],
      items: [],
      express: [],
      traces: [],
      payments: [],
      auditLogs: [],
      // 修改代收金额相关参数
      editPayDelivery: {
        title: "修改代收金额",
        open: false,
      },
      payDeliveryForm: {
        id: null,
        payDelivery: 0.00
      },
      payDeliveryRules: {
        payDelivery: [
          {required: true, message: "代收金额不能为空", trigger: "blur"},
        ]
      },
      afterSales: {
        auditReasonName: null,
        auditRemark: null,
        reasonValue1: null,
        reasonValue2: null
      }
    };
  },
  created() {
    this.getDicts("store_order_delivery_status").then((response) => {
      this.deliveryStatusOptions = response.data;
    });
    this.getDicts("store_order_delivery_type").then((response) => {
      this.deliveryTypeOptions = response.data;
    });
    this.getDicts("crm_customer_user_status").then((response) => {
      this.customerUserStatusOptions = response.data;
    });
    this.getDicts("store_order_type").then((response) => {
      this.orderTypeOptions = response.data;
    });
    this.getDicts("store_order_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("store_pay_type").then((response) => {
      this.payTypeOptions = response.data;
    });
    this.getDicts("store_order_create_type").then((response) => {
      this.createTypeOptions = response.data;
    });
    getTcmScheduleList().then(response => {
      this.scheduleOptions = response.data;
    });

  },
  computed: {
    company() {
      return this.$store.state.user.user;
    },
    /** 退款中 / 已退款 */
    isRefundOrder() {
      if (!this.order) return false;
      const s = Number(this.order.status);
      return s === -1 || s === -2;
    },
    /** 财务审核原因：售后一级 + 二级，兼容旧数据 auditReasonName */
    financeAuditReasonText() {
      const a = this.afterSales;
      if (!a) return '—';
      const parts = [a.reasonValue1, a.reasonValue2].filter(
        x => x != null && String(x).trim() !== ''
      );
      if (parts.length > 0) return parts.join(' / ');
      if (a.auditReasonName) return a.auditReasonName;
      return '—';
    },
    financeAuditRemarkText() {
      const a = this.afterSales;
      if (!a || a.auditRemark == null || String(a.auditRemark).trim() === '') return '—';
      return a.auditRemark;
    },
    /** 已支付且存在支付记录时显示退款 */
    showRefundButton() {
      if (!this.order) return false;
      const status = String(this.order.status);
      if (status === '0') return false;
      if (status === '-1' || status === '-2') return false;
      if (this.order.payMoney == null || Number(this.order.payMoney) <= 0) return false;
      const payment = this.getLatestPayment();
      return !!(payment && payment.paymentId);
    },
    /** 订单状态>0且待核销时显示核销按钮 */
    showRedeemButton() {
      if (!this.order) return false;
      if (Number(this.order.status) <= 0) return false;
      const redeemedStatus = this.order.redeemedStatus ?? this.order.redeemed_status;
      return String(redeemedStatus) === '1';
    }

  },
  methods: {
    // 防抖函数
    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },

    // 节流函数
    throttle(func, limit) {
      let inThrottle;
      return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
          func.apply(context, args);
          inThrottle = true;
          setTimeout(() => inThrottle = false, limit);
        }
      }
    },

    closeSms() {
      this.addSms.open = false;
    },
    handleSms(mobile) {
      this.addSms.open = true;
      var that = this;
      setTimeout(() => {
        that.$refs.sms.getOrderId(this.orderId, mobile, 2);
      }, 500);

    },
    handlePhone() {
      const id = this.order.id;
      getUserPhone(id).then(response => {
        this.order.userPhone = response.userPhone;
      })
    },
    handleAddress() {
      const id = this.order.id;
      getStoreOrderAddress(id).then(response => {
        this.order.userAddress = response.address;
      })
    },
    showImageDialog() {
      this.dialogVisible = true;
    },
    handleCustomer() {
      var that = this;
      this.customer.open = true;
      setTimeout(() => {
        that.$refs.customerDetails.getDetails(this.order.customerId);
      }, 200);
    },
    handleSelectionChange(selection) {
      this.bindCustomerForm.customerIds = selection.map(item => item.customerId)
    },
    searchCustomer() {
      if (this.bindCustomerForm.mobile == null || this.bindCustomerForm.mobile == "") {
        this.msgError("请输入手机号");
        return;
      }
      var data = {mobile: this.bindCustomerForm.mobile};
      getCustomerListBySearch(data).then(response => {
        this.customers = response.data;
      });
    },
    handleBindCustomer() {
      this.customers = [];
      this.bindCustomerDialog.open = true;
      this.bindCustomerForm.mobile = null;
      this.bindCustomerForm.orderId = this.orderId;
      this.bindCustomerForm.customerIds = null;
    },
    /** 提交按钮 */
    submitBindCustomerForm() {
      this.$refs["bindCustomerForm"].validate(valid => {
        if (valid) {
          bindCustomer(this.bindCustomerForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.bindCustomerDialog.open = false;
            }
          });
        }
      });
    },
    handleCertificates() {
      this.certificateDialig.open = true;
      this.photoArr = null;
    },
    handleConfirm() {
      this.certificateForm.id = this.orderId;
      this.certificateForm.orderCode = this.order.orderCode;
      this.certificateForm.certificates = this.photoArr;
      uploadCredentials(this.certificateForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("上传成功");
          this.certificateDialig.open = false;
          this.getOrder(this.order.id);
        }
      });
    },
    showExpress() {
      this.expressDialog.open = true;
      this.traces = [];
      getExpress(this.orderId).then(response => {
        this.express = response.data;
        if (this.express != null && this.express.Traces != null) {
          this.traces = this.express.Traces
        }

      });

    },
    getLatestPayment() {
      if (!this.payments || this.payments.length === 0) {
        return null;
      }
      if (this.payments.length === 1) {
        return this.payments[0];
      }
      const sorted = [...this.payments].sort((a, b) => {
        const timeA = new Date(a.payTime || a.createTime || 0).getTime();
        const timeB = new Date(b.payTime || b.createTime || 0).getTime();
        return timeB - timeA;
      });
      return sorted[0];
    },
    handleRefund() {
      const payment = this.getLatestPayment();
      if (!payment || !payment.paymentId) {
        this.msgError('未找到支付记录');
        return;
      }
      const refundMoney = this.order.payMoney;
      this.$confirm(`确认对该订单退款吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        refundStorePayment({
          paymentId: payment.paymentId,
          refundMoney: refundMoney
        }).then(response => {
          if (response.code === 200) {
            this.msgSuccess('退款成功');
            this.getOrder(this.order.id);
          }
        });
      }).catch(() => {});
    },
    handleRedeem() {
      if (!this.order || !this.order.id) {
        this.msgError('订单信息异常');
        return;
      }
      this.$confirm('是否确认核销该订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        redeemStoreOrder({
          orderId: this.order.id
        }).then(response => {
          if (response.code === 200) {
            this.msgSuccess('核销成功');
            this.getOrder(this.order.id);
          }
        });
      }).catch(() => {});
    },
    districtChange(val) {
      var item = this.district.find((item) => {
        return item.value == val;
      })

      this.editAddressForm.district = item.label;

    },
    cityChange(val) {
      // this.district=this.citys.filter(item => item.value===val )
      this.editAddressForm.districtId = null;
      var item = this.city.find((item) => {
        return item.value == val;
      })
      this.district = item.children;
      this.editAddressForm.city = item.label;


    },
    provinceChange(val) {
      // this.city=this.citys.filter(item => item.value===val )
      this.district = [];
      this.editAddressForm.cityId = null;
      this.editAddressForm.districtId = null;
      var item = this.citys.find((item) => {
        return item.value == val;
      })
      this.city = item.children;
      this.editAddressForm.province = item.label;
    },
    async getCityList() {
      try {
        const res = await getCitys();
        this.citys = res.data;
        this.province = res.data.filter(item => item.pid === 0);
        // 可选：返回数据以便链式调用
        return res.data;
      } catch (error) {
        console.error('获取城市列表失败:', error);
      }
    },
    async handleEditAddress() {
      // 等待城市数据加载完成
      await this.getCityList();

      // 初始化表单数据
      this.editAddressForm.id = this.order.id;
      this.editAddressForm.realName = this.order.realName;
      this.editAddressForm.userPhone = this.order.userPhone;

      // 初始化表单中的地址字段
      this.editAddressForm.provinceId = '';
      this.editAddressForm.cityId = '';
      this.editAddressForm.districtId = '';
      this.editAddressForm.detail = '';

      // 初始化级联数据
      this.city = [];
      this.district = [];

      // 检查是否有地址数据
      if (!this.order?.userAddress) {
        this.editAddress.open = true;
        return;
      }

      // 分割地址
      const addressParts = this.order.userAddress.trim().split(/\s+/);

      // 如果地址格式不正确，将整个地址作为详情
      if (addressParts.length < 4) {
        this.editAddressForm.detail = this.order.userAddress;
        this.editAddress.open = true;
        return;
      }

      // 解析省份
      const provinceName = addressParts[0];
      const province = this.citys?.find(item => item.label === provinceName);

      if (province) {
        this.editAddressForm.provinceId = province.value;

        // 获取城市列表
        if (Array.isArray(province.children)) {
          this.city = province.children.filter(item => item.pid === province.value);

          // 解析城市
          const cityName = addressParts[1];
          const city = this.city.find(item => item.label === cityName);

          if (city) {
            this.editAddressForm.cityId = city.value;

            // 获取区县列表
            if (Array.isArray(city.children)) {
              this.district = city.children.filter(item => item.pid === city.value);

              // 解析区县
              const districtName = addressParts[2];
              const district = this.district.find(item => item.label === districtName);

              if (district) {
                this.editAddressForm.districtId = district.value;
              }
            }
          }
        }
      }

      // 详细地址是剩余部分
      this.editAddressForm.detail = addressParts.slice(3).join(' ');

      // 打开编辑对话框
      this.editAddress.open = true;
    },
    /** 提交按钮 */
    submitEditAddressForm() {
      this.$refs["editAddressForm"].validate(valid => {
        if (valid) {
          this.editAddressForm.userAddress = this.editAddressForm.province + " " + this.editAddressForm.city + " " + this.editAddressForm.district + " " + this.editAddressForm.detail;
          updateStoreOrder(this.editAddressForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.editAddress.open = false;
              this.getOrder(this.order.id);
            }
          });
        }
      });
    },
    handleEditUser() {
      const userId = this.order.userId
      getUser(userId).then(response => {
        this.editUserForm.userId = response.data.userId;
        this.editUserForm.registerDate = response.data.registerDate;
        this.editUserForm.registerCode = response.data.registerCode;
        this.editUserForm.source = response.data.source;
        this.editUser.open = true;
      });
    },
    /** 提交按钮 */
    submitEditUserForm() {
      this.$refs["editUserForm"].validate(valid => {
        if (valid) {
          updateUser(this.editUserForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.editUser.open = false;
              this.getOrder(this.order.id);
            }
          });
        }
      });
    },
    submitEditForm() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          updateStoreOrder(this.editForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess("操作成功");
              this.edit.open = false;
              this.getOrder(this.order.id);
            }
          });

        }
      });
    },
    editOrder() {
      this.edit.open = true;
      this.editForm.mark = this.order.mark
      this.editForm.id = this.order.id;
      if (this.order.orderType != null) {
        this.editForm.orderType = this.order.orderType.toString();
      }
      this.editForm.scheduleId = this.order.scheduleId;
      this.editForm.orderVisit = this.order.orderVisit;

    },
    getOrder(orderId) {
      this.orderId = orderId;
      this.certificates = null;
      getStoreOrder(orderId).then(response => {
        this.order = response.order;
        if (response.order.certificates != null) {
          this.certificates = response.order.certificates;
        }
        this.user = response.user;
        this.logs = response.logs;
        this.items = response.items;
        this.payments = response.payments;
        this.customerInfo = response.customer;
        this.auditLogs = response.auditLogs;
        this.afterSales = response.afterSales || {
          auditReasonName: null,
          auditRemark: null,
          reasonValue1: null,
          reasonValue2: null
        };
      });
    },
    editPayDeliveryHandle() {
      this.payDeliveryForm.id = this.orderId;
      this.payDeliveryForm.payDelivery = this.order.payDelivery || 0.00;
      this.editPayDelivery.open = true;
    },
    // 提交修改代收金额
    submitPayDeliveryForm() {
      this.$refs["payDeliveryForm"].validate(valid => {
        if (valid) {
          editPayDelivery(this.payDeliveryForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.editPayDelivery.open = false;
              this.getOrder(this.order.id);
            } else {
              this.msgError(response.message);
            }
          }).catch(error => {
            this.$message.error('请求失败: ' + error.message)
          });
        }
      });
    },

  }
};
</script>
<style scoped>
.order-content {
  margin: 10px;
}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.edit-quantity-btn {
  margin-left: 4px; /* 缩小左边距 */
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #409eff;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-quantity-btn:hover {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
  color: #66b1ff;
  transform: translateY(-1px);
}

.edit-quantity-btn i {
  margin-right: 2px;
  font-size: 12px;
}

.edit-quantity-btn:hover {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
  color: #66b1ff;
  transform: translateY(-1px);
}

.edit-quantity-btn i {
  margin-right: 2px;
  font-size: 12px;
}

.dialog-product-name {
  font-weight: 500;
  color: #303133;
  word-break: break-all;
  max-width: 350px;
  display: inline-block;
  vertical-align: middle;
}

.more-products-btn:hover {
  background: linear-gradient(135deg, #66b1ff, #409eff);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

.more-products-btn i {
  margin-right: 4px;
}

/* 历史订单商品信息样式 */
.order-code-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.order-code-text {
  font-weight: 500;
  color: #606266;
  font-family: 'Monaco', 'Consolas', monospace;
}

.time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #606266;
}

.amount-cell, .deposit-cell {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.amount-symbol, .deposit-symbol {
  color: #606266;
  font-weight: 600;
  font-size: 12px;
}

.amount-value, .deposit-value {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}

.status-cell {
  display: flex;
  justify-content: center;
}

.product-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
}

.product-name {
  font-weight: 500;
  color: #303133;
  text-align: center;
  word-break: break-all;
  max-width: 100%;
}

.product-count {
  font-size: 12px;
  color: #606266;
  background-color: #f5f7fa;
  padding: 2px 8px;
  border-radius: 12px;
}

.no-product {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 12px;
}

.action-buttons {
  margin-top: 8px;
}

.detail-btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* 统一表格样式 */
.unified-table ::v-deep .el-table__header th {
  background: #f8f9fa !important;
  color: #303133 !important;
  font-weight: 600 !important;
}

.unified-table ::v-deep .el-table__body td {
  color: #606266 !important;
}

/* 统一单元格样式 */
.unified-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
}

.order-code-cell {
  font-family: 'Monaco', 'Consolas', monospace;
}

.order-code-text {
  font-weight: 500;
  color: #606266;
}

.time-cell {
  color: #606266;
}

.amount-cell, .deposit-cell {
  gap: 2px;
}

.amount-symbol, .deposit-symbol {
  color: #606266;
  font-weight: 600;
  font-size: 12px;
}

.amount-value, .deposit-value {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}

.sales-cell {
  gap: 4px;
}

.sales-cell i {
  color: #409eff;
}

.sales-name {
  color: #606266;
  font-size: 13px;
}

.status-cell {
  justify-content: center;
}

/* 商品预览样式 */
.product-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  max-width: 300px;
}

.product-preview:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  border-color: #409eff;
}

.unified-product-name {
  font-weight: 500;
  color: #409eff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.product-count {
  font-size: 12px;
  color: #909399;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 10px;
}

.product-name {
  font-weight: 500;
  color: #409eff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-product {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  color: #909399;
  font-style: italic;
}

.no-product i {
  font-size: 16px;
}

/* 操作按钮样式 */
.action-buttons {
  margin-top: 8px;
}

.unified-btn {
  background: linear-gradient(135deg, #409eff, #337ab7);
  border: none;
  color: white;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.unified-btn:hover {
  background: linear-gradient(135deg, #66b1ff, #409eff);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

.unified-btn i {
  margin-right: 4px;
}

/* 统一商品详情弹窗样式 */
.unified-detail-dialog ::v-deep .el-dialog__header {
  background: white;
  color: #303133;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.unified-detail-dialog ::v-deep .el-dialog__title {
  color: #303133;
  font-weight: 600;
  font-size: 18px;
}

/* 自定义弹窗标题样式 */
.dialog-custom-title {
  .font-small {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }
}

.unified-detail-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #909399;
}

.unified-detail-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close:hover {
  color: #409eff;
}

.compact-dialog-table ::v-deep .el-table__header th {
  background: #f8f9fa !important;
  color: #303133 !important;
  font-weight: 600 !important;
  padding: 6px 0 !important;
}

.compact-dialog-table ::v-deep .el-table__body td {
  padding: 4px 0 !important;
}

.dialog-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-product-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.dialog-product-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
  border-radius: 6px;
}

.dialog-product-info {
  padding: 8px;
}

.product-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.dialog-product-name {
  font-weight: 500;
  color: #409eff;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: block;
  width: 100%;
}

.dialog-price-cell, .dialog-sku-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.dialog-pagination {
  margin-top: 3px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.dialog-pagination ::v-deep .el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

dialog-pagination ::v-deep .el-pagination button,
dialog-pagination ::v-deep .el-pagination .el-pager li {
  min-width: 24px;
  height: 24px;
  line-height: 24px;
}

/* 表格内容区域右下角容器 */
.table-bottom-right-container {
  position: relative;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* 包装分页组件的容器 */
.dialog-pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 分页组件样式 */
.dialog-pagination {
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.dialog-pagination ::v-deep .el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background: transparent;
  padding: 0;
  border: none;
}

.dialog-pagination ::v-deep .el-pagination button,
.dialog-pagination ::v-deep .el-pagination .el-pager li {
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  background: white;
  border: 1px solid #dcdfe6;
}

/* 关闭按钮区域样式 */
.dialog-close-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 透明关闭按钮样式 */
.transparent-close-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

.transparent-close-btn:hover {
  background: linear-gradient(135deg, #ff5252, #e53935);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.transparent-close-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.transparent-close-btn i {
  margin-right: 6px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.transparent-close-btn:hover i {
  transform: rotate(90deg);
}

.compact-close-btn i {
  font-size: 14px;
}

/* 商品详情弹窗样式 */
.product-detail-dialog .el-dialog__header {
  background: linear-gradient(135deg, #409eff, #337ab7);
  color: white;
  padding: 20px;
}

.product-detail-dialog .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.product-detail-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.product-detail-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  color: #ffd04b;
}

/* 商品信息展示样式 */
.product-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
}

.product-name {
  font-weight: 500;
  color: #303133;
  text-align: center;
  word-break: break-all;
  max-width: 100%;
}

.product-count {
  font-size: 12px;
  color: #606266;
  background-color: #f5f7fa;
  padding: 2px 8px;
  border-radius: 12px;
}

.no-product {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-size: 12px;
}

.action-buttons {
  margin-top: 8px;
}

.detail-btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* 统一对齐样式 */
.text-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  height: 100%;
}

.text-content {
  font-size: 13px;
  color: #606266;
  text-align: center;
  word-break: break-all;
}

.currency-symbol {
  color: #606266;
  font-weight: 600;
  font-size: 12px;
}

.number-content {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}

.tag-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 8px 4px;
}

.time-icon {
  color: #606266;
  font-size: 14px;
}

</style>
