<template>
    <div style="display: flex;width: 100%;margin-bottom: 20px;padding-bottom: 15px;align-items: center;justify-content: space-between;border-bottom: 2px dashed #98c3ef;">
        <el-icon v-if="showjt" color="#98c3ef" @click="handleClose" style="cursor: pointer;">
            <ArrowLeftBold />
        </el-icon>
        <div style="font-size: 20px;color:#0d8ed7;font-weight: bold;text-align: center;">
            {{name}}
        </div>
        <div style="display: flex;">
            <!-- <a v-if="showcode" :href="url" style="display: flex;align-items: center;padding-right: 30px;color: #80aedd;">
                <div style="padding-right: 6px;">下载小程序码</div><el-icon><Download /></el-icon>
            </a> -->

          

            <div v-if="showcode" style="display: flex;align-items: center;padding-right: 30px;color: #80aedd;cursor: pointer;">
                <div @click="setpublicKey" style="padding-right: 40px;color: #b88230;">生成公钥</div>
                <div @click="xcxcode(1)" style="padding-right: 20px;">生成小程序码</div>
                <!-- <div @click="xcxcode(2)" style="padding-right: 6px;color: #aeaf96;">生成预约二维码</div> -->
                <!-- <el-icon><Download /></el-icon> -->
            </div>
            
            <el-icon v-if="showcls" color="#ccc" @click="handleClose" style="cursor: pointer;">
                <CloseBold />
            </el-icon>
        </div>
    </div>

    <!--换电站公钥-->
    <el-dialog 
     v-model="keypop"  
     width="700" 
     append-to-body
     destroy-on-close
     :close-on-click-modal="false"
    >
    
    <div style="display: flex;align-items: center;white-space: pre-wrap;word-break: break-all;">
        <div>{{publickey}}</div>
        <div @click="copyTextToClipboard" style="width: 150px;text-align: right; color: #98c3ef;cursor: pointer;">复制</div>
    </div>
    
    </el-dialog>

    <!--小程序二维码-->
    <el-dialog 
     v-model="openpop"  
     width="450" 
     append-to-body
     destroy-on-close
     :close-on-click-modal="false"
    >
    
    <img :src="urlcode" width="400" height="400" />
    <div style="text-align: right;">
        <el-button @click="downloadImage()">下载</el-button>
    </div>
    
        
    </el-dialog>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import{ 
        getqrcode,
        publicKey,
        getCode
    } from '@/api/swapstation/hdz'
    const props = withDefaults(defineProps<{
        name?:string
        showjt?:boolean
        showcls?:boolean
        showcode?:boolean,
        hdzcode?:string,
        openAllDay?:string|number,
        startTime?:string,
        endTime?:string
    }>(), {
        name:'',
        showjt:true,
        showcls:true,
        showcode:false,
        openAllDay:'',
        startTime:'',
        endTime:''
    })
    //${import.meta.env.VITE_APP_BASE_API} http://192.168.5.200:9103
    let url = `${import.meta.env.VITE_APP_BASE_API}/cloud/battery/station/xcx/qrcode/get?path=pages/home/index?code=${props.hdzcode}&width=400&env_version=trial`
    


    const emit = defineEmits<{
        close: []
    }>()

    function handleClose() {
        emit('close')
    }

    //生成公钥
    let keypop = ref(false)
    let publickey = ref('')
    function setpublicKey() {
        publicKey(props.hdzcode).then(rps => {
            keypop.value = true
            publickey.value = (rps.data as any).publickey
        })
        
    }

    //复制
    function copyTextToClipboard() {
        
        navigator.clipboard.writeText(publickey.value).then(
            function() {
            console.log('复制成功');
            },
            function(err) {
            console.error('复制失败: ', err);
            }
        )
    }

    let openpop = ref(false)
    let urlcode = ref<any>('')
    //获取小程序码
    function xcxcode(type:number){
        codehand(type).then((rps:any) => {
            openpop.value = true

            let reader = new FileReader()
            reader.readAsDataURL(rps)           // 转换为base64
            reader.onload = function () {
                urlcode.value = reader.result
            }
            })
        }
    
    //下载图片
    function downloadImage() {
        const a = document.createElement('a');
        a.href = urlcode.value
        a.download = props.name+'.jpg'
       // a.setAttribute('download', props.name+'.jpg');
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    //获取预约二维码
    function codehand(type:number) {
        if(type == 1){
            return getqrcode({
                path: `pages/home/index?hdzcode=${props.hdzcode}&hdzname=${props.name}&openAllDay=${props.openAllDay}&stiem=${props.startTime}&etime=${props.endTime}`,       //`code=${props.hdzcode}&hdzname=${props.name}`,
                width:'400',
                env_version:'release'    //要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"。默认是正式版。
            })
        }
        return getCode({
            path:`homePages/reservation/index?code=${props.hdzcode}&hdzname=${props.name}`, //`pages/home/index?code=${props.hdzcode}&hdzname=${props.name}`,       //`code=${props.hdzcode}&hdzname=${props.name}`,
            width:'400',
        })
    }
    
</script>