<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{titleMap[mode]}} <span class="tips">{{ formData.order_sn }}</span></div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-descriptions :column="3" size="large" direction="vertical" border>
                    <el-descriptions-item>
                        <template #label>订单编号</template>{{ formData.order_sn }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>下单用户</template>{{ formData.openid }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>取件号</template>{{ formData.package_sn }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>取件方式</template>{{ ostatus[formData.package] }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>订单状态</template>{{ status[formData.status] }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>打印机</template>{{ formData.print_name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>下单时间</template>{{ formData.create_at }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>支付时间</template>{{ formData.pay_at?formData.pay_at:'-' }} <template v-if="formData.pay_at"><el-tag type="success">{{ payStatus[formData.pay_type] }}</el-tag></template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>失败原因</template>{{ formData.reason?formData.reason:'-' }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="2" size="large" direction="vertical" class="mt10" border>
                    <el-descriptions-item>
                        <template #label>支付金额(元)</template> 
                        <div class="price" v-if="formData.money > formData.discount">
                            {{ $TOOL.money(formData.discount) }}
                            <div class="del">{{ $TOOL.money(formData.money) }}</div>
                        </div>
                        <div class="price" v-else>
                            {{ $TOOL.money(formData.money) }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>含配送费(元)</template>{{ $TOOL.money(formData.express_money) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>优惠券金额(元)</template>{{ $TOOL.money(formData.coupon_money) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>整单装订总价(元)</template>{{ $TOOL.money(formData.staple_money) }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-table :data="tableData" style="width: 100%" border class="mt10">
                    <el-table-column label="文件名" prop="name" width="180" fixed="left"></el-table-column>
                    <el-table-column label="状态" prop="name">
                        <template #default="scope">
                            <span v-if="scope.row.status==0">转码中</span>
                            <span v-if="scope.row.status==1">待打印</span>
                            <span v-if="scope.row.status==2">打印中</span>
                            <span v-if="scope.row.status==3">已打印</span>
                            <span v-if="scope.row.status==4">退款中</span>
                            <span v-if="scope.row.status==5">退款失败</span>
                            <span v-if="scope.row.status==6">已退款</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="页数" prop="page" align="center"></el-table-column>
                    <el-table-column label="纸张" prop="paper_size"></el-table-column>
                    <el-table-column label="颜色" prop="name">
                        <template #default="scope">
                            <el-tag>{{ scope.row.color==1?'彩色':'黑白' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="单双面" prop="name">
                        <template #default="scope">
                            <el-tag>{{ scope.row.duplex==1?'单面':'双面' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="打印范围" prop="name" align="center">
                        <template #default="scope">
                            {{ scope.row.start_page }} - {{ scope.row.end_page }}
                        </template>
                    </el-table-column>
                    <el-table-column label="份数" prop="number" align="center"></el-table-column>
                    <el-table-column label="装订方式" prop="name">
                        <template #default="scope">
                            不装订
                        </template>
                    </el-table-column>
                    <el-table-column label="订单金额" prop="name">
                        <template #default="scope">
                            {{ $TOOL.money(scope.row.money) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160" align="right" fixed="right">
                        <template #default="scope">
                            <el-button-group>
                                <el-button text type="warning" size="small" @click="table_edit(scope.row)">预览/下载</el-button>             
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" >关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            mode: "add",
            titleMap: {
                add: "新增渠道",
                edit: "订单详情"
            },
            status: ['待支付','待打印', '打印失败', '已打印','申请退款','退款失败','已退款'],
            ostatus: ['-','店内打印', '远程自取', '商家配送'],
            payStatus:['-','微信','会员卡'],
            visible: false,
            isSaveing: false,
            formData: {},
            rules: {},
            tableData:[]
        }
    },
    methods: {
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单注入数据
        setData(data) {
            this.formData = data;
            this.tableData = data.detail;
        },
        table_edit(data){
            console.log(data.path)
        }
    }
}
</script>
<style>
.mt10{margin-top: 10px;}
</style>