<template>
    <div class="setsuyuan" v-loading="loading"   element-loading-text="正在生成二维码"  element-loading-background="rgba(0, 0, 0, 0.5)">
        <div class="page-content scroll">
            <div class="table-title">
                <img src="../../assets/img/setsuyuan.png" alt="" />
                追溯内容设置
            </div>
            <div class="flex-view"></div>
            <div class="vrcode-selimage">
                <div class="title">顶部图片</div>
                <div class="sel-image-view">
                    <div class="sel-img sel-div" v-for="item, index in imgList" :key="index">
                        <el-image :src="item"></el-image>
                        <div class="del-img" @click="delImage(index)">
                            <img src="../../assets/img/del-image.png" alt="">
                        </div>
                    </div>
                    <label for="sel-img">
                        <div class="sel-image-sel sel-div" v-if="imgList.length < 1">
                            <img src="../../assets/img/add-image.png" alt="">
                        </div>
                    </label>
                    <input ref="fileInput" type="file" multiple id="sel-img" accept="image/*" @change="handleImageChange" />
                </div>
            </div>

            <div class="setsuyuan-tips">*上传图片大小应小于2M,建议尺寸为388x280</div>
            <div class="vrcode-input">
                <div class="input-title">第一行标题</div>
                <input type="text" placeholder="请输入标题" v-model="title1">
            </div>
            <div class="vrcode-input">
                <div class="input-title">第二行标题</div>
                <input type="text" placeholder="请输入标题" v-model="title2">
            </div>
            <div class="setsuyuan-input">
                <div class="setsuyuan-input-name">
                    文字颜色
                </div>
                <el-color-picker v-model="color" show-alpha></el-color-picker>
            </div>
            <div class="setsuyuan-input">
                <div class="setsuyuan-input-name">
                    文字样式
                </div>
                <div class="setsuyuan-input-select">
                    <div @click="select1 = !select1" :class="select1 ? 'sel' : 'no-sel'"></div>
                    加粗
                </div>
                <div class="setsuyuan-input-select">
                    <div @click="select2 = !select2" :class="select2 ? 'sel' : 'no-sel'"></div>
                    斜体
                </div>
            </div>
            <div class="setsuyuan-input">
                <div class="setsuyuan-input-name"></div>
                <div class="setsuyuan-input-select">
                    <div @click="select3 = !select3" :class="select3 ? 'sel' : 'no-sel'"></div>
                    显示阴影
                </div>
            </div>
            <div class="setsuyuan-input">
                <div class="setsuyuan-input-name">
                    阴影颜色
                </div>
                <el-color-picker v-model="color1" show-alpha></el-color-picker>
            </div>
            <div class="setsuyuan-input">
                <div class="setsuyuan-input-name">
                    主体背景颜色
                </div>
                <el-color-picker v-model="color2" show-alpha></el-color-picker>
            </div>
            <div class="flex-view"></div>
            <div class="save-btn" @click="captureScreenshot">保存</div>
        </div>
        <div class="setsuyuan-page">
            <div class="mobile-page mobile-scroll">
                <div ref="targetElement">
                    <div class="mobile-top" :style="`background: url(${imgList[0]}) no-repeat center;`">
                        <div class="title1"
                            :style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
                            {{ title1 }}</div>
                        <div class="title2"
                            :style="`color: ${color};${select3 ? 'text-shadow:' + color1 + '3px -2px 0px;' : ''}font-style: ${select2 ? 'italic' : 'normal'};font-weight: ${select1 ? 'bold' : 'normal'};`">
                            {{ title2 }}</div>
                    </div>
                    <div class="mobile-content" :style="`background-color: ${color2};`">
                        <div class="mobile-view">
                            <div class="mobile-content-title">农场信息</div>
                            <div class="mobile-view-content">
                                <template v-if="userDetail">
                                    <div class="mobile-text">
                                        联系人:{{ userDetail.linkman }}
                                    </div>
                                    <div class="mobile-text">
                                        联系方式:{{ userDetail.contactInformation }}
                                    </div>
                                    <div class="mobile-text">
                                        邮箱地址:{{ userDetail.email }}
                                    </div>
                                    <div class="mobile-text">
                                        农场名称:{{ userDetail.organizationName }}
                                    </div>
                                    <div class="mobile-text">
                                        农场地址:{{ userDetail.organizationAddress }}
                                    </div>
                                    <div class="mobile-text">
                                        农场网址:{{ userDetail.organizationWebsite }}
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="mobile-view" v-for="item, index in plant">
                            <div class="mobile-content-title">种植计划</div>
                            <div class="mobile-view-content">
                                <template v-if="item">
                                    <div class="mobile-text">
                                        名称:{{ item.plantingPlanShort }}
                                    </div>
                                    <div class="mobile-text">
                                        价格:{{ item.numberOfSeeds }}
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog class="vrcode-model" title="提示" :append-to-body="true" :visible.sync="qrModel" width="30%" :before-close="handleClose">
            <div class="vrcode-image" style="text-align: center;">
                <div class="vrcode-model-title" >
                生成的二维码
            </div>
            <img :src="qrCodeUrl" alt="" style="width: 200px;height: 200px;margin-top: 20px;">
            <span slot="footer" class="dialog-footer">
                <el-button @click="qrModel = false">关 闭</el-button>
            </span>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
