Vue.component('order-details', {
    template: `<div v-if="show" class="details_mask" >
                    <div class="close-model" @click="closeDetails"></div>
                    <div class="details_box" :class="show?'in':'on'">
                        <p class="details_title">订单详情</p>
                        <div class="goods-list-box">
                            <el-table class="details_table" size="mini" :data="detailsData.goodsList" style="width: 100%">
                                <el-table-column prop="goods_name" align="center" label="名称" width="110"> 
                                     <template slot-scope="scope">
                                        <p>
                                            <span v-if="scope.row.goods_gifts_id>0&&scope.row.goods_gifts_type==0"
                                            style="color: #333;font-weight: bold;"
                                            >【赠】</span>
                                            <span v-if="scope.row.goods_gifts_id>0&&scope.row.goods_gifts_type>0"
                                            style="color: #333;font-weight: bold;"
                                            >【送】</span>
                                            <span>{{scope.row.goods_name}}</span>
                                        </p>
                                        <P style='font-size:12px;color:#999;' v-if='scope.row.sku_name'>{{scope.row.sku_name}}</P>
                                     </template>
                                </el-table-column>
                                <el-table-column label="价格" align="center" width="180">
                                    <template slot-scope="scope">
                                        <div style="display: inline-block;text-align: left">
                                            <div v-if="scope.row.integral_marketing==1">单价:￥{{scope.row.price}}</div>
                                            <div v-if="scope.row.integral_marketing==2">单价:￥{{scope.row.price+(scope.row.mem_integral*1>0?('+'+scope.row.mem_integral+'积分'):'')}}</div>
                                            <div>原价:￥{{scope.row.original_price}}</div>
                                        </div>
                                     </template>
                                </el-table-column>
                                <el-table-column label="优惠信息" align="center" width="180">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.vip_discount==1&&scope.row.cashier_manual_discount==1&&scope.row.coupon_money==0&&scope.row.cashier_dis_money==0&&scope.row.small_changes_money==0">无</div>
                                        <div v-else style="display: inline-block;text-align: left">
                                            <div v-if="scope.row.vip_discount<1">会员折扣:￥{{scope.row.vip_dis_money}}【{{scope.row.vip_discount}}】</div>
                                            <div v-if="scope.row.cashier_manual_discount<1">单品折扣:￥{{scope.row.cashier_manual_discount_money}}【{{scope.row.cashier_manual_discount}}】</div>
                                            <div v-if="scope.row.coupon_money>0">优惠券:￥{{scope.row.coupon_money}}</div>
                                            <div v-if="scope.row.cashier_dis_money>0">整单折扣:￥{{scope.row.cashier_dis_money}}</div>
                                            <div v-if="scope.row.small_changes_money>0">抹零:￥{{scope.row.small_changes_money}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="num" label="数量"></el-table-column>
                                <el-table-column align="center"  label="小计">
                                      <template prop="before_all_money" slot-scope="scope">
                                      ￥{{scope.row.integral_marketing==1?scope.row.all_money:(scope.row.all_money+(scope.row.use_integral>0?('+'+scope.row.use_integral+'积分'):''))}}
                                      </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <ul class="details-info">
                            <li class="info_list" v-if="detailsData.guide_name&&detailsData.guide_name!=''">
                                 <span>导购:</span>
                                 <span>{{detailsData.guide_name}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.refund_no>0">
                                 <span>原订单号:</span>
                                 <span>{{detailsData.refund_no}}</span>
                            </li>
                            <li class="info_list">
                                <span>合计:</span>
                                <span>￥{{detailsData.all_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.integral_marketing==2&&detailsData.money_dis_integral>0">
                                 <span>使用积分:</span>
                                 <span>￥{{detailsData.money_dis_integral}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.integral_marketing==2&&detailsData.integral_dis_money>0">
                                 <span>购买积分:</span>
                                 <span>￥{{detailsData.integral_dis_money}}</span>
                            </li>
                            <li class="info_list" v-if='detailsData.all_earnest_price>0'>
                                 <span>支付定金:</span>
                                 <span>￥{{detailsData.all_earnest_price}}</span>
                            </li>
                            <li class="info_list" v-if='detailsData.all_arrive_price>0'>
                                 <span>定金抵现:</span>
                                 <span>￥{{detailsData.all_arrive_price}}</span>
                            </li>
                            <li class="info_list" v-if='detailsData.tail_pay_money>0 && detailsData.state==2 && detailsData.advance_type==2'>
                                 <span>支付尾款:</span>
                                 <span>{{detailsData.tail_pay_money>0?'￥'+detailsData.tail_pay_money:detailsData.tail_pay_money}}</span>
                            </li>
                            <li class="info_list" v-if='detailsData.earnest_pay_time'>
                                 <span>定金支付时间:</span>
                                 <span>{{detailsData.earnest_pay_time}}</span>
                            </li>
                            <li class="info_list" v-if='detailsData.finish_time && detailsData.state==2 && detailsData.advance_type==2'>
                                 <span>尾款支付时间:</span>
                                 <span>{{detailsData.trade_date}}</span>
                            </li>
                            <li class="info_list" v-if='detailsData.advance_type==1'>
                                 <span>支付时间:</span>
                                 <span>{{detailsData.trade_date}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.coupon_money>0">
                                <span>优惠券:</span>
                                <span>￥{{detailsData.coupon_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.v_discount!=1&&detailsData.vip_dis_money>0">
                                <span>会员折扣:</span>
                                <span>￥{{detailsData.vip_dis_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.cashier_dis_money>0">
                                <span>自定义折扣:</span>
                                <span>￥{{detailsData.cashier_dis_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.cashier_manual_money>0">
                                <span>单品打折:</span>
                                <span>￥{{detailsData.cashier_manual_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.integral_marketing==1&&detailsData.integral_dis_money>0">
                                <span>积分抵扣:</span>
                                <span>￥{{detailsData.integral_dis_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.small_changes_money>0">
                                <span>抹零:</span>
                                <span>￥{{detailsData.small_changes_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.user_select_time">
                                <span>{{detailsData.pickup_type==1?'自提':'配送'}}时间:</span>
                                <span>{{detailsData.user_select_time}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.user_name">
                                <span>联系人:</span>
                                <span>{{detailsData.user_name}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.user_phone">
                                <span>联系电话:</span>
                                <span>{{detailsData.user_phone}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.user_address">
                                <span>联系地址:</span>
                                <span>{{detailsData.user_address}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.remark">
                                <span>备注:</span>
                                <span>{{detailsData.remark}}</span>
                            </li>
                            <template v-if="detailsData.vid>0">
                                <li class="info_list">
                                    <span>会员姓名|昵称:</span>
                                    <span>{{detailsData.vip_info.name||'-'}}|{{detailsData.vip_info.nickname||'-'}}</span>
                                </li>
                                <li class="info_list">
                                    <span>会员手机:</span>
                                    <span>{{detailsData.vip_info.mobile_phone}}</span>
                                </li>
                            </template>
                            <li class="info_list" v-if="detailsData.advance_type==2 && detailsData.state==1">
                                <span>待付尾款:</span>
                                <span>{{detailsData.tail_pay_money>0?'￥'+detailsData.tail_pay_money:detailsData.tail_pay_money}}</span>
                            </li>
                            <li class="info_list" v-if="detailsData.delivery_fee>0 && detailsData.pickup_type!=1">
                                <span>配送费:</span>
                                <span>￥{{detailsData.delivery_fee}}</span>
                            </li>
                            <template v-if="detailsData.type==2">
                                <li class="info_list" v-if="detailsData.amount_received>0">
                                    <span>应收:</span>
                                    <span>￥{{detailsData.amount_received}}</span>
                                </li>
                                <li class="info_list" v-if="detailsData.zero_storage>0">
                                    <span>存零:</span>
                                    <span>￥{{detailsData.zero_storage}}</span>
                                </li>
                                <li class="info_list" v-if="detailsData.give_change>0">
                                    <span>找零:</span>
                                    <span>￥{{detailsData.give_change}}</span>
                                </li>
                            </template>
                            
                            <li class="actuallyPaid" style="font-size:17px;" v-if="detailsData.advance_type==1">
                                <span>实付: <span style="color: #dd6161;">￥ {{detailsData.all_money}}</span></span>
                            </li>
                            <li class="actuallyPaid" style="font-size:17px;" v-else-if="detailsData.advance_type==2 && detailsData.state==1 && detailsData.all_earnest_price>0">
                                <span>实付: <span style="color: #dd6161;">￥ {{detailsData.all_earnest_price}}</span></span>
                            </li>
                            <li class="actuallyPaid" style="font-size:17px;" v-else>
                                <span>实付: <span style="color: #dd6161;">￥ {{detailsData.all_money}}</span></span>
                            </li>
                            <li class="info_list" v-if="detailsData.business_remark">
                                <span>收银备注:</span>
                                <span>{{detailsData.business_remark}}</span>
                            </li>
                        </ul>
                    </div>
              </div>`,
    props: {
        'show': {
            type: Boolean,
            default: false,
        },//是否展示
        'details': {
            type: Object,
            default: () => {
                return {}
            },
        },
        'order_no': {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            detailsData: {}
        }
    },
    methods: {
        handleData() {
            if (this.order_no) {
                $.ajax({
                    url: '/index.php/Retail/Component/getOrderDetails',
                    type: 'post',
                    data: {
                        order_no: this.order_no,
                    },
                    success: (res) => {
                        if (res.status == 1) {
                            this.detailsData = res.data;
                        } else {
                            this.$alert(res.msg ? res.msg : '请求发生错误，请稍后重试！', '错误提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        }
                    },
                    error: (res) => {
                        console.log(res);
                        this.$alert('请求发生错误，请稍后重试！', '错误提示', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        });
                    }
                })
            } else if (!this.detailsData.id) {
                this.$message({
                    message: '调用模板参数错误，请传入订单号或订单详细数据',
                    type: 'error'
                })
            } else {
                this.detailsData = JSON.parse(JSON.stringify(this.details));
            }
        },
        //关闭详情
        closeDetails: function () {
            this.$emit('close-details');
        }
    },
    watch: {
        show: function (n) {
            if (n) {
                this.handleData();
            }
        }
    },
});