<template>
    <j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false"
        switchFullscreen @cancel="handleCancel" cancelText="关闭" :okButtonProps="{ class: { 'jee-hidden': true } }">
        <a-button @click="getQRCode" type="primary" :disabled="buttonFlag">
            二维码
        </a-button>
        <a-spin :spinning="confirmLoading">
            <a-tree :tree-data="treeData" @select="select" defaultExpandAll showLine />
        </a-spin>
        <div>
            <j-modal :width="250" :visible="printVisible" :maskClosable="false" switchFullscreen
                @cancel="printDandleCancel" okText="打印完成" @ok="handleCancel">
                <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
                <section id="printContent">
                    <vue-qr :text="imgUrl" :size="200" :margin="21" :logoScale="0.2"> </vue-qr>
                </section>
            </j-modal>
        </div>
    </j-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import VueQr from 'vue-qr'
export default {
    components: {
        VueQr,
    },
    data() {
        return {
            title: '',
            width: 800,
            visible: false,
            confirmLoading: true,
            model: {},
            validatorRules: {},
            treeData: [
                {
                    title: 'parent 1',
                    key: '0-0',
                    children: [
                        {
                            title: 'parent 1-0',
                            key: '0-0-0',
                            children: [
                                { title: 'leaf', key: '0-0-0-0' },
                                { title: 'leaf', key: '0-0-0-1' },
                            ],
                        },
                        {
                            title: 'parent 1-1',
                            key: '0-0-1',
                            children: [{ key: '0-0-1-0', title: 'sss' }],
                        },
                    ],
                },
            ],
            expandedKeys: ['0-0-0', '0-0-1'],
            selectedKeys: ['0-0-0', '0-0-1'],
            checkedKeys: ['0-0-0', '0-0-1'],
            printVisible: false,
            imgUrl: '',
            buttonFlag: true,
            treeId: ''
        }
    },
    methods: {
        show(record) {
            this.model = Object.assign({}, record)
            const that = this;
            let params = {
                id: this.model.id
            }
            console.log('params', params)
            getAction("/baseLibrary/baseLibraryInfo/tree", params)
                .then((res) => {
                    console.log('res', res)
                    if (res.success) {
                        this.treeData = res.result
                        this.visible = true
                        that.$emit('ok')
                    } else {
                        that.$message.warning(res.message)
                    }
                })
                .finally(() => {
                    that.confirmLoading = false
                })
        },
        handleOk() {

        },
        handleCancel() {
            this.close();
        },
        close() {
            this.$emit('close')
            this.visible = false
            // this.$refs.form.clearValidate()
        },
        select(a, b) {
            if (a.length === 0) {
                this.buttonFlag = true;
                return;
            }
            this.treeId = a[0]
            this.buttonFlag = false;
        },
        getQRCode() {
            this.printVisible = true
            this.imgUrl = this.treeId;
        },
        printDandleCancel() {
            this.$emit('close')
            this.printVisible = false
        },
    }
}
</script>