<template>
    <view class="component-order-action">
        <block
            v-if="
                order.state == models.order.state.NO_PAY ||
                order.state == models.order.state.NO_PRICE ||
                order.state == models.order.state.NO_SELECT_WORKER
            "
        >
            <view class="btn" @click.stop="cancelOrder" :class="{ active: true }">
                <text>取消订单</text>
            </view>
        </block>
        <block v-if="order.state == models.order.state.NO_APPRAISE">
            <view class="btn" @click.stop="appraiseOrder" :class="{ active: true }">
                <text>评价师傅</text>
            </view>
        </block>
        <block v-if="order.state == models.order.state.NO_SERVICE">
            <view class="btn" @click.stop="refundOrder" :class="{ active: true }">
                <text>申请退款</text>
            </view>
        </block>
        <block v-if="order.state == models.order.state.ORDER_CLOSE">
            <view class="btn" @click.stop="reapplyOrder" :class="{ active: true }">
                <text>重新申请</text>
            </view>
        </block>
        <block v-if="order.state == models.order.state.CAN_NOT_REFUND">
            <view class="btn" @click.stop="showReason" :class="{ active: true }">
                <text>查看原因</text>
            </view>
        </block>
        <block v-if="order.state == models.order.state.ORDER_CLOSE || order.state == models.order.state.ALL_FINISH || order.state == models.order.state.CAN_NOT_REFUND || order.state == models.order.state.REFUNDED">
            <view class="del" v-if="true" @click.stop="delOrder">
                <text class="iconfont icon-shanchu"></text>
            </view>
        </block>
    </view>
</template>

<script>
export default {
    name: "component-order-action",
    data() {
        return {
            models: this.$models,
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        // 取消
        cancelOrder() {
            this.$emit("cancelOrder");
        },
        // 删除
        delOrder() {
            this.$emit("delOrder");
        },
        // 评价
        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);
        },
        // 查看未通过原因
        showReason() {
            this.$utils.toPage("/pages/order/refund?type=reason&id=" + this.order.worker.id);
        },
        // 重新提交
        reapplyOrder() {
            this.$emit("reapplyOrder");
        },
    },
};
</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;
        line-height: 26rpx;
    }
    .btn.active {
        color: #666666;
    }
    .del {
        color: #b5b5b5;
        font-size: 40rpx;
    }
}
</style>