<template>
    <div class="content-styl" v-loading="loading">
        <div id="A4" v-if="isCome == 'apply'">
            <div class="search-styl">
                <div class="search-content">当前审核项</div>
                <div class="user-info">
                    <div class="name-styl">姓名：{{ baseInfo.name }}</div>
                    <div class="name-styl">身份证号：{{ baseInfo.idcard }}</div>
                </div>
            </div>
            <div class="main">
                <div class="search-head">
                    <p>选择查询内容：</p>
                    <div class="search-info" v-if="isShow === 'reportQuery'">
                        {{ searchData }}
                    </div>
                    <template v-if="isShow === 'applyCheck'">
                        <el-select
                            v-model="searchValue"
                            size="small"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="(item, index) in searchContent"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        <div class="search-btn" @click="searchFun()">查询</div>
                    </template>
                </div>
                <div class="search-neck" v-loading="loadingData">
                    <div class="search-title">查询结果：</div>
                    <div v-for="(arr, index) in records" :key="index">
                        <div class="base-info">
                            {{ arr.orderby }}、{{ arr.name }}
                        </div>
                        <div class="base-table">
                            <div class="nodata" v-if="!arr.data.length">
                                没有查询到符合条件的数据
                            </div>
                            <el-table
                                v-else
                                :data="arr.data"
                                :stripe="true"
                                border
                                style="font-size: 16px"
                                :header-cell-style="{
                                    background: '#F5F7FE',
                                    color: '#606266',
                                }"
                                :cell-style="{ 'text-align': 'center' }"
                            >
                                <template v-for="(item, index1) in arr.keys">
                                    <el-table-column
                                        :label="arr.fieldName[item]"
                                        align="center"
                                    >
                                        <template slot-scope="scope">
                                            {{ scope.row[item] }}
                                        </template>
                                    </el-table-column>
                                </template>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="opinion-styl">
                <div class="opinion-title">初审意见（必填项）</div>
                <div class="check-content" v-if="isShow === 'reportQuery'">
                    {{ textarea }}
                </div>
                <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="请填写初审意见"
                    v-model="textarea"
                    v-if="isShow === 'applyCheck'"
                >
                </el-input>
            </div>
        </div>
        <!-- 报告单页面 -->
        <img src="" alt="" id="image" v-if="isCome == 'report'" />
        <div class="bottom">
            <div class="btn-styl" @click="backFun()">返回</div>
            <template v-if="isCome === 'report'">
                <div class="btn-styl" @click="printImg()">打印</div>
            </template>
            <template v-if="isCome === 'apply'">
                <div class="tip-styl">
                    注意：审批完成后自动生成并下载审批报告
                </div>
                <div class="btn-styl" @click="changeImg('nopass')">不通过</div>
                <div class="btn-styl" @click="changeImg('pass')">通过</div>
            </template>
        </div>
    </div>
</template>

