<template>
    <div class="box">
        <div class="exp-header">
            <div class="flex-between">
                <div class="per_title" v-preventReClick @click="goback()">
                    <i class="el-icon-arrow-left"></i>
                    <span class="per_back">返回</span>
                    <span class="per_school">查看报告</span>
                </div>
                <div>
                    <el-button type="primary" size="mini" @click="exportPage">导出实验报告</el-button>
                </div>
            </div>
        </div>
        <el-row :gutter="200">
            <el-col :span="24">
                <div id="pdfDom">
                    <h6 style="text-align: center;font-size: 20px">标准实验报告</h6>
                    <div class="flex-center mgb20 user_header">
                        <p class="addhr_tag"></p>
                        <span style="font-size: 18px">基本信息</span>
                    </div>

                    <div>
                        <el-table :data="infoData" class="info-table" style="margin-bottom: 40px" header-align="center">
                            <el-table-column prop="userName" label="学生姓名" align="center">
                            </el-table-column>
                            <el-table-column prop="workNumber" label="学生学号" align="center">
                            </el-table-column>
                            <el-table-column prop="className" label="学生班级" align="center">
                            </el-table-column>
                            <el-table-column prop="teacherName" label="指导老师" align="center">
                            </el-table-column>
                            <el-table-column prop="period" label="实验学时" align="center">
                            </el-table-column>
                            <el-table-column prop="laboratory" label="实验室名称" align="center">
                            </el-table-column>
                            <el-table-column prop="startTime" label="实验时间" align="center">
                            </el-table-column>
                            <el-table-column prop="score" label="实验成绩" align="center">
                            </el-table-column>
                        </el-table>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验项目名称</p>
                        </div>
                        <el-input v-model="form.projectName" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验目的</p>
                        </div>
                        <el-input v-model="form.purpose" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验原理</p>
                        </div>
                        <el-input v-model="form.principle" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验内容</p>
                        </div>
                        <el-input v-model="form.content" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验器材（设备、元器件）</p>
                        </div>
                        <el-input v-model="form.equipment" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验步骤</p>
                        </div>
                        <el-input v-model="form.step" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title">实验数据</p>
                            <!-- <span>得分：50/60</span> -->
                        </div>
                        <el-table :data="sjData" class="table" stripe header-align="center">
                            <el-table-column type="index" width="100" label="序号" align="center">
                                <template slot-scope="scope">
                                    {{scope.$index + 1}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="judgmentPointsName" label="考核点" align="center">
                            </el-table-column>
                            <el-table-column prop="userAnswers" label="学生答案" align="center">
                                <template slot-scope="scope">
                                    <pre v-html="scope.row.userAnswers"></pre>
                                </template>
                            </el-table-column>
                            <el-table-column prop="referenceAnswer" label="参考答案" align="center">
                                <template slot-scope="scope">
                                    <div v-html="scope.row.referenceAnswer"></div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="score" label="得分" align="center">
                            </el-table-column>
                        </el-table>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验数据及结果分析</p>
                        </div>
                        <div class="reportCard_view reportCard_bck mat20" v-if="pattern == 0">
                                <div class="reportCard_bor mat20">
                                <div class="flex-between ">
                                 <div>
                                    <div class="flex-between">
                                    <div class="flex-center">
                                        <p class="hr_tag"></p>
                                        <span class="hr_text"> &nbsp;&nbsp;现货盈亏</span>
                                    </div>
                                    </div>
                                    <el-table :data="patternOne.goodsData" :span-method="objectSpanMethod"  stripe header-align="center" class="mat10">
                                        <el-table-column prop="name" label="现货" align="center"></el-table-column>
                                        <el-table-column prop="num" label="数量" align="center"></el-table-column>
                                        <el-table-column prop="time"  label="时间" align="center"></el-table-column>
                                        <el-table-column prop="price" label="价格" align="center"></el-table-column>
                                        <el-table-column prop="marketValue" label="现货市值" align="center"></el-table-column>
                                        <el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column>
                                    </el-table>
                                </div>
                                <div class="add_img">
                                    <img src="../../assets/img/add.png" alt="">
                                </div>
                                <div>
                                    <div class="flex-between">
                                    <div class="flex-center">
                                        <p class="hr_tag"></p>
                                        <span class="hr_text"> &nbsp;&nbsp;期权盈亏</span>
                                    </div>
                                    </div>
                                    <el-table :data="patternOne.futuresData" :span-method="objectSpanMethod1"  stripe header-align="center" class="mat10">
                                        <el-table-column prop="name" label="期权名称" align="center"></el-table-column>
                                        <el-table-column prop="dir" label="交易方向" align="center"></el-table-column>
                                        <el-table-column prop="num"  label="数量" align="center"></el-table-column>
                                        <el-table-column prop="time" label="时间" align="center"></el-table-column>
                                        <el-table-column prop="price" label="价格" align="center"></el-table-column>
                                        <el-table-column prop="marketValue" label="期权市值" align="center"></el-table-column>
                                        <el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column>
                                    </el-table>
                                </div>
                                <div class="add_img">
                                    <img src="../../assets/img/equal.png" alt="">
                                </div>
                                <div>
                                    <div class="flex-between">
                                        <div class="flex-center">
                                            <p class="hr_tag"></p>
                                            <span class="hr_text"> &nbsp;&nbsp;策略总盈亏</span>
                                        </div>
                                    </div>
                                    <el-table :data="patternOne.futuresLoss" stripe header-align="center" class="mat10">
                                       <el-table-column prop="futuresLoss" width="110" label="策略总盈亏" align="center"></el-table-column>
                                    </el-table>
                                </div>
                                </div>
                                <div class="mat20">
                                <div class="flex-between">
                                    <div class="flex-center">
                                        <p class="hr_tag"></p>
                                        <span class="hr_text"> &nbsp;&nbsp;套期保值率</span>
                                    </div>
                                </div>
                                <el-table :data="patternOne.hisPositionData1" stripe header-align="center" class="mat10" >
                                    <el-table-column prop="percent" label="套期保值率"  align="center"></el-table-column> </el-table>
                                </div>
                                </div>
                            </div>
                        <div class="reportCard_bor mat20" v-if="pattern == 1">
                                <div class="history_content">
                                    <div >
                                        <div class="flex-between">
                                            <div class="flex-center">
                                                <p class="hr_tag"></p>
                                                <span class="hr_text"> &nbsp;&nbsp;现货盈亏情况</span>
                                            </div>
                                        </div>
                                        <div>
                                           <el-table
                                            :data="patternTwo.goodsData"
                                            stripe
                                            header-align="center"
                                            class="mat10"
                                            >
                                                <el-table-column prop="endTime" label="数据时间" width="180" align="center"></el-table-column>
                                                <el-table-column prop="timeForStock" label="持仓时间段"  align="center"></el-table-column>
                                                <el-table-column prop="stackName" label="现货" align="center"></el-table-column>
                                                <el-table-column prop="trading" label="头寸" align="center"></el-table-column>
                                                <el-table-column prop="num" label="数量"  align="center"></el-table-column>
                                                <el-table-column prop="startPrice" label="启始价格"  align="center"></el-table-column>
                                                <el-table-column prop="stockPrice" label="当日价格"  align="center"></el-table-column>
                                                <el-table-column prop="stageLoss" label="阶段盈亏"  align="center"></el-table-column>
                                                <el-table-column prop="totalLossDto" label="累计盈亏"  align="center"></el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                <div>
                                    <div class="flex-between">
                                            <div class="flex-center">
                                                <p class="hr_tag"></p>
                                                <span class="hr_text"> &nbsp;&nbsp;期权持仓与盈亏情况</span>
                                            </div>
                                        </div>
                                    <div>
                                        <el-table
                                        :data="patternTwo.hisPositionData"
                                        stripe
                                        header-align="center"
                                        class="mat10"
                                        >
                                            <el-table-column prop="openTime" label="数据时间" width="180" align="center"></el-table-column>
                                            <el-table-column prop="endTime" label="持仓时间段"  align="center"></el-table-column>
                                            <el-table-column prop="optionName" label="期权合约名称"  align="center"></el-table-column>
                                            <el-table-column prop="trading" label="交易方向" align="center"></el-table-column>
                                            <el-table-column prop="num" label="数量（手）" align="center"></el-table-column>
                                            <el-table-column prop="openPrice" label="启始价格"  align="center"></el-table-column>
                                            <el-table-column prop="endPrice" label="当日价格"  align="center"></el-table-column>
                                            <el-table-column prop="totalLoss" label="阶段盈亏"  align="center"></el-table-column>
                                            <el-table-column prop="delta" label="当日delta"  align="center"></el-table-column>
                                            <el-table-column prop="totalLoss" label="累计盈亏"  align="center"></el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <div>
                                    <el-table
                                    :data="patternTwo.hisPositionData1"
                                    stripe
                                    header-align="center"
                                    class="mat10"
                                    >
                                        <el-table-column prop="totalLoss" label="总盈亏"  align="center"></el-table-column>
                                        <el-table-column prop="percent" label="套期保值率"  align="center"></el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </div>
                        <div class="reportCard_view reportCard_bck mat20" v-if="pattern == 2">
                            <div class="flex-center">
                                <p class="hr_tag"></p>
                                <span class="hr_text">实验数据</span>
                            </div>
                            <div class="reportCard_bor mat20">
                                <div class="flex-between ">
                                 <div>
                                    <div class="flex-between">
                                    <div class="flex-center">
                                        <p class="hr_tag"></p>
                                        <span class="hr_text"> &nbsp;&nbsp;现货盈亏</span>
                                    </div>
                                    </div>
                                    <el-table :data="patternThree.goodsData" :span-method="objectSpanMethod"  stripe header-align="center" class="mat10">
                                        <el-table-column prop="name" label="现货" align="center"></el-table-column>
                                        <el-table-column prop="num" label="数量" align="center"></el-table-column>
                                        <el-table-column prop="time"  label="时间" align="center"></el-table-column>
                                        <el-table-column prop="price" label="价格" align="center"></el-table-column>
                                        <el-table-column prop="marketValue" label="现货市值" align="center"></el-table-column>
                                        <el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column>
                                    </el-table>
                                </div>
                                <div class="add_img">
                                    <img src="../../assets/img/add.png" alt="">
                                </div>
                                <div>
                                    <div class="flex-between">
                                    <div class="flex-center">
                                        <p class="hr_tag"></p>
                                        <span class="hr_text"> &nbsp;&nbsp;期货盈亏</span>
                                    </div>
                                    </div>
                                    <el-table :data="patternThree.futuresData" :span-method="objectSpanMethod1"  stripe header-align="center" class="mat10">
                                        <el-table-column prop="name" label="期货名称" align="center"></el-table-column>
                                        <el-table-column prop="dir" label="交易方向" align="center"></el-table-column>
                                        <el-table-column prop="num"  label="数量" align="center"></el-table-column>
                                        <el-table-column prop="time" label="时间" align="center"></el-table-column>
                                        <el-table-column prop="price" label="价格" align="center"></el-table-column>
                                        <el-table-column prop="marketValue" label="期货市值" align="center"></el-table-column>
                                        <el-table-column prop="proftAndLoss" label="累计盈亏" align="center"></el-table-column>
                                    </el-table>
                                </div>
                                <div class="add_img">
                                    <img src="../../assets/img/equal.png" alt="">
                                </div>
                                <div>
                                    <div class="flex-between">
                                        <div class="flex-center">
                                            <p class="hr_tag"></p>
                                            <span class="hr_text"> &nbsp;&nbsp;策略总盈亏</span>
                                        </div>
                                    </div>
                                    <el-table :data="patternThree.futuresLoss" stripe header-align="center" class="mat10">
                                       <el-table-column prop="futuresLoss" width="110" label="策略总盈亏" align="center"></el-table-column>
                                    </el-table>
                                </div>
                                </div>
                                <div class="mat20">
                                <div class="flex-between">
                                    <div class="flex-center">
                                        <p class="hr_tag"></p>
                                        <span class="hr_text"> &nbsp;&nbsp;套期保值率</span>
                                    </div>
                                </div>
                                <el-table :data="patternThree.hisPositionData1" stripe header-align="center" class="mat10" >
                                    <el-table-column prop="level" label="套期保值率"  align="center"></el-table-column>
                                </el-table>
                                </div>
                                </div>
                            </div>
                        <div v-if="pattern == 3">
                            <div v-for="item in patternFour.reportList" :key="item.id" class="item_wrap">
                                <div class="select_wrap">
                                    {{item.id + 1}}
                                </div>
                                <div class="table_wrap">
                                    <el-table :data="item.tableData" stripe header-align="center" border  :span-method="mergeColumn">
                                        <el-table-column  prop="arbitrageDirection" align="center" label="套利方向"  ></el-table-column>
                                        <el-table-column  prop="futureName" align="center" label="合约"  ></el-table-column>
                                        <el-table-column  prop="transactionTime" align="center" label="开仓时间"  ></el-table-column>
                                        <el-table-column  align="center" label="开仓方向"  >
                                            <template slot-scope="scope">{{scope.row.tradeDirection == 'BUY'?'买入':'卖出'}}</template>
                                        </el-table-column>
                                        <el-table-column  align="center" label="开仓价"  >
                                            <template slot-scope="scope">
                                                {{scope.row.price}}元/吨
                                            </template>
                                        </el-table-column>
                                        <el-table-column  prop="closeTime" align="center" label="平仓时间"  ></el-table-column>
                                        <el-table-column  prop="closeType" align="center" label="平仓方式"  ></el-table-column>
                                        <el-table-column  prop="closePrice" align="center" label="平仓价"  ></el-table-column>
                                        <el-table-column  prop="count" align="center" label="数量"  >
                                            <template slot-scope="scope">
                                                {{scope.row.futureName.includes('现货')? `${scope.row.quantity}(吨)`:`${scope.row.quantity}(手)`}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column  prop="profit" align="center" label="合约盈亏"  ></el-table-column>
                                        <el-table-column  prop="closeProfit" align="center" label="持仓成本损益"  ></el-table-column>
                                        <el-table-column  prop="totalProfit" align="center" label="总盈亏"  ></el-table-column>
                                        <el-table-column  prop="annualizedRate" align="center" label="年化收益率"  ></el-table-column>
                                    </el-table>
                                    <!-- 折线图区域 -->
                                    <div class="chart_wrap">
                                        <div class="chart_one">
                                        <div class="line_wrap">
                                            <div :id="'line_contentOne' + item.id" class="line_content"></div>
                                        </div>
                                    </div>
                                    <div class="chart_two">
                                        <div class="chart_two_title">无套利区间</div>
                                        <div class="line_wrap">
                                            <div :id="'line_contentTwo' + item.id" class="line_content"></div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-input style="margin-top: 20px" v-model="form.analysis" type="textarea" :disabled="true" rows="5"></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 实验结论</p>
                        </div>
                        <el-input type="textarea" v-model="form.conclusion" rows="5" disabled></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 总结及心得体会</p>
                        </div>
                        <el-input type="textarea" v-model="form.summarize" rows="5" disabled></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 对本实验过程及方法、手段的改进建议</p>
                        </div>
                        <el-input type="textarea" rows="5" v-model="form.improvement" disabled></el-input>
                    </div>

                    <div class="mgb20">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 老师评语</p>
                        </div>
                        <el-input type="textarea" rows="5" v-model="form.comment" disabled></el-input>
                    </div>

                    <div class="mgb20" v-if="form.isSignature">
                        <div class="meta-title-wrap">
                            <p class="meta-title"><i class="el-icon-discount"></i> 老师签名</p>
                        </div>
                        <img :src="signSrc" alt="" style="max-width: 400px;">
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts';
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
        data (){
            return {
                id: this.$route.query.id,
                title: '实验报告',
                userId: this.$store.state.userId,
                studentId: this.$store.state.studentId,
                userName: this.$store.state.userName,
                pattern:Number(sessionStorage.getItem('pattern')),
                form: {
                    analysis: '',
                    conclusion: '',
                    content: '',
                    equipment: '',
                    data: '',
                    purpose: '',
                    experimentId: '',
                    experimentalClassName: '',
                    improvement: '',
                    laboratory: '',
                    period: '',
                    principle: '',
                    projectName: '',
                    score: 0,
                    step: '',
                    submitTime: '',
                    summarize: '',
                    teacherName: '',
                    userId: this.userId,
                    userName: this.userName,
                    workNumber: '',
                    analysis: '',
                    comment: ''
                },
                signSrc: '',
                patternOne:{
                    goodsData:[],
                    futuresData:[],
                    futuresLoss:[],
                    hisPositionData1:[]
                },
                patternTwo:{
                    goodsData:[],
                    hisPositionData:[],
                    hisPositionData1:[]
                },
                patternThree:{
                    goodsData:[],
                    futuresData:[],
                    futuresLoss:[],
                    hisPositionData1:[]
                },
                patternFour:{
                    reportList:[]
                },
                sjData: [],
                infoData: [],
                expData: [],
            }
        },
        mounted(){
            this.getData()
            this.getSgin()
        },
        methods: {
              //合并持仓指定列
            mergeColumn({ row, column, rowIndex, columnIndex }){
                if(columnIndex == 0 || columnIndex == 11 || columnIndex == 12){
                    if (rowIndex % 2 === 0) {
                        return {
                          rowspan: 2,
                          colspan: 1
                        };
                    } else {
                        return {
                          rowspan: 0,
                          colspan: 0
                        };
                    }
                }
            },
            //渲染echart表单
            drawChart(){
                this.patternFour.reportList.forEach(item =>{
                    setTimeout(() => {
                        let myChart = echarts.init(document.getElementById('line_contentOne' + item.id));
                        let myChartTwo = echarts.init(document.getElementById('line_contentTwo' + item.id));
                        myChart.setOption(item.option);
                        myChartTwo.setOption(item.optionTwo);
                    }, 500);
                })
            },
            getData(){
                let data = {
                    reportId: this.id,
                    userId: this.userId,
                }
                this.$get(this.api.getReport,data).then(res => {
                    let report = res.data.experimentalReportEntity
                    let steps = []
                    for(let i in report){
                        if(i.includes('steps') && report[i]) steps.push(JSON.parse(report[i]))
                    }
                    this.form = report
                    switch(this.pattern)
                        {
                            case 0:
                                if(report.steps9){
                                    let steps9 = JSON.parse(report.steps9)
                                    this.patternOne.goodsData = steps9.goodsData ? steps9.goodsData: []
                                    this.patternOne.futuresData = steps9.futuresData ? steps9.futuresData: []
                                    this.patternOne.futuresLoss = steps9.futuresLoss ? steps9.futuresLoss: []
                                    this.patternOne.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: []
                                }
                            break;
                            case 1:
                                if(report.steps9){
                                    let steps9 = JSON.parse(report.steps9)
                                    this.patternTwo.goodsData = steps9.goodsData ? steps9.goodsData: []
                                    this.patternTwo.hisPositionData = steps9.hisPositionData ? steps9.hisPositionData: []
                                    this.patternTwo.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: []
                                }
                            break;
                            case 2:
                                if(report.steps9){
                                    let steps9 = JSON.parse(report.steps9)
                                    this.patternThree.goodsData = steps9.goodsData ? steps9.goodsData: []
                                    this.patternThree.futuresData = steps9.futuresData ? steps9.futuresData: []
                                    this.patternThree.futuresLoss = steps9.futuresLoss ? steps9.futuresLoss: []
                                    this.patternThree.hisPositionData1 = steps9.hisPositionData1 ? steps9.hisPositionData1: []
                                }
                            break;
                            case 3:
                                if(report.steps6){
                                    let steps6 = JSON.parse(report.steps6)
                                    console.log(steps6);
                                    
                                    this.patternFour.reportList = steps6 ? steps6: []
                                    console.log(this.patternFour.reportList);
                                    
                                    this.drawChart()
                                }
                            break
                            
                        }
                        
                    
                    
                    let score = res.data.score
                    let answerList = []
                    for(let i in res.data.userAnswersList){
                        answerList = answerList.concat(res.data.userAnswersList[i])
                    }
                    let sjData = []
                    answerList.map(n => {
                        if(n.type == 1){
                            this.$post(this.api.queryItem,n.levelThree)
                            .then((res) => {
                                n.levelFour = res.subject.find(e => e.id == n.levelFour).itemDescription
                            }).catch((err) => {})
                        }
                    })
                    let ids = []
                    setTimeout(() => {
                        score.map(n => {
                            let item = answerList.find(e => e.tradingJudgmentPointsId == n.tradingJudgmentPointsId)
                            sjData.push({
                                judgmentPointsName: item.judgmentPointsName,
                                userAnswers: n.userAnswers,
                                referenceAnswer: item.levelFour,
                                score: n.userScore,
                                type: n.type
                            })
                            n.type == 1 && ids.push(`ids=${n.userAnswers}`)
                        })
                        this.$get(`${this.api.getItemContentByIds}?${ids.join('&')}`).then((res) => {
                            let list = res.data
                            sjData.map(n => {
                                if(n.type == 1){
                                    let item = list.find(e => e.id == n.userAnswers)
                                    if(item) n.userAnswers = item.itemDescription
                                }
                            })
                        }).catch((err) => {})
                    },500)

                    this.sjData = sjData
                    this.infoData.push({
                        workNumber: report.workNumber,
                        className: report.className,
                        teacherName: report.teacherName,
                        period: report.period,
                        laboratory: report.laboratory,
                        startTime: report.creationTime,
                        score: report.score,
                        userName: this.userName
                    })
                }).catch(res => {})
            },
            //合并行
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
                if (rowIndex % 2 === 0) {
                return {
                    rowspan: 2,
                    colspan: 1
                };
                } else {
                return {
                    rowspan: 0,
                    colspan: 0
                };
                }
            }
            },
            //合并行
            objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 6) {
                if (rowIndex % 2 === 0) {
                return {
                    rowspan: 2,
                    colspan: 1
                };
                } else {
                return {
                    rowspan: 0,
                    colspan: 0
                };
                }
            }
            },
            getSgin(){
                let data = {
                    reportId: this.id
                }
                this.$get(this.api.reportSignature,data).then(res => {
                    this.signSrc = res.data.signatureUrl
                }).catch(res => {})
            },
            goback(){
                this.$router.go(-1)
            },
            exportPage(){
                var title = this.title;
                html2Canvas(document.querySelector('#pdfDom'), {
                    allowTaint: true
                }).then(function (canvas) {
                    let contentWidth = canvas.width
                    let contentHeight = canvas.height
                    let pageHeight = contentWidth / 592.28 * 841.89
                    let leftHeight = contentHeight
                    let position = 0
                    let imgWidth = 595.28
                    let imgHeight = 592.28 / contentWidth * contentHeight
                    let pageData = canvas.toDataURL('image/jpeg', 1.0)
                    let PDF = new JsPDF('', 'pt', 'a4')
                    if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                    } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        if (leftHeight > 0) {
                        PDF.addPage()
                        }
                    }
                    }
                    PDF.save(title + '.pdf')
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.chart_two_title{
    height: 60px;
    line-height: 60px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #3D8BF7;
}
.chart_one{
    padding: 50px 120px;
    box-sizing: border-box;
}
.chart_two{
    margin: 20px 40px;
    padding: 10px 50px;
    border: 3px solid #3D8BF7;
    box-sizing: border-box;
}
.chart_wrap{
    box-sizing: border-box;
    border: 2px solid #3D8BF7;
    border-left: none;
}
.line_wrap{
    height: 400px;
    width: 100%;
    background: rgb(248, 245, 245);
    .line_content{
        width: 100%;
        height: 100%;
    }
    .design_chart_empty{
        background: url(../../assets/img/offshelf.png) 58% 50% no-repeat;
        background-size: 250px ;
    }
}
.item_wrap{
    display: flex;
    // justify-content: center;
    margin-left:60px ;
    align-items: center;
    padding: 0px 20px;
    position: relative;
    .table_wrap{
        width: 90%;
        box-sizing: border-box;
        margin-left: 80px;
    }
    
}
.select_wrap{
    text-align: center;
    width: 80px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #3D8BF7;
}
.mat10{
    margin-top: 10px;
    margin-bottom: 10px;
} 
.reportCard_view {
    padding: 20px 40px;
}
.reportCard_bck {
    background-color: #f9f9f9;
}
.add_img{
    img{
        width: 80px;
        min-width: 50px;
        max-width: 100px;
    }
}
.reportCard_bor {
    width: 100%;
    overflow: auto;
    border: 1px solid #b2b2b2;
    border-radius: 6px;
    padding: 20px 10px;
}
    .box{
        background-color: #fff;
    }
    .exp-header{
        padding: 20px 100px;
        box-shadow:0px 0px 25px 2px rgba(48,115,248,0.14);
        z-index: 999;
        margin-top: 2px;
    }
    /deep/.el-textarea.is-disabled .el-textarea__inner{
        background-color: #ebfafd;
    }
    #pdfDom{
        padding: 100px;
        /deep/.info-table{
        border: 0;
        th{
            background-color: #fff !important;
            .cell{
                color: #444;
            }
        }
        tr{
            border: 0;
        }
        tr:hover,tr:hover>td{
            background-color: #c6f2f8 !important;
        }
        td{
            border: {
                left: 4px solid #fff;
                right: 4px solid #fff;
            }
            &:first-child{
                border-left: 0;
            }
            &:last-child{
                border-right: 0;
            }
            background-color: #c6f2f8;
            border-bottom: 0;
        }
        }
        /deep/.table th{
            background-color: #a2a2a2 !important;
        }
    }
    
    /deep/.cell{
        font-size: 12px;
    }
    /deep/.el-row{
        padding-top: 20px;
        margin: 0 !important;
    }
    .form-item{
        display: flex;
        align-items: center;
    }
    .form-item .el-input{
        width: auto;
    }
    .form-item span{
        margin-right: 10px;
    }
    .meta-title-wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            font-size: 13px;
            color: #444;
        }
    }
    .flex-between{
        span{
            font-size: 13px;
            color: #444;
        }
    }
    .meta-title{
        display: flex;
        align-items: center;
        padding: 10px 20px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #fff;
        background-color: #328aff;
        i{
            margin-right: 10px;
        }
    }
    .step-title{
        margin-bottom: 10px;
        font-size: 16px;
        color: #328aff;
    }
    .bd-title{
        padding-top: 20px;
        border-top: 1px dashed #ccc;
    }
    /deep/.data-wrap{
        display: flex;

    }
</style>