<template>
    <!-- 共用操作 -->
    <!-- <popup class="inline mr-2" width="450px" @confirm="handleCancel" v-if="cancel_btn">
        <template #trigger>
            <el-link type="primary" :underline="false">取消订单2</el-link>
        </template>
        确认要取消订单吗？
    </popup> -->

    <!-- 列表里的操作 -->
    <div v-if="btnStyle === 'text'" class="inline">
        <!-- 下拉 -->
        <el-dropdown>
            <el-link class="ml-2 mt-[5px]" type="primary" :underline="false">
                更多
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </el-link>
            <template #dropdown>
                <el-dropdown-menu>
                    <!-- 删除订单 -->
                    <el-dropdown-item v-if="deleteBtn">
                        <el-link
                            v-perms="['order:del']"
                            type="danger"
                            :underline="false"
                            @click="handleDelete"
                            >删除订单</el-link
                        >
                    </el-dropdown-item>

                    <el-dropdown-item v-if="cancelBtn">
                        <el-link
                            v-perms="['order:cancel']"
                            type="primary"
                            :underline="false"
                            @click="handleCancel"
                            >取消订单</el-link
                        >
                    </el-dropdown-item>

                    <el-dropdown-item v-if="verificationBtn">
                        <el-link
                            v-perms="['order:verification']"
                            type="primary"
                            :underline="false"
                            @click="handleVerification"
                            >核销订单</el-link
                        >
                    </el-dropdown-item>

                    <!-- 商家备注 -->
                    <el-dropdown-item>
                        <popup
                            class="inline mr-2"
                            width="450px"
                            :center="true"
                            @confirm="handleRemark"
                            @open="getRemarkDetail"
                        >
                            <template #trigger>
                                <el-link
                                    v-perms="['order:remark']"
                                    type="primary"
                                    :underline="false"
                                    >商家备注</el-link
                                >
                            </template>
                            <div style="height: 300px" class="mt-4">
                                <el-form ref="orderFormRef" :model="orderForm" label-width="auto">
                                    <el-form-item label="商家备注:">
                                        <el-input
                                            class="ls-input"
                                            type="textarea"
                                            v-model="orderForm.order_remarks"
                                            placeholder="请输入"
                                            :rows="10"
                                        ></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </popup>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>

    <!-- 详情里的操作 -->
    <div v-else class="flex inline mt-3">
        <!-- 核销订单 -->
        <div v-if="verificationBtn" :disabled="verificationStatus === 1">
            <el-button type="primary" @click="handleVerification" class="mr-4">
                {{ verificationStatus === 0 ? '核销订单' : '已核销' }}
            </el-button>
        </div>

        <!-- 取消订单 -->
        <el-button v-if="cancelBtn" @click="handleCancel" type="danger" class="mr-4"
            >取消订单</el-button
        >

        <!-- 商家备注 -->
        <popup
            class="inline"
            width="450px"
            :center="true"
            @confirm="handleRemark"
            @open="getRemarkDetail"
            :close-on-click-modal="false"
        >
            <template #trigger>
                <el-button>商家备注</el-button>
            </template>
            <div style="height: 300px" class="mt-4">
                <el-form ref="orderFormRef" :model="orderForm" label-width="auto">
                    <el-form-item label="商家备注:">
                        <el-input
                            class="ls-input"
                            type="textarea"
                            v-model="orderForm.order_remarks"
                            placeholder="请输入"
                            :rows="10"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup>
import {
    apiOrderDel,
    apiOrderVerification,
    apiOrderCancel,
    apiOrderRemark
} from '@/api/order/lists'
import Popup from '@/components/popup/index.vue'
import { ref, defineEmits } from 'vue'
import feedback from '@/utils/feedback'

const emit = defineEmits(['refresh'])

const props = withDefaults(
    defineProps<{
        id: string | number //订单ID
        code: number | null // 核销码
        btnStyle: string //按钮样式
        cancelBtn: number //取消订单
        deleteBtn: number //删除订单
        verificationBtn: number //核销按钮
        verificationStatus: number //核销文字
        verificationCode: string | null // 核销码
        orderRemarks: string // 商家备注
    }>(),
    {
        id: '',
        btnStyle: 'text',
        cancelBtn: 0,
        deleteBtn: 0,
        verificationBtn: 0,
        verificationStatus: 0,
        verificationCode: '',
        orderRemarks: ''
    }
)

const orderForm = ref({
    order_remarks: '' as string
})

// 取消订单
const handleCancel = async (): Promise<void> => {
    await feedback.confirm('确定要取消订单吗？')
    await apiOrderCancel({ id: props.id })
    feedback.msgSuccess('操作成功')
    emit('refresh')
}

// 核销订单
const handleVerification = async (): Promise<void> => {
    await feedback.confirm('确认要核销订单吗？')
    await apiOrderVerification({ id: props.id, code: props.verificationCode })
    feedback.msgSuccess('操作成功')
    emit('refresh')
}

// 删除服务
const handleDelete = async (): Promise<void> => {
    await feedback.confirm('确认要删除吗？')
    await apiOrderDel({ id: props.id })
    feedback.msgSuccess('操作成功')
    emit('refresh')
}

// 提交商家备注
const handleRemark = async (): Promise<void> => {
    if (orderForm.value.order_remarks === '') {
        feedback.msgSuccess('操作成功')
        emit('refresh', orderForm.value.order_remarks)
        return
    }
    await apiOrderRemark({ id: props.id, remark: orderForm.value.order_remarks })
    feedback.msgSuccess('操作成功')
    emit('refresh')
}

// 商家备注详情
const getRemarkDetail = async (): Promise<void> => {
    orderForm.value.order_remarks = props.orderRemarks
}
</script>

<style lang="scss" scoped>
.ls-input {
    width: 30vw;
}
</style>