<script>
    import html2canvas from "html2canvas";
    import printJS from "print-js";
    import jsPDF from "jspdf";
    import dayjs from "dayjs";
    let that;

    export default {
        data() {
            return {
                baseInfo: {
                    name: "",
                    idcard: "",
                },
                textarea: "", //审核内容
                searchValue: "", //下拉框选择内容
                isShow: "applyCheck", //展示元素类型
                isCome: "", //图片from
                loading: false,
                loadingData: false,
                records: [],
                searchContent: [],
            };
        },
        computed: {
            searchData() {
                console.log("选择的数据", this.searchContent);
                let val;
                this.searchContent.some((res) => {
                    if (res.id == this.searchValue) val = res.name;
                    return res.id == this.searchValue;
                });
                return val;
            },
        },
        beforeCreate() {
            that = this;
        },
        created() {},
        mounted() {
            this.isCome = this.$route.query.isCome;
            this.baseInfo.name = this.$route.query.name;
            this.baseInfo.idcard = this.$route.query.idcard;
            console.log("传过来的id数据", this.$route.query);
            this.getProductList();
            if (this.isCome == "report") this.getReport(this.$route.query.id);
        },
        methods: {
            //获取报告base64
            getReport(val) {
                this.httpGet(this.$root.api_reportFile, { id: +val })
                    .then((res) => {
                        let imgElement = document.getElementById("image");
                        imgElement.src = res.file;
                    })
                    .catch((err) => {
                        console.log("接口报错", err);
                    });
            },
            //审核提交
            checkFun(flag, baseVal) {
                let data = {
                    productId: this.searchValue,
                    result: flag == "pass" ? 1 : 2,
                    opinion: this.textarea,
                    report: baseVal,
                    name: this.baseInfo.name,
                    idcard: this.baseInfo.idcard,
                };
                this.httpPost(this.$root.api_auditResolve, data)
                    .then((res) => {
                        console.log("审核结果", flag);
                    })
                    .catch((err) => {
                        console.log("接口报错", err);
                    });
            },
            //查询数据
            searchFun() {
                this.loadingData = true;
                console.log("records数据", this.records);
                let data = {
                    ...this.baseInfo,
                    productId: +this.searchValue,
                };
                this.httpGet(this.$root.api_productQuery, data)
                    .then((res) => {
                        this.records = res.records;
                        this.records.forEach((val) => {
                            if (val.data.length == 0) this.$set(val, "keys", []);
                            let keys = Object.keys(val.fieldName);
                            this.$set(val, "keys", keys);
                        });
                        this.loadingData = false;
                    })
                    .catch((err) => {
                        this.loadingData = false;
                        console.log("接口报错", err);
                    });
            },
            //获取下拉框数据
            getProductList() {
                this.httpGet(this.$root.api_productList)
                    .then((res) => {
                        this.searchContent = res.records;
                    })
                    .catch((err) => {
                        console.log("接口报错", err);
                    });
            },
            changeImg(val) {
                if (this.textarea == "") {
                    this.$message.error("请填写初审意见");
                    return;
                }
                this.loading = true;
                this.$nextTick(() => {
                    this.isShow = "reportQuery";
                });
                this.$message("正在下载PDF，请稍后...");
                const shareNode = document.getElementById("A4");
                // const img = document.getElementById("qrcImg"); //画板

                var opts = {
                    scrollY: 0, // 纵向偏移量 写死0 可以避免滚动造成偶尔偏移的现象
                    useCORS: true, // 【重要】开启跨域配置
                    allowTaint: false,
                };
                html2canvas(shareNode, { useCORS: true, logging: true })
                    .then((_canvas) => {
                        let img = new Image();
                        img.src = _canvas.toDataURL();
                        // console.log("图片地址", img.src);
                        this.isShow = "applyCheck";
                        this.checkFun(val, _canvas.toDataURL());
                        this.downPdf(img);
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.isShow = "applyCheck";
                        console.log("转图片有问题");
                    });
            },
            //打印图片
            printImg() {
                this.loading = true;
                let src = document.getElementById("image").src;
                //去掉页眉页脚
                const style = "@page {margin:0 10mm};";
                printJS({
                    printable: src,
                    type: "image",
                    documentTitle: "用户信息",
                    style,
                });
                this.loading = false;
            },
            backFun() {
                this.$router.back();
            },
            //下载pdf
            downPdf(img) {
                console.log("imgs数据", img.src);
                // document.getElementById("image").src = img.src
                setTimeout(() => {
                    //获取img的宽高
                    let width = img.naturalWidth;
                    let height = img.naturalHeight;
                    // let www = img.naturalWidth + 10;
                    console.log("图片的宽高", width, height);
                    //第一个参数： l：横向  p：纵向
                    // 第二个参数：测量单位（"pt"，"mmD", "cm", "m", "in" or "px"）
                    // 第三个参数：可以是下面格式，默认为“a4”
                    const pdf = new jsPDF("l", "px", [width, height]);
                    pdf.addImage(img.src, "png", 0, 10, width, height);
                    // console.log("img图片", img.src);
                    let pdfBase = pdf.output("datauristring"); // 转base64
                    // console.log("base64数据", pdfBase);
                    pdf.save(dayjs().valueOf());
                    this.$message({
                        message: "PDF下载成功！",
                        type: "success",
                    });
                    this.loading = false;
                }, 600);
            },
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    .content-styl {
        padding: 70px 0 150px 0;

        .search-styl {
            .search-content {
                font-size: 16px;
                font-weight: bold;
            }

            .user-info {
                flex-x(flex-start);
                font-size: 13px;

                .name-styl {
                    margin: 22px 76px 0 0;
                }
            }
        }

        .main {
            margin: 10px 0 0 10px;
            padding: 0 0 50px 0;
            border-radius: 5px;
            justify-content: flex-start;

            .search-head {
                flex-x(flex-start);
                padding: 20px 0 14px 20px;
                border-bottom: 2px solid #EEF2F5;

                .search-btn {
                    solid-btn(100px, 32px);
                    margin-left: 25px;
                }

                >>>.el-input--small {
                    width: 350px;
                }

                .search-info {
                    font-size: 18px;
                    font-weight: bold;
                }
            }

            .search-neck {
                padding: 16px 20px 0 20px;

                .search-title {
                    font-size: 16px;
                    font-weight: bold;
                }

                .base-info {
                    font-size: 14px;
                    margin: 18px 0 9px 0;
                    font-weight: bold;
                }

                .base-table {
                    .nodata {
                        margin: 30px 0 80px 0;
                    }

                    .img-styl {
                        width: 60px;
                        height: 60px;
                    }
                }
            }
        }

        .opinion-styl {
            margin: 2px 0 0 10px;
            padding: 15px 20px 20px 20px;
            border-radius: 5px;
            background-color: #ffffff;

            .opinion-title {
                font-weight: bold;
                margin-bottom: 16px;
            }

            .check-content {
                line-height: 1.3;
                padding-bottom: 50px;
            }
        }

        .bottom {
            height: 76px;
            width: 100%;

            .btn-styl {
                solid-btn(100px, 32px);
                margin-right: 16px;
            }

            .tip-styl {
                position: fixed;
                left: 340px;
            }
        }
    }
</style>