<template>
    <div class="app-container">
        <!-- 搜索区域 -->
        <el-card class="search-wrapper" shadow="never">
            <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="100px">
                <el-form-item label-width="120px" prop="orgIndex" label="门店" v-if="userInfoVO.userType == '00'">
                    <el-select v-model="queryParams.orgIndex" filterable placeholder="请选择门店" clearable style="width: 240px">
                        <template>
                            <el-option v-for="store in storeList" :key="store.id + store.sourceType" :label="store.name" :value="store.id + ',' + store.sourceType"> </el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态" prop="orderStatus">
                    <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable style="width: 180px">
                        <el-option key="5" label="待入厂" value="5" />
                        <el-option key="6" label="清洗中" value="6" />
                        <el-option key="7" label="已出厂" value="7" />
                        <el-option key="8" label="已到店" value="8" />
                        <!-- <el-option key="9" label="待送衣" value="9" />
                        <el-option key="10" label="送衣中" value="10" /> -->
                        <el-option key="12" label="已完成" value="12" />
                        <el-option key="15" label="已退款" value="15" />
                        <el-option key="-1" label="已取消" value="-1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式" prop="payType">
                    <el-select v-model="queryParams.payType" placeholder="请选择支付方式" clearable style="width: 180px">
                        <el-option key="0" label="微信" value="0" />
                        <el-option key="1" label="支付宝" value="1" />
                        <el-option key="2" label="现金" value="2" />
                        <el-option key="3" label="会员余额" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="支付状态" prop="payStatus">
                    <el-select v-model="queryParams.payStatus" placeholder="请选择支付状态" clearable style="width: 180px">
                        <el-option v-for="(item, i) in dict.type.pay_status" :key="i" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单编号" prop="orderNo">
                    <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable style="width: 200px" @keyup.enter.native="handleQuery">
                        <i slot="prefix" class="el-input__icon el-icon-document"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker v-model="createTimeRange" 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="会员手机" prop="appUserPhoneNumber">
                    <el-input v-model="queryParams.appUserPhoneNumber" placeholder="请输入会员手机" clearable style="width: 180px" @keyup.enter.native="handleQuery">
                        <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['order:cloth:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 列表区域 -->
      <Page uri="/mapi/order/cloth/list" :request-params="queryParams" ref="pagination">
        <el-table-column label="订单编号" align="center" width="110">
          <template slot-scope="scope">
            {{ scope.row.orderNo  }}
          </template>
        </el-table-column>
        <el-table-column label="衣服数量" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.orderClothCount }}件
          </template>
        </el-table-column>
        <el-table-column label="门店信息" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.sysOrg.name }}
          </template>
        </el-table-column>
        <el-table-column label="客户姓名" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.appUserName || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.appUserPhoneNumber }}
          </template>
        </el-table-column>
        <el-table-column label="支付方式" align="center" width="90">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.payStatus == 0">未付款</el-tag>
            <dict-tag v-else :options="dict.type.recharge_pay_type" :value="scope.row.payType" />
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" width="80">
          <template slot-scope="scope">
            <span class="value">{{ scope.row.orderAmount ? '¥' + scope.row.orderAmount  : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付金额" align="center" width="80">
          <template slot-scope="scope">
            <span class="value">{{ scope.row.payAmount ? '¥' + scope.row.payAmount  : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收款类型" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.payTimeType === '0' ? '收衣付款' : '取衣付款' }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" width="100">
          <template slot-scope="scope">
            <div class="status-group">
              <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.orderStatus" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="支付状态" align="center" width="100">
          <template slot-scope="scope">
            <div class="status-group">
              <dict-tag :options="dict.type.pay_status" :value="scope.row.payStatus" />
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="退款状态" align="center" width="100">
          <template slot-scope="scope">
            <div class="status-group">
              <dict-tag :options="dict.type.goods_order_refund_status" :value="scope.row.refundStatus" />
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="支付时间" align="center" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.payStatus == 0">--</span>
            <span v-else>{{ scope.row.payTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-s-order" size="mini" @click="handleDetail(scope.row)"> 订单详情 </el-button>
            <el-button type="text" icon="el-icon-printer" size="mini" @click="btn_lodop(scope.row)" v-if="userInfoVO.userType != '00' && scope.row.orderAmount"> 打印订单 </el-button>
            <el-button type="text" icon="el-icon-close" size="mini" @click="handleClose(scope.row)" v-if="scope.row.refundStatus == '0' && (scope.row.orderStatus == '0' || scope.row.orderStatus == '1' || scope.row.orderStatus == '2'  || scope.row.orderStatus == '5' )"> 撤销 </el-button>
          </template>
        </el-table-column>
      </Page>

        <!-- 添加或修改洗衣订单衣服明细对话框 -->
        <el-dialog :title="title" :visible.sync="open" size="70%" append-to-body>
            <el-row :gutter="15" style="margin-bottom: 80px; margin-left: 20px; width: calc(100% - 20px)">
                <el-col :span="24">
                    <el-descriptions class="margin-top" :column="2" border>
                        <el-descriptions-item>
                            <template slot="label"> 订单号 </template>
                            {{ orderDetail.orderNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 支付方式 </template>
                            <span v-if="orderDetail.payTimeType === '1' && orderDetail.payStatus == 0">取衣付款</span>
                            <span v-else>
                                <template v-if="orderDetail.payType == '0'">微信 （{{ orderDetail.payAmount }}元）</template>
                                <template v-if="orderDetail.payType == '1'">支付宝（{{ orderDetail.payAmount }}元）</template>
                                <template v-if="orderDetail.payType == '2'">现金（{{ orderDetail.payAmount }}元）</template>
                                <template v-if="orderDetail.payType == '3'">余额（{{ orderDetail.payAmount }}元）</template>
                                <template v-if="orderDetail.payType == '8'">组合
                                   (
                                     <span v-if="orderDetail.memberPayAmount">会员：{{orderDetail.memberPayAmount}}</span>
                                     <span v-if="orderDetail.balancePayAmount"> 余额：{{orderDetail.balancePayAmount}}</span>
                                     <span v-if="orderDetail.wechatPayAmount"> 微信：{{orderDetail.wechatPayAmount}}</span>
                                     <span v-if="orderDetail.alipayPayAmount"> 支付宝：{{orderDetail.alipayPayAmount}}</span>
                                     <span v-if="orderDetail.cashPayAmount"> 现金：{{orderDetail.cashPayAmount}}</span>
                                   )
                                </template>
                            </span>

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 姓名 </template>
                            {{ orderDetail.appUserInfoVO? orderDetail.appUserInfoVO.contactName : '' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 电话 </template>
                            {{ orderDetail.appUserInfoVO? orderDetail.appUserInfoVO.contactPhone : '' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 总金额（元） </template>
                            {{ orderDetail.orderClothPrice }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 时间 </template>
                            {{ orderDetail.createTime }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" v-if="userInfoVO.userType == '00'">
                            <template slot="label"> 门店名称 </template>
                            {{ orderDetail.storeName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label"> 订单备注 </template>
                            {{ orderDetail.remark }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="24" style="margin-top: 10px">
                    <el-table :data="orderClothDetails" fit highlight-current-row border stripe>
                        <el-table-column label="衣物条码" align="center" prop="washCode" width="130" fixed="left" />
                        <el-table-column label="衣服名称" align="center" prop="clothItemName" width="150">
                            <template slot-scope="scope">
                                <span> {{ calculateClothName(scope.row) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣物照片" align="center" width="120">
                            <template slot-scope="scope">
                                <div class="cloth-photos" v-if="scope.row.pics">
                                    <el-image
                                        v-for="(pic, index) in scope.row.pics.split(',')"
                                        :key="index"
                                        :src="pic"
                                        :preview-src-list="scope.row.pics.split(',')"
                                        fit="cover"
                                        class="cloth-photo"
                                        @click="handlePreview(scope.row.pics.split(','))"
                                    >
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                                <span v-else>暂无照片</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="颜色" align="center" width="100">
                            <template slot-scope="scope">
                                <span v-for="(item, index) in scope.row.orderClothColors">
                                    {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" align="center" prop="flowStatus" width="100">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.order_cloth_flow_status" :value="scope.row.flowStatus" />
                            </template>
                        </el-table-column>
                        <el-table-column label="重洗" align="center" prop="repeatCount" width="100">
                            <template slot-scope="scope">
                                <span>{{ scope.row.repeatCount || 0 }}次</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="附件" align="center" width="150">
                            <template slot-scope="scope">
                                <el-tag size="small" v-for="item in scope.row.orderClothAdjuncts" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">
                                    {{ item.adjunctName + '*' + item.num }}
                                </el-tag>
                                <el-tag v-if="!scope.row.orderClothAdjuncts">暂无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="瑕疵" align="center" width="150">
                            <template slot-scope="scope">
                                <span v-for="(item, index) in scope.row.orderClothFlaws">
                                    {{ index == 0 ? item.clothFlawName : ',' + item.clothFlawName }}
                                </span>
                                <el-tag v-if="!scope.row.orderClothFlaws">暂无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="特殊处理" align="center" width="150">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.orderClothCrafts" size="small" v-for="item in scope.row.orderClothCrafts" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">
                                    {{ item.clothCraftName }}
                                </el-tag>
                                <el-tag v-if="!scope.row.orderClothCrafts">暂无</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="洗衣速度" align="center" prop="clothSpeedName" width="120" />

                        <el-table-column label="备注" align="center" min-width="150">
                            <template slot-scope="scope">
                                <el-tooltip
                                    :content="scope.row.remark"
                                    placement="top"
                                    :disabled="!scope.row.remark || scope.row.remark.length <= 20"
                                >
                                    <span class="remark-text">{{ scope.row.remark || '暂无备注' }}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <!--        <el-button type="primary" @click="submitForm" style="margin-left: 5%">提交</el-button>-->
                <el-button @click="cancel" style="margin-left: 5%">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="打印操作" :visible.sync="pointerType" width="30%" :before-close="handlePointerClose" class="pointer_content" append-to-body>
            <div class="pointer_view">
                <div class="pointer_icon">
                    <i class="el-icon-printer"></i>
                </div>
                <div class="btn_box">
                    <div class="btn" @click="setPointer(0)">打印小票</div>
                    <div class="btn" @click="setPointer(1)">打印条码</div>
                    <div class="btn" @click="pointerType = false">关闭</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listOrderCloth, refundOrderCloth } from '../../../api/order/cloth'
import { listOrderClothItem, printCloth, getOrderClothDetail } from '../../../api/order/clothItem'
import { getLodop } from '@/utils/lodopUtils'
import { allOrg } from '@/api/system/store'

export default {
    name: 'ClothItem',
    dicts: ['sys_yes_no', 'cloth_appointment_status', 'pay_status', 'recharge_pay_type', 'order_cloth_flow_status', 'order_cloth_flow_action', 'cloth_order_status', 'goods_order_refund_status'],
    data() {
        return {
            orgList: [],
            storeList: [],
            factoryList: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 洗衣订单衣服明细表格数据
            clothOrderList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                orderStatus: null,
                orderSource: null,
                orderNo: null,
                orgIndex: null
            },
            createTimeRange: [],
            // 表单参数
            form: {},
            orderDetail: {},
            orderClothDetails: [],
            // 表单校验
            rules: {},
            userInfoVO: null,

            LODOP: null,
            number: 1,
            pointerList: [],
            pointerType: false,
            pointerInfo: null
        }
    },
    created() {
        this.userInfoVO = this.getUserInfo()
        allOrg().then((res) => {
            this.orgList = res.data
            this.orgList.forEach((org) => {
                if (org.sourceType == '01') {
                    this.factoryList.push(org)
                } else {
                    this.storeList.push(org)
                }
            })
        })
        this.getList()
    },
    mounted() {
        this.number = 1
        const printerTime = setInterval(() => {
            this.LODOP = getLodop()
            this.number++
            if (this.number == 25) {
                clearInterval(printerTime)
            }
            if (this.LODOP) {
                clearInterval(printerTime)
            }
        }, 200)

        this.pointerList = JSON.parse(this.$cache.local.get('printerSeting'))
    },
    methods: {
        /** 查询洗衣订单衣服明细列表 */
        getList() {
            this.loading = true
            if (null != this.createTimeRange && '' != this.createTimeRange) {
                this.queryParams['beginCreateTime'] = this.createTimeRange[0]
                this.queryParams['endCreateTime'] = this.createTimeRange[1]
            } else {
                delete this.queryParams.beginCreateTime
                delete this.queryParams.endCreateTime
            }
            if (this.queryParams.orgIndex != null) {
                this.queryParams.orgId = this.queryParams.orgIndex.split(',')[0]
                this.queryParams.sourceType = this.queryParams.orgIndex.split(',')[1]
            } else {
                delete this.queryParams.orgId
                delete this.queryParams.sourceType
            }
            this.$nextTick(() => {
                this.$refs.pagination.handleSearch(true)
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        calculateClothName(row) {
            var clothName = row.clothItemName
            if (row.orderClothTypes) {
                row.orderClothTypes.forEach((item) => {
                    clothName += ' 【' + item.clothTypeName + '】'
                })
            }
            return clothName
        },
        /** 搜索按钮操作 */
        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 = '添加洗衣订单衣服明细'
        },
        /** 详情按钮 */
        handleDetail(row) {
            this.reset()
            this.orderClothDetails = []

            getOrderClothDetail(row.orderNo).then((res) => {
                this.orderDetail = res.data
                this.orderClothDetails = res.data.orderClothItemVOS
                this.title = '订单详情'
                this.open = true
            })
        },
        handleClose(row) {
            console.log(row)
            var _this = this
            var content = '退单金额如下：'
            if (row.payType == '0') {
                content += '微信 '
            } else if (row.payType == '1') {
                content += '支付宝 '
            } else if (row.payType == '2') {
                content += '现金 '
            } else if (row.payType == '3') {
                content += '余额 '
            }
            var payAmount = row.payAmount
            if(row.payStatus != '1') {
              payAmount = "0"
            }
            content += payAmount + '元！是否确定撤单？'
            this.$confirm(content).then(function () {
                refundOrderCloth({ orderId: row.id }).then((res) => {
                    _this.$message({
                        type: 'success',
                        message: '撤单成功'
                    })
                    _this.getList()
                })
            })
        },
        checkClose(done) {
            this.$confirm('是否关闭表单，关闭后数据将丢失？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        handlePointerClose(done) {
            this.$confirm('是否关闭打印操作？')
                .then(function () {
                    done()
                })
                .then(() => {})
                .catch(() => {})
        },
        btn_lodop(row) {
            let sysOrg = {}
            if (this.userInfoVO.userType == '02') {
                const obj = {
                    name: this.userInfoVO.storeName,
                    contactPhone: this.userInfoVO.phonenumber,
                    user: this.userInfoVO.nickName,
                }
                // row.sysOrg = obj
                sysOrg = obj
            }

            // this.pointerInfo = row
            console.log(row)
            const _ = this
            printCloth(row.id).then(res => {
                res.data.sysOrg = sysOrg
                this.pointerInfo = res.data
                this.pointerType = true
            })
            // listOrderClothItem({ pageSize: 99999, pageNum: 1, orderNo: row.orderNo }).then((res) => {
            //     console.log("AAAAA", res)
            //     this.pointerInfo.orderClothDetails = res.rows
            //     this.pointerType = true
            // })


        },
        setPointer(type) {
            if (!this.LODOP) {
                this.$modal.msgError('请安装打印机软件')
                return
            }

            let p_name = ''

            this.pointerList.forEach((pointer) => {
                if (pointer.printType == type) {
                    p_name = pointer.printName
                }
            })

            // console.log(this.pointerList, p_name)

            if (type == 0) {
                console.log("AAAA1")
                this.collectClothPrinter(this.LODOP, this.pointerInfo, p_name)
                // this.laundryPrinter(this.LODOP, this.pointerInfo, p_name)
            } else {
                console.log("AAAA2")
                this.barCodePrinter(this.LODOP, this.pointerInfo, p_name)
            }

            this.pointerType = false
        },
        /** 导出按钮操作 */
        handleExport() {
            if (null != this.createTimeRange && '' != this.createTimeRange) {
                this.queryParams['beginCreateTime'] = this.createTimeRange[0]
                this.queryParams['endCreateTime'] = this.createTimeRange[1]
            } else {
                delete this.queryParams.beginCreateTime
                delete this.queryParams.endCreateTime
            }
            if (this.queryParams.orgIndex != null) {
                this.queryParams.orgId = this.queryParams.orgIndex.split(',')[0]
                this.queryParams.sourceType = this.queryParams.orgIndex.split(',')[1]
            } else {
                delete this.queryParams.orgId
                delete this.queryParams.sourceType
            }
            this.download(
                'mapi/order/cloth/export',
                {
                    ...this.queryParams
                },
                `cloth_order_${new Date().getTime()}.xlsx`
            )
        },
        getOrderStatusType(status) {
            const statusTypeMap = {
                6: 'info',
                7: 'success',
                8: 'warning',
                9: 'primary',
                10: 'danger',
                11: 'success'
            }
            return statusTypeMap[status] || 'info'
        },
        getOrderStatusLabel(status) {
            const statusLabelMap = {
                6: '清洗中',
                7: '已上挂',
                8: '待送衣',
                9: '送衣中',
                10: '已完成',
                11: '已完成'
            }
            return statusLabelMap[status] || '未知状态'
        },
        getPaymentType(type) {
            const paymentTypeMap = {
                0: 'success',
                1: 'primary',
                2: 'info',
                3: 'warning'
            }
            return paymentTypeMap[type] || 'info'
        },
        getPaymentLabel(type) {
            const paymentLabelMap = {
                0: '微信',
                1: '支付宝',
                2: '现金',
                3: '余额'
            }
            return paymentLabelMap[type] || '未知支付方式'
        },
        getDeliveryStatusType(status) {
            const deliveryStatusTypeMap = {
                0: 'info',
                1: 'success',
                2: 'warning',
                3: 'danger'
            }
            return deliveryStatusTypeMap[status] || 'info'
        },
        getDeliveryStatusLabel(status) {
            const deliveryStatusLabelMap = {
                0: '待处理',
                1: '已处理',
                2: '处理中',
                3: '已取消'
            }
            return deliveryStatusLabelMap[status] || '未知状态'
        },
        getRefundStatusType(status) {
            const refundStatusTypeMap = {
                0: 'info',
                1: 'success',
                2: 'warning',
                3: 'danger'
            }
            return refundStatusTypeMap[status] || 'info'
        },
        getRefundStatusLabel(status) {
            const refundStatusLabelMap = {
                0: '未退款',
                1: '已退款',
                2: '部分退款',
                3: '退款失败'
            }
            return refundStatusLabelMap[status] || '未知退款状态'
        },
        handleCommand(command, row) {
            if (command === 'detail') {
                this.handleDetail({ row })
            } else if (command === 'print') {
                this.btn_lodop(row)
            } else if (command === 'close') {
                this.handleClose(row)
            }
        },
        handlePreview(images) {
            // 图片预览功能由 el-image 组件的 preview-src-list 属性自动处理
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    .search-wrapper {
        margin-bottom: 10px;
    }

    .order-card {
        padding: 15px;
        background: #fff;
        border-radius: 4px;

        .order-main {
            display: flex;
            align-items: flex-start;

            .order-content {
                flex: 1;
                min-width: 0;

                .order-title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    gap: 10px;

                    .order-no {
                        font-size: 15px;
                        font-weight: 500;
                        color: #303133;
                    }
                }

                .order-info {
                    display: flex;
                    gap: 20px;
                    color: #606266;
                    font-size: 13px;

                    .info-item {
                        display: flex;
                        align-items: center;
                        gap: 5px;

                        i {
                            font-size: 14px;
                            color: #909399;
                        }
                    }
                }
            }
        }
    }

    .customer-info {
        .customer-name,
        .customer-phone {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin: 3px 0;
            color: #606266;
            font-size: 13px;

            i {
                font-size: 14px;
                color: #909399;
            }
        }
    }

    .payment-info {
        .amount {
            margin-bottom: 8px;

            .label {
                color: #909399;
                font-size: 13px;
            }

            .value {
                color: #f56c6c;
                font-size: 15px;
                font-weight: 500;
                margin-left: 5px;
            }
        }

        .payment-type {
            display: flex;
            gap: 8px;
            justify-content: center;
        }
    }

    .status-group {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;

        .el-tag {
            margin: 2px;
        }
    }

    .time-info {
        color: #909399;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;

        i {
            font-size: 14px;
        }
    }

    .cloth-photos {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        padding: 5px;

        .cloth-photo {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #ebeef5;

            &:hover {
                transform: scale(1.05);
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            }

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

    .remark-text {
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #606266;
        font-size: 13px;
    }
}

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

    .pointer_view {
        .pointer_icon {
            text-align: center;
            padding: 20px;

            i {
                font-size: 100px;
                color: #dcdfe6;
            }
        }

        .btn_box {
            display: flex;
            align-items: center;
            border-top: 1px solid #ebeef5;
            background-color: #f5f7fa;

            .btn {
                flex: 1;
                text-align: center;
                padding: 12px;
                cursor: pointer;
                transition: all 0.3s;

                &:nth-child(2) {
                    border-left: 1px solid #ebeef5;
                    border-right: 1px solid #ebeef5;
                }

                &:hover {
                    color: #409eff;
                    background-color: #ecf5ff;
                }
            }
        }
    }
}

// 详情弹窗样式
.el-dialog {
    .el-descriptions {
        margin-bottom: 20px;

        ::v-deep .el-descriptions-item__label {
            color: #606266;
            font-weight: normal;
        }
    }

    .el-table {
        margin-top: 15px;

        ::v-deep .el-table__header-wrapper {
            display: block;
        }
    }
}

// 下拉菜单样式
.dropdown-danger {
    color: #f56c6c;
}

:deep(.el-table) {
    border: none;

    &::before {
        display: none;
    }

    .el-table__row {
        background-color: transparent;
    }

    .el-table__cell {
        background-color: transparent;
    }
}
</style>