import QRCode from 'qrcode';

export default {
    data() {
        return {
            imgList: [require('../../assets/img/image.jpeg')],
            title1: '智慧云温室',
            title2: '追溯系统',
            color: 'rgba(255,255,255,1)',
            color1: 'rgba(19, 206, 102, 0.8)',
            color2: 'rgba(19, 206, 102, 0.8)',
            select1: false,
            select2: true,
            select3: false,
            userDetail: null,//农场信息
            plant: [],//计划
            qrCodeUrl: '',//生成的二维码
            qrModel: false,
            loading: false,
        }
    },
    mounted() {
        this.dataInit()
    },
    methods: {
        handleClose() {
            this.qrCodeUrl = ''
        },
        dataInit() {
            var userid = JSON.parse(localStorage.getItem('userInfo')).userid
            var data = {
                userId: userid
            }
            this.api.getAgriculturalInformation(data).then(res => {
            })

            this.api.getplant(data).then(res => {
                if (res.data.code == 200) {
                    this.plant = res.data.data
                }
            })

            this.api.getcodeFarmInformationManagement(data).then(res => {
                if (res.data.code == 200) {
                    this.userDetail = res.data.data
                }
            })

        },
        async captureScreenshot() {
            // 获取目标元素
            this.loading = true
            const targetElement = this.$refs.targetElement;

            // 使用html2canvas生成截图
            const canvas = await html2canvas(targetElement);

            // 将canvas转为图片
            const imageData = canvas.toDataURL('image/png')
            var userid = JSON.parse(localStorage.getItem('userInfo')).userid
            var data = {
                userId: userid,
                base64Data:imageData
            }
            setTimeout(() => {
                this.loading = false
            }, 5000);
            // 创建一个新的窗口显示图片（可以根据需要进行其他操作，比如保存图片）
            this.api.uploadImage(data).then(res=>{
                if(res.data){
                    this.generateQRCode(res.data)
                }
            })
           
            // const imageWindow = window.open();
            // imageWindow.document.write(`<img src="${imageData}" alt="Screenshot"/>`);
        },
        async generateQRCode(imageData) {
            const that = this
            // 生成二维码的数据，这里假设是一个 base64 图片的数据

            // 使用 qrcode 库生成二维码
            QRCode.toDataURL(imageData)
                .then(url => {
                    this.qrCodeUrl = url;
                    this.qrModel = true
                        that.loading = false
                })
                .catch(error => {
                    console.error(error);
                });

        },
        delImage(index) {
            console.log('删除图片', index);
            this.imgList.splice(index, 1);
        },
        handleImageChange(event) {
            const files = event.target.files;
            if (files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();

                    reader.onload = (e) => {
                        this.imgList.push(e.target.result);
                    };

                    reader.readAsDataURL(files[i]);
                }
                this.$refs.fileInput.value = '';
            } else {
                console.log(null);
                   this.$refs.fileInput.value = '';
            }

        }
    },

}
</script>
<style lang="scss"></style>