<template>
    <view class="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" v-if="false" @click.stop="appraiseOrder">
                <text>评价师傅</text>
            </view>
        </block>
        <block v-if="order.state == $models.order.state.NO_SERVICE">
            <view class="btn" v-if="false" @click.stop="drawbackOrder">
                <text>申请退款</text>
            </view>
        </block>
        <block v-if="order.state == $models.order.state.ORDER_CLOSE">
            <view class="btn" v-if="false" @click.stop="reapplyOrder">
                <text>重新申请</text>
            </view>
        </block>
        <block v-if="order.state == $models.order.state.ORDER_CLOSE || order.state == $models.order.state.ALL_FINISH">
            <view class="del" v-if="true" @click.stop="delOrder">
                <text class="iconfont icon-shanchu"></text>
            </view>
        </block>
    </view>
</template>

<script>
export default {
    name: "order-action",
    data() {
        return {};
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        cancelOrder() {
            this.$emit("cancelOrder");
        },
        delOrder() {
            this.$emit("delOrder");
        },
        appraiseOrder() {
            this.$emit("appraiseOrder");
        },
        drawbackOrder() {
            this.$emit("drawbackOrder");
        },
        reapplyOrder() {
            this.$emit("reapplyOrder");
        },
    },
};
</script>

<style lang="less" scoped>
.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>