<template>
    <div class="fix-height-subpage column no-wrap q-pa-md">
        <div class="col">
            <div class="column no-wrap q-pb-md items-center">
                <div class="rounded-borders" style="overflow: hidden;" :style="{'width':$q.platform.is.desktop?'80%':'90%',
                'max-width':$q.platform.is.desktop?'1290px':'760px',
                'min-width':$q.platform.is.desktop?'810px':'370px'}" ref="quotationbox" id="quotationbox">
                    <div :style="{'padding':$q.platform.is.desktop?'100px 15%':'20px 10px','height':$q.platform.is.desktop?'':'205px'}" style="position: relative;background-color: #3699FF;">
                        <div style="position: absolute; left: 0;top: 0;">
                            <svg-icon color="72B7FF" icon="offer/Bag.svg" :size="130"></svg-icon>
                        </div>
                        <div class="row wrap items-center" :class="{'justify-between':$q.platform.is.desktop}" :style="{'padding':$q.platform.is.desktop?'0 36px':'0 36px','position':$q.platform.is.desktop?'':'absolute','left':0,'right':0}">
                            <div class="column">
                                <q-avatar square size="50px">
                                    <img src="../../assets/images/logo.png">
                                </q-avatar>
                                <div class="text-white text-weight-bold fz14 q-pt-md">Cecilia Chapman, 711-2880 Nulla St, Mankato Mississippi 96522</div>
                            </div>
                            <div class="text-white text-weight-bold fz20 text-right" style="font-size: 1.6rem;">{{$t('v101.Listofquotation.dindanbaojia')}}</div>
                        </div>
                    </div>
                    <div class="bg-white column" :style="{'padding': $q.platform.is.desktop?'80px 0':'15px 0'}">
                        <div :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" :style="{'padding': $q.platform.is.desktop?'0 80px':'0 20px'}">
                            <div :class="{'col-3':$q.platform.is.desktop}" :style="{'border-right': $q.platform.is.desktop?'1px solid #EEEEEE':'0','padding': $q.platform.is.desktop?'0 40px 0 0':'0'}">    
                                <div :class="{'q-pb-lg':$q.platform.is.desktop,'q-pb-xs':$q.platform.is.mobile}">
                                <div class="text-grey-6 q-pb-sm">{{$t('v101.Listofquotation.zhutuanhao')}}</div> 
                                <span class="q-pb-lg">
                                    VS218394AA
                                </span> 
                                </div>
                                <div :class="{'q-pb-lg':$q.platform.is.desktop,'q-pb-xs':$q.platform.is.mobile}">
                                    <div class="text-grey-6 q-pb-sm">{{$t('v101.Listofquotation.dindanhao')}}</div> 
                                    <span class="q-pb-lg">
                                    VS218394AA
                                    </span> 
                                </div>
                                <div :class="{'q-pb-lg':$q.platform.is.desktop,'q-pb-xs':$q.platform.is.mobile}">
                                    <div class="text-grey-6 q-pb-sm">{{$t('v101.Listofquotation.riqi')}}</div> 
                                    <span class="q-pb-lg">
                                        {{formattedString}}
                                    </span> 
                                </div>
                            </div>
                            <div :class="{'col':$q.platform.is.desktop||$q.platform.is.mobile}" :style="{'padding': $q.platform.is.desktop?'0 0 0 40px':'0'}">
                                <div class="row justify-between  text-grey-6" :class="{'q-py-md':$q.platform.is.desktop,'q-py-xs':$q.platform.is.mobile,}">
                                    <div :class="{'col-6':$q.platform.is.desktop,'col-4':$q.platform.is.mobile}">{{$t('v101.Listofquotation.HotelDate')}}</div>
                                    <div class="col text-right">{{$t('v101.Listofquotation.HotelName')}}</div>
                                    <div class="col text-right">{{$t('v101.Listofquotation.HotelInfor')}}</div>
                                    <div class="col text-right">{{$t('v101.Listofquotation.xiaoji')}}</div>
                                </div>
                                <q-separator color="grey-3" class="q-my-sm" />
                                <div class="column">
                                    <div class="row justify-between" v-for="(x,index) in 3">
                                        <div :class="{'col-6':$q.platform.is.desktop,'col-4':$q.platform.is.mobile}">
                                            2022-09-36
                                        </div>
                                        <div class="col text-right">11</div>
                                        <div class="col text-right">22</div>
                                        <div class="col text-right text-weight-bold">33</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="items-center justify-between" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" :style="{'padding': $q.platform.is.desktop?'40px 80px 0 80px':'0px 20px 0'}">
                            <div class="col-5">
                                <q-separator color="grey-3" class="q-my-sm" />
                                <div class="q-pt-lg q-pb-sm">{{$t('v101.Listofquotation.riben')}}</div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t1')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t2')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t3')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t4')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t5')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t6')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t7')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-4">{{$t('v101.Listofquotation.col.t8')}}:</div>
                                    <div class="col text-grey-6 text-right">232</div>
                                </div>
                                <div class="row q-pb-sm">
                                    <div class="col-12 text-red">{{$t('v101.Listofquotation.col.t9')}}</div>
                                </div>
                            </div>
                            <div :class="{'q-pb-lg q-pt-md':$q.platform.is.mobile}" :style="{'width':$q.platform.is.desktop?'':'100%'}" style="text-align: right;">
                                <div class="row justify-between items-center bg-blue text-white rounded-borders q-px-lg text-weight-bold" :class="{'q-py-md ':$q.platform.is.desktop}" style="position: relative;"
                                :style="{'height':$q.platform.is.desktop?'83px':'83px','width':$q.platform.is.desktop?'350px':'100%'}">
                                    <div style="position: absolute;right: 3px;top: -1px;transform: rotate(90deg);">
                                        <svg-icon color="72B7FF" icon="offer/Bag.svg" :size="18"></svg-icon>
                                    </div>
                                    <span class="q-pr-lg fz16">{{$t('v101.Listofquotation.heji')}}</span>
                                    <span class="fz20 text-white q-pl-lg" style="padding: 0 0 0 150px;">$2000</span>
                                </div>
                            </div>
                        </div>
                        <template v-if="!isGengernal">
                            <q-separator color="grey-3" class="q-my-sm" />
                            <div class="row justify-between ListOfQuotation-btn-form" :style="{'padding':$q.platform.is.desktop?'60px 80px':'30px 40px'}">
                                <div class="row">
                                    <!-- gt-xl gt-lg gt-md gt-sm gt-xs -->
                                    <q-btn class=" inline q-mr-lg" color="blue" @click="saveImage(0)">
                                        <div>{{$t('v101.Listofquotation.btn.dayin')}}</div>
                                    </q-btn>
                                    <q-btn color="blue-4" @click="saveImage(1)" :loading="isGengernal">
                                        <div>{{$t('v101.Listofquotation.btn.xiaza')}}</div>
                                    </q-btn>
                                </div>
                                <div class="row">
                                    <q-btn color="blue">
                                        <div>{{$t('v101.Listofquotation.btn.cjfaipiao')}}</div>
                                    </q-btn>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div v-if="showImg" class="rounded-borders" style="overflow: hidden;width: 80%;height: 100%;"  ref="prin" id="prinbox"><q-img width="100%" height="100%" :src="images" /></div>
            </div>
        </div>
    </div>
    
    
  </template>
  
  <script lang="ts">
  import html2canvas from "html2canvas";
  import print from 'print-js'
  import useMetaModule from '../../module/meta/metaModule'
  import { useI18n } from 'vue-i18n'
  import svgIcon from '../../components/global/svg-icon.vue'
  import { defineComponent, inject, provide, reactive, ref, toRefs, watch } from 'vue'
  import { DirtionmaryHelper } from '../../config/dictionary'
  import { currentRouter } from '../../router'
  import ListHeader from '../../components/hotel/list/ListHeader.vue'
  import ListTable from '../../components/hotel/list/ListTable.vue'
  import HotelTips from '../../components/hotel/list/HotelTips.vue'
  import { date } from 'quasar'
  import ImagePreview from 'src/components/common/ImagePreview.vue'
  export default defineComponent({
    components: { svgIcon, ListHeader, ListTable, HotelTips, ImagePreview },
    setup() {
      const data = reactive({
        model:'',
        isGengernal: false,
        images: '',
        showImg: false,
        formattedString:''
      })
      const timeStamp = Date.now()
      data.formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD')
      let { setTitle } = useMetaModule()
      const { locale, t } = useI18n()
      const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
      pageTitle.value = t('v101.Listofquotation.pageTitle')
      setTitle(pageTitle.value)
  
      const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
      menu.value=1
      const methods = {
        dataURLToBlob(dataurl) {
            let arr = dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
            type: mime
            });
        },
        saveImage(type) {
            
            if (!data.isGengernal) {
            data.isGengernal = true;
            setTimeout(() => {
                let canvasID = document.getElementById("quotationbox");
                let a = document.createElement("a");
                html2canvas(canvasID, {
                    useCORS: true,
                    allowTaint: true,
                    backgroundColor: "#FFFFFF",
                    scale: 1.3,
                    taintTest: false
                    }).then(canvas => {
                        let dom = document.body.appendChild(canvas);
                        dom.style.display = "none";
                        a.style.display = "none";
                        document.body.removeChild(dom);
                        let blob = methods.dataURLToBlob(dom.toDataURL("image/png"));
                        a.setAttribute("href", URL.createObjectURL(blob));
                        var name = `${t('v101.Listofquotation.btn.bjd')}.png`;
                        if (data.model) {
                            name = data.model.Name + `${t('v101.Listofquotation.btn.bjd')}.png`;
                        }
                        a.setAttribute("download", name);
                        document.body.appendChild(a);
                        if(type==1){
                            a.click();
                            URL.revokeObjectURL(blob);
                            document.body.removeChild(a);
                            data.isGengernal = false; 
                        }else{
                            // data.images = URL.createObjectURL(blob)
                            // data.showImg = true
                            const style = '@page {margin:0mm 10mm};'//打印时去掉眉页眉尾
                            print({
                                printable: 'quotationbox',// 标签元素id
                                type: 'html',
                                header: '',
                                targetStyles: ['*'],
                                style
                            }); 

                            setTimeout(()=>{
                                data.isGengernal = false;
                            },3000)
                        }
                    });
                    
                }, 1000);
            } 
        }
      }
      return {
        ...toRefs(data),
        ...methods
      }
    }
  })
  </script>
  
  <style></style>
  