<template>
    <view class="component-order-action">
        <!-- 购买 -->
        <block v-if="order.listType == 't1'">
            <block v-if="order.state == 0">
                <view class="btn" @click.stop="payOrder">
                    <text>立即支付</text>
                </view>
            </block>
            <block v-if="order.state == 1">
                <view class="btn" @click.stop="cancelOrder">
                    <text>取消订单</text>
                </view>
            </block>
        </block>
        <!-- 报/议价 -->
        <block v-if="order.listType == 't2'">
            <block v-if="order.state == 0">
                <view class="btn" @click.stop="cancelOrder">
                    <text>取消订单</text>
                </view>
            </block>
            <block v-if="order.state == 1">
                <view class="btn" @click.stop="payOrder">
                    <text>立即支付</text>
                </view>
            </block>
        </block>
        <!-- 购买、报/议价公共操作 -->
        <block v-if="order.listType == 't1' || order.listType == 't2'">
            <block v-if="order.state == 2 || order.state == 4 || order.state == 5">
                <view class="btn" @click.stop="refundOrder">
                    <text>申请退款</text>
                </view>
            </block>
            <block v-if="order.state == 4">
                <view class="btn" @click.stop="payRetainage">
                    <text>支付尾款</text>
                </view>
            </block>
            <block v-if="order.state == 5">
                <view class="btn" @click.stop="confirmOrder">
                    <text>确认完成</text>
                </view>
            </block>
            <block v-if="order.state == 6">
                <view class="btn" @click.stop="appraiseOrder">
                    <text>评价师傅</text>
                </view>
            </block>
            <block v-if="order.state == 7">
                <view class="btn" @click.stop="cancelRefund">
                    <text>取消申请</text>
                </view>
            </block>
            <block v-if="order.state == 9">
                <view class="btn" @click.stop="showReason">
                    <text>查看未通过原因</text>
                </view>
            </block>
        </block>
        <!-- 货运 -->
        <block v-if="order.listType == 't3'">
            <block v-if="order.state == 0">
                <view class="btn" @click.stop="payDistributionOrder">
                    <text>立即支付</text>
                </view>
            </block>
            <block v-if="order.state == 1 || order.state == 2">
                <view class="btn" @click.stop="">
                    <text>确认完成</text>
                </view>
            </block>
        </block>
    </view>
</template>

<script>
export default {
    name: "component-order-action",
    data() {
        return {};
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        /**
         * 支付普通订单
         */
        payOrder() {
            this.$models.order.payOrder(this.order.id).then(() => {
                this.$emit("afterPay");
            });
        },
        /**
         * 支付尾款
         */
        payRetainage() {
            this.$emit("payRetainage");
        },
        /**
         * 支付货运订单
         */
        payDistributionOrder() {
            this.$models.service.payDistributionOrder(this.order.id).then(() => {
                this.$emit("afterPay");
            });
        },
        /**
         * 取消
         */
        cancelOrder() {
            this.$emit("cancelOrder");
        },
        /**
         * 删除
         */
        delOrder() {
            this.$emit("delOrder");
        },
        /**
         * 确认完成
         */
        confirmOrder() {
            this.$emit("confirmOrder");
        },
        /**
         * 评价
         */
        appraiseOrder() {
            // this.$emit("appraiseOrder");
            this.$utils.toPage("/pages/worker/appraise?id=" + this.order.worker.id);
        },
        /**
         * 退款
         */
        refundOrder() {
            // this.$emit("refundOrder");
            this.$utils.toPage("/pages/order/refund?id=" + this.order.worker.id);
        },
        /**
         * 取消退款
         */
        cancelRefund() {
            this.$emit("cancelRefund");
        },
        /**
         * 查看未通过原因
         */
        showReason() {
            this.$utils.toPage("/pages/order/refund?type=reason&id=" + this.order.worker.id);
        },
    },
};
</script>

<style lang="less" scoped>
.component-order-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn,
    .del {
        margin-left: 30rpx;
    }
    .btn {
        display: inline-block;
        background: rgba(139, 155, 235, 0);
        border: 1px solid #999999;
        border-radius: 28rpx;
        padding: 15rpx 26rpx;
        font-size: 26rpx;
        // color: #999999;
        color: #666666;
        line-height: 26rpx;
    }
    .btn.active {
        color: #666666;
    }
    .del {
        color: #b5b5b5;
        font-size: 40rpx;
    }
}
</style>