<template>

    <!-- 这个是图片查看器组件，装上后可以通过双击传进来展示的信息进行不同图片的展示（图片上有文字，如你所见，文字是通过style定位上去的。）template中的if判断不同证件id码上不同文字 -->

    <div class="relative -translate-y-2/4 overflow-hidden" style="margin-top: 10px;color: black;" :class="[ needBoxShadow? 'shadow-2xl': '' ]" id="checkPhoto" v-drag>
        

        <!-- 这个部分调整关闭按钮的位置，因为有些图片关闭按钮会覆盖到一些东西 -->
        <template v-if="imgSrcId==15">
            <img class="absolute cursor-pointer hover:bg-red-700 bg-red-50" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 50px; top: 30px;width: 30px;height: 30px;" />
        </template>
        <template v-else-if="imgSrcId==13">
            <img class="absolute cursor-pointer hover:bg-red-700 bg-red-50" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 50px; top: 30px;width: 30px;height: 30px;" />
        </template>
        <template v-else-if="imgSrcId==23">
            <img class="absolute cursor-pointer hover:bg-red-700 bg-red-50" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 50px; top: 30px;width: 30px;height: 30px;" />
        </template>
        <template v-else>
            <img class="absolute cursor-pointer hover:bg-red-700 bg-red-300" src="@/assets/svg/close.svg" alt="" @click="closeIt"  style="right: 3px; top: 3px;width: 30px;height: 30px;" />
        </template>



        <!-- 这个部分就是将文字码上去 -->
        <template v-if="imgSrcId==14">
            <h3 class="text-xl" style="left: 105px;top: 120px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-xl" v-if="dataFlow.sex==1" style="left: 470px;top: 120px;">√</h3>
            <h3 class="text-xl" v-else style="left: 498px;top: 120px;">√</h3>
            <h3 class="text-xl" style="left: 595px;top: 120px;word-spacing: 5px;">{{ dataFlow.birthday.split('-').join('&emsp;&emsp;') }}</h3>
            <h3 class="text-xl" style="left: 104px;top: 146px;">√</h3>
            <h3 class="text-xl" style="left: 100px;top: 175px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-xl" style="left: 120px;top: 243px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-xl" style="left: 356px;top: 243px;">{{ dataFlow.staticPhone }}</h3>
            <h3 class="text-xl" style="left: 676px;top: 218px;">{{ dataFlow.mailNumber }}</h3>
            <h3 class="text-xl" style="left: 80px;top: 263px;">√</h3>
            <h3 class="text-xl" style="left: 110px;top: 195px;">{{ dataFlow.mailbox.slice(0, dataFlow.mailbox.indexOf('省')) }}</h3>
            <h3 class="text-xl" style="left: 200px;top: 195px;">{{ dataFlow.mailbox.slice(dataFlow.mailbox.indexOf('省') + 1, dataFlow.mailbox.indexOf('市'))   }}</h3>
            <h3 class="text-xl" style="left: 290px;top: 195px;">{{ dataFlow.mailbox.slice(dataFlow.mailbox.indexOf('市') + 1, dataFlow.mailbox.indexOf('村' || '区' || '县'))   }}</h3>
            <!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full " :alt="imgSrcName" :title="imgSrcName"> -->
        </template>
        <template v-else-if="imgSrcId==13 || imgSrcId==442 || imgSrcId==23 || imgSrcId==431">
            <h3 class="text-xl" style="left: 96px;top: 82px;">姓名：&nbsp;&nbsp;{{ dataFlow.userName }}</h3>
            <h3 class="text-xl" style="left: 96px;top: 160px;">性别：&nbsp;&nbsp;{{ dataFlow.sex==1? '男': '女' }}</h3>
            <!-- <h3 class="text-xl" style="left: 270px;top: 115px;">汉</h3> -->
            <h3 class="text-xl" style="left: 96px;top: 237px;">生日：&nbsp;&nbsp;{{ dataFlow.birthday }}</h3>
            <!-- <h3 class="text-xl" style="left: 220px;top: 177px;">{{ dataFlow.birthday.split('-')[1] }}</h3>
            <h3 class="text-xl" style="left: 290px;top: 187px;">{{ dataFlow.birthday.split('-')[2] }}</h3> -->
            <h3 class="text-xl text-left" style="left: -200px;top: 282px;width: 100%;">
                <span style="background-color: rgb(223, 230,238); display: inline-block; height: 28px; border-radius: 5px; width: 60px;margin-left: -10px;text-align: right;">地址：</span>
                <span style="margin-left: 10px; display: inline-block;">{{ dataFlow.mailbox }}</span>
            </h3>
            <h3 class="text-xl" style="left: 96px;top: 356px;">NO.：&nbsp;&nbsp;{{ dataFlow.idNumber }}</h3>
            <!-- <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header" :alt="imgSrcName" :title="imgSrcName"> -->
        </template>
        <template v-else-if="imgSrcId==16 || imgSrcId==563" >
            <h3 class="text-4xl text-white" style="left: 300px;top: 35px;">No: {{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-4xl text-white" style="left: 300px;top: 390px;">:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dataFlow.userName }}</h3>
        </template>
        <template v-else-if="imgSrcId==411" >
            <h3 class="text-xl" style="left: 630px;top: 10px;"> {{ dataFlow.ticketNumber }}</h3>
            <h3 class="text-xl" style="left: 690px;top: 70px;">商业银行</h3>
            <h3 class="text-xl" style="left: 680px;top: 95px;">12802851701099</h3>
            <h3 class="text-xl" style="left: 300px;top: 95px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-xl" style="left: 340px;top: 129px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-xl" style="left: 667px;top: 135px;letter-spacing: 2px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
            <h3 class="text-xl" style="left: 300px;top: 172px;">贷款</h3>
            <h3 class="text-xs" style="left: 350px;top: 78px;">{{ mapNumber(getNowYear(0)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(1)>10?'420px':'430px',top: '78px'}">{{ mapNumber(getNowYear(1)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(2)>10?'471px':'485px',top: '78px'}">{{ mapNumber(getNowYear(2)) }}</h3>
            <h3 class="text-xs" style="left: 76px;top: 189px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-xs" style="left: 126px;top: 189px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-xs" style="left: 163px;top: 189px;">{{ getNowYear(2) }}</h3>
        </template>
        <template v-else-if="imgSrcId==412" >
            <h3 class="text-xl" style="left: 630px;top: 10px;">00246862</h3>
            <h3 class="text-xs" style="left: 700px;top: 80px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-xs" style="left: 305px;top: 103px;">六品居股份有限公司</h3>
            <h3 class="text-xs" style="left: 490px;top: 103px;">62270072009899</h3>
            <h3 class="text-xs" style="left: 700px;top: 103px;">12802851701099</h3>
            <h3 class="text-xl" style="left: 340px;top: 130px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-xl" style="left: 682px;top: 140px;letter-spacing: 2px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
            <h3 class="text-xs" :style="{ left: '355px',top: '80px' }">{{ mapNumber(getNowYear(0)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(1)>10?'430px':'445px',top: '80px'}">{{ mapNumber(getNowYear(1)) }}</h3>
            <h3 class="text-xs" :style="{left: getNowYear(2)>10?'482px':'497px',top: '80px'}">{{ mapNumber(getNowYear(2)) }}</h3>
            <h3 class="text-xs" style="left: 80px;top: 194px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-xs" style="left: 128px;top: 194px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-xs" style="left: 167px;top: 194px;">{{ getNowYear(2) }}</h3>
        </template>
        <template v-else-if="imgSrcId==434 || imgSrcId==435" >

            <h3 class="text-xl" style="left: 475px;top: 418px;">：913403005685450862</h3>
            <h3 class="text-xl" style="left: 220px;top: 480px;">：{{ dataFlow.collectingCompany }}</h3>
        </template>
        <template v-else-if="imgSrcId==409" >
            <h3 class="text-xs" style="left: 645px;top: 126px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-xs" style="left: 700px;top: 126px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-xs" style="left: 740px;top: 126px;">{{ getNowYear(2) }}</h3>
            <h3 class="text-xs" style="left: 300px;top: 169px;">备用金</h3>
            <h3 class="text-xs" style="left: 670px;top: 169px;">商业银行</h3>
            <h3 class="text-xs" style="left: 250px;top: 145px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-xs" style="left: 640px;top: 145px;">12802851701099</h3>
            <h3 class="text-xl" style="left: 340px;top: 195px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-lg" style="left: 607px;top: 205px;letter-spacing: 4.8px">{{ ('' + dataFlow.transMoney).padStart(9, 0).padEnd(11, 0) }}</h3>
        </template>
        <template v-else-if="imgSrcId==407" >
            <h3 class="text-lg" style="left: 200px;top: 95px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-lg" style="left: 500px;top: 95px;">{{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-lg" style="left: 170px;top: 137px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-lg" style="left: 170px;top: 158px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-lg" style="left: 450px;top: 158px;">{{ dataFlow.mailbox }}</h3>
        </template> 
        <template v-else-if="imgSrcId==406" >
            <h3 class="text-xl" style="left: 325px;top: 103px;">√</h3>
            <h3 class="text-lg" style="left: 160px;top: 175px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-lg" style="left: 490px;top: 175px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-md" style="left: 160px;top: 205px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.mailbox }}</h3>
            <h3 class="text-md" style="left: 120px;top: 370px;">人民币</h3>
            <h3 class="text-md" style="left: 260px;top: 370px;">{{ dataFlow.voucherNumber }}</h3>
        </template>  
        <template v-else-if="imgSrcId==468" >
            <h3 class="text-xl" style="left: 325px;top: 103px;">√</h3>
            <h3 class="text-lg" style="left: 160px;top: 175px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-lg" style="left: 490px;top: 175px;">{{ dataFlow.idNumber }}</h3>
            <h3 class="text-md" style="left: 160px;top: 205px;">{{ dataFlow.phone }}</h3>
            <h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.mailbox }}</h3>
            <h3 class="text-md" style="left: 120px;top: 370px;">人民币</h3>
            <h3 class="text-md" style="left: 260px;top: 370px;">{{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-md" style="left: 700px;top: 370px;">{{ nowDate }}</h3>
            <h3 class="text-lg" style="left: 560px;top: 405px;">{{ dataFlow.userName }}</h3>
        </template>  
        <template v-else-if="imgSrcId==413" >
            <h3 class="text-lg" style="left: 690px;top: 21px;">{{ getNowYear(0) }}</h3>
            <h3 class="text-lg" style="left: 755px;top: 21px;">{{ getNowYear(1) }}</h3>
            <h3 class="text-lg" style="left: 280px;top: 75px;">{{ dataFlow.collectingCompany }}</h3>
            <h3 class="text-lg" style="left: 620px;top: 75px;">12802851701099</h3>
            <h3 class="text-lg" style="left: 620px;top: 75px;">12802851701099</h3>
            <h3 class="text-lg" style="left: 330px;top: 115px;">10</h3>
            <h3 class="text-lg" style="left: 540px;top: 111px;">00242986</h3>
            <h3 class="text-lg" style="left: 690px;top: 111px;">00242996</h3>
        </template>
        <template v-else-if="imgSrcId==426" >
            <h3 class="text-md" style="left: 180px;top: 205px;">{{ dataFlow.voucherNumber }}</h3>
            <h3 class="text-md" style="left: 450px;top: 205px;">{{ dataFlow.userName }}</h3>
            <h3 class="text-md" style="left: 180px;top: 235px;">6227007200580123</h3>
            <h3 class="text-md" style="left: 450px;top: 235px;">郭平安</h3>
            <h3 class="text-md" style="left: 116px;top: 306px;letter-spacing: 3.3px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>
        </template>
        <template v-else-if="imgSrcId==584 || imgSrcId==582" >
            <div class="coverIt" style="top: 75px; left: 400px;width: 300px;height: 25px;">
                <h3 class="smallFont" style="left: 0px;">{{ mapNumber(getYear2(0, 'drawDate')) }}</h3>
                <h3 class="smallFont" style="left: 50px;font-weight: 700">年</h3>
                <h3 class="smallFont" style="left: 65px;">{{ mapNumber(getYear2(1, 'drawDate')) }}</h3>
                <h3 class="smallFont" style="left: 90px;font-weight: 700">月</h3>
                <h3 class="smallFont" style="left: 104px;">{{ mapNumber(getYear2(2, 'drawDate')) }}</h3>
                <h3 class="smallFont" style="left: 140px;font-weight: 700">日</h3>
            </div>

            <h3 class="text-base" style="left: 250px;top: 126px;">商业银行</h3>
            <h3 class="text-base" style="left: 210px;top: 162px;">12802851701099</h3>

            <h3 class="text-base" style="left: 570px;top: 126px;">六品居股份有限公司</h3>
            
            <h3 class="text-xl" style="left: 340px;top: 230px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-lg" style="left: 560px;top: 242px;letter-spacing: 11.5px">{{ ('' + dataFlow.transMoney).padStart(8, 0).padEnd(10, 0) }}</h3>

            <div class="coverIt" style="top: 270px; left: 180px;width: 200px;height: 20px;line-height: 25px;">
                <h3 class="text-base" style="left: 0px;">{{ mapNumber(getYear2(0, 'expireDate')) }}</h3>
                <h3 class="text-base" style="left: 70px;font-weight: 700">年</h3>
                <h3 class="text-base" style="left: 90px;">{{ mapNumber(getYear2(1, 'expireDate')) }}</h3>
                <h3 class="text-base" style="left: 130px;font-weight: 700">月</h3>
                <h3 class="text-base" style="left: 150px;">{{ mapNumber(getYear2(2, 'expireDate')) }}</h3>
                <h3 class="text-base" style="left: 200px;font-weight: 700">日</h3>
            </div>
        </template>

        <template v-else-if="imgSrcId==430 || imgSrcId==429" >
            <h3 class="text-lg" v-if="imgSrcId==430" style="left: 730px;top: 35px;">{{ dataFlow.oldDepositNumber }}</h3>
            <h3 class="text-lg" v-else style="left: 730px;top: 35px;">{{ dataFlow.newDepositNumber }}</h3>
            <h3 class="text-lg" style="left: 572px;top: 199px;">部分支取</h3>
            <h3 class="text-xl" style="left: 210px;top: 135px;">{{ transMoney(dataFlow.transMoney) }}</h3>
            <h3 class="text-xl" style="left: 590px;top: 135px;">{{ dataFlow.transMoney }}</h3>
        </template>

        <template v-else-if="imgSrcId==428" >
            
            <h3 class="text-lg" style="left: 730px;top: 35px;">{{ dataFlow.nowDepositNumber }}</h3>
        </template>

        <!-- 这里就是要展示的图片 dia-header让它可以带动整个组件被拖拽 因为这里的v-drag会去搜这个组件内的dia-header -->
        <img :src="imgSrc" class="imgPop imgIndex min-w-full dia-header shadow-2xl" :alt="imgSrcName" :title="imgSrcName" ref="showPage">
        
        <slot />
    </div>
    
</template>

<script>
import { mapGetters } from 'vuex'
import { getOperation } from '@/api/http';
import Sortable from 'sortablejs'

export default {
    props: {
        imgSrc: {
            type: String,
            require: true
        },
        imgSrcId: {
            require: true
        },
        imgSrcName: {
            require: true
        },
        showImg: {
            type: Boolean,
            default: false
        }
        // requireTalk: {
        //     type: String,
        //     default: ''
        // },
        // others: {
        //     type: Object,
        //     default: {
        //         left: '0px',
        //         top: '0px'
        //     }
        // }
    },
    data() {
        return {
            nowDate: ''
        }
        
    },
    created() {
        // 获取现在的时间
        this.nowDate = (() => {
            const date = new Date()
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? '0' + m : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;  
            return y + '-' + m + '-' + d; 
        })()
    },
    methods: {
        closeIt() {
            this.$emit('update:showImg', false)
        }
    },
    
    computed: {
        ...mapGetters({
            dataFlow: 'system/dataFlow'
        }),
        getNowYear() {
            return (index) => {
                // 看该业务是否指定日期
                const { assignDate } = this.dataFlow

                if(!assignDate) {
                    return this.nowDate.split('-')[index]
                }else {
                    return assignDate.split('-')[index]
                }
                
            }
        },
        getYear2() {
            return (index, name) => {
                // 看该业务是否指定日期
                const { [name]: tmpName } = this.dataFlow

                if(!tmpName) {
                    const tmpDate = this.nowDate.split('-')[index]
                    return tmpDate
                }else {
                    const tmpDate = tmpName.split('-')[index]
                    return tmpDate
                }
                
            }
        },
        // 业务需求将钱币显示为大写，比如 千 -> 仟 这个方法可以做到 这里是要连起来的 具体看用在哪
        transMoney() {
            return (str) => {
                var num = parseFloat(str);

                var strOutput = "",

                strUnit = '仟佰拾亿仟佰拾萬仟佰拾圆角分';

                num += "00";

                var intPos = num.indexOf('.'); 

                if (intPos >= 0){

                    num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
                }

                strUnit = strUnit.substr(strUnit.length - num.length);

                for (var i=0; i < num.length; i++){

                    strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i,1),1) + strUnit.substr(i,1);

                }
                return strOutput.replace(/零角零分$/, '').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|萬])/g, '$1').replace(/零+圆/, '圆').replace(/亿零{0,3}萬/, '亿').replace(/^圆/, "零圆")
                
            }
        },

        // 业务需求将数字转化为大写 比如 2022.4.20 -> 贰零贰贰 肆 贰拾
        mapNumber() {
            // 通过map映射将相应的数字对应上
            const myMap = new Map([
                ['0', '零'],
                ['1', '壹'],
                ['2', '贰'],
                ['3', '叁'],
                ['4', '肆'],
                ['5', '伍'],
                ['6', '陆'],
                ['7', '柒'],
                ['8', '捌'],
                ['9', '玖']
            ])
            return (str) => {
                let myStr = str + ''
                let strEnd = ''
                if(myStr.length === 4) {
                    for(const val of myStr) {
                        strEnd += myMap.get(val)
                    }
                }else {
                    if(myStr.charAt(0) == '0') {
                        strEnd = myMap.get(myStr.charAt(1))
                    }else if(myStr.charAt(0) == '1') {
                        // console.log('Wok')
                        strEnd = '拾'
                        if(myStr.charAt(1) != '0') {
                            strEnd = strEnd + myMap.get(myStr.charAt(1))
                        }
                    }else {
                        strEnd = myMap.get(myStr.charAt(0)) + '拾'
                        if(myStr.charAt(1) != '0') {
                            strEnd += myMap.get(myStr.charAt(1))
                        }
                    }
                }
                return strEnd
            }
        },

        

        // 众口难调，有些图片就是要大div加上boxshadow才出效果，因为要填字不得不放大
        needBoxShadow() {
            const needShadow = [ 411, 412, 14 ]

            return  needShadow.findIndex(item => item === this.imgSrcId) !== -1 
        }
    }
}
</script>

<style lang="scss" scoped>
    h3 {
        position: absolute;
        z-index: 9990;
        text-align: center;
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        &:hover{
            cursor: text!important;
        }
    }

    .smallFont {
        font-size: 1px;
    }

    .coverIt {
        position: absolute;
        background-color: rgb(255, 255, 255);
    }
</style>