<template>
    <el-dialog title="选择开票人" width="60%" v-model="dialogVisible">
        <el-table :data="tableData.list" border>
            <el-table-column label="开票人" prop="name"></el-table-column>
            <el-table-column label="操作" width="140">
                <template v-slot="scope">
                    <el-button type="primary" icon="" :loading="scope.row.loading"
                        @click="selectHandle(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog title="扫描二维码开票" width="330px" v-model="showEwmDialog">
        <canvas class="ewm" ref="canvasRef"></canvas>
        <div class="footer">
            <el-button type="primary" style="width: 100%" :loading="printEwmLoading"
                @click="printEwmHandle">打印二维码</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import QRCode from 'qrcode'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { issuedby, carsubinvoicing, syjprintqrcode } from '@/api/invoice.js'
import { useUser } from "@/store/user.js";
import { usePrint } from "@/store/print.js";
const printStore = usePrint();
const store = useUser();

const emits = defineEmits(['loadComplete', 'success'])

const dialogVisible = ref(false)
const showEwmDialog = ref(false)
const canvasRef = ref(null)
const ewmInfo = ref({})
const printEwmLoading = ref(false)

const tableData = reactive({
    list: []
})
const orderInfo = ref({})

// 打印二维码
async function printEwmHandle() {
    try {
        printEwmLoading.value = true
        if (printStore.deviceNoteList.length) {
            printStore.printInvoice({
                url: ewmInfo.value.wechat_url
            })
            ElMessage.success('打印成功')
            showEwmDialog.value = false
            setTimeout(() => {
                printEwmLoading.value = false
            }, 1000)
        } else {
            const res = await syjprintqrcode({
                id: ewmInfo.value.id
            })
            ElMessage.success('打印成功')
            showEwmDialog.value = false
            setTimeout(() => {
                printEwmLoading.value = false
            }, 1000)
        }
    } catch (error) {
        console.log(error);
        printEwmLoading.value = false
    }
}

// 选择开票
async function selectHandle(row) {
    try {
        row.loading = true
        const res = await carsubinvoicing({
            store_id: store.userInfo.loginName,
            orderNo: orderInfo.value.id,
            dlzh: row.id
        })
        console.log(res);
        row.loading = false
        ewmInfo.value = res
        dialogVisible.value = false
        showEwmDialog.value = true
        setTimeout(() => {
            QRCode.toCanvas(canvasRef.value, ewmInfo.value.wechat_url, function (error) {
                if (error) console.error(error)
                // console.log('success!');
            })
        }, 10)
    } catch (error) {
        row.loading = false
        console.log(error);
    }
}

// 获取开票人列表
async function getTableData() {
    try {
        const res = await issuedby({
            store_id: store.userInfo.loginName
        })
        emits('loadComplete', false)
        dialogVisible.value = true
        tableData.list = res.map(item => {
            item.loading = false
            return item
        })
    } catch (error) {
        console.log(error);
        emits('loadComplete', false)
    }
}

function show(order) {
    console.log(order);
    orderInfo.value = order
    getTableData()
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.ewm {
    width: 300px !important;
    height: 300px !important;
}
</style>