<template>
    <div class="app-container">
      <el-card>
          <el-row :gutter="6"> 
            <el-date-picker
                v-model="listQuery.task2__year"
                type="year"
                placeholder="选择年"
                value-format="yyyy"
                style="width:200px"
            >
            </el-date-picker>
            <el-button
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >查看</el-button>
            <el-button
                type="primary"
                @click="handlePrint"
                >打印</el-button
            >
          </el-row>
      </el-card>
      <el-card style="margin-top:10px">
        <div ref="print" id="myReport" class="printContainer">
            <h3 style="text-align: center;">{{ fileName }}</h3>
            <p v-if="fileName!==''" style="text-align: center;">{{ listQuery.task2__year }}年 </p>
            <!-- 5个目标值 -->
            <el-row id="echartsContainer">
                <el-col  class="chartsWrap" style="">
                    <div id="main" style="width:1800px;height:300px;margin-left: 10px;"></div>
                </el-col>
                <el-col  class="chartsWrap" style="">
                    <div id="main2" style="width:1800px;height:300px;margin-left: 10px;"></div>
                </el-col>
                <el-col  class="chartsWrap" style="">
                    <div id="main3" style="width:1800px;height:300px;margin-left: 10px;"></div>
                </el-col>
                <el-col  class="chartsWrap" style="">
                    <div id="main4" style="width:1800px;height:300px;margin-left: 10px;"></div>
                </el-col>
            </el-row>
        </div>
      </el-card>
    </div>
  </template>
<script>
    import { getTask2Do } from "@/api/task";
    import { getOrgList, getSubOrgList } from "@/api/org";
    import checkPermission from "@/utils/permission";
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                timeStamp:0,
                listQuery:{
                    task2__year:'',
                    page:0
                },
                xaxis:[],
                deptName:'',
                fileName:'',
            };
        },
        mounted() {
            this.getGroup();
            
        },
        methods: {
            // handleFilter(){
            //     let that = this;
            //     if(that.listQuery.belong_dept!==''){
            //         if(that.listQuery.task2__year!==''){
            //             that.bar1Data = [];
            //             that.bar2Data = [];
            //             that.line1Data = [];
            //             that.line2Data = [];
            //             that.line3Data = [];
            //             that.line4Data = [];
            //             that.fileName = that.deptName;
            //             that.tableData1 = [];
            //             that.tableDatas = [ [],[],[],[],[],[],[],[],[],[],[],[],[]];
            //             getTask2Do(that.listQuery).then(res=>{
            //                 let data = res.data.filter(item=>{
            //                     return item.task2_.type==20
            //                 });
            //                 data.forEach(element => {
            //                     let obj = element;
            //                     if(element.num_issue!==null&&element.num_error!==null&&element.num_issue!==0){
            //                         let rate1 = ((element.num_issue-element.num_error)/element.num_issue).toFixed(4)
            //                         obj.rate1 = Number(rate1)*100
            //                     }else{
            //                         obj.rate1 = ''
            //                     }
            //                     if(element.num_expect!==null&&element.num_issue!==null&&element.num_expect!==0){
            //                         let rate2 = (element.num_issue/element.num_expect).toFixed(4)
            //                         obj.rate2 = Number(rate2)*100
            //                     }
            //                     else{
            //                         obj.rate2 = ''
            //                     }
            //                     if(element.num_pt!==null&&element.num_pt_10!==null&&element.num_pt!==0){
            //                         let rate3 = (element.num_pt_10/element.num_pt).toFixed(4)
            //                         obj.rate3 =  Number(rate3)*100
            //                     }
            //                     else{
            //                         obj.rate3 = ''
            //                     }
            //                     if(element.num_complaint!==null&&element.num_complaint_10!==null&&element.num_complaint!==0){
            //                         let rate4 = (element.num_complaint_10/element.num_complaint).toFixed(4)
            //                         obj.rate4 =  Number(rate4)*100
            //                     }
            //                     else{
            //                         obj.rate4 = ''
            //                     }
            //                     let ind = element.task2_.cycle-1;
            //                     that.tableData1[ind] = obj;
            //                 });
            //                 for (let i = 0; i < that.tableData1.length; i++) {
            //                     let item = that.tableData1[i];
            //                     if(item!==undefined){
            //                         for(let j = 0; j < that.tableDatas.length; j++){
            //                             that.tableDatas[j][i] =  
            //                             j==0?item.num_acc:
            //                             j==1?item.num_issue:
            //                             j==2?item.num_error:
            //                             j==3?item.rate1:
            //                             j==4?item.num_expect:
            //                             j==5?item.num_issue:
            //                             j==6?item.rate2:
            //                             j==7?item.num_pt:
            //                             j==8?item.num_pt_10:
            //                             j==9?item.rate3:
            //                             j==10?item.num_complaint:
            //                             j==11?item.num_complaint_10:
            //                             item.rate4;
            //                         }
            //                     } 
            //                 }
            //                 that.timeStamp++;
            //                 for(let k=0;k<that.tableDatas.length;k++){
            //                     let num = 0;
            //                     let num1 = that.tableDatas[k][0]?that.tableDatas[k][0]:0;
            //                     let num2 = that.tableDatas[k][1]?that.tableDatas[k][1]:0;
            //                     let num3 = that.tableDatas[k][2]?that.tableDatas[k][2]:0;
            //                     let num4 = that.tableDatas[k][3]?that.tableDatas[k][3]:0;
            //                     let num5 = that.tableDatas[k][4]?that.tableDatas[k][4]:0;
            //                     let num6 = that.tableDatas[k][5]?that.tableDatas[k][5]:0;
            //                     if(k==3){
            //                         num =  ((that.tableDatas[1][7]-that.tableDatas[2][7])/that.tableDatas[1][7]).toFixed(4)
            //                     }else if(k==6){
            //                         num = (that.tableDatas[5][7]/that.tableDatas[4][7]).toFixed(4)
            //                     }else if(k==9){
            //                         num =(that.tableDatas[8][7]/that.tableDatas[7][7]).toFixed(4)
            //                     }else if(k==12){
            //                         num = (that.tableDatas[11][7]/that.tableDatas[10][7]).toFixed(4)
            //                     }else{
            //                         num = Number(num1)+Number(num2)+Number(num3)+Number(num4)+Number(num5)+Number(num6);
            //                     }
            //                     if(num!=='NaN'&&num!==NaN){
            //                         if(k==3||k==6||k==9||k==12){
            //                             // debugger;
            //                             console.log(parseFloat((Number(num)*100)))
            //                             // parseFloat((Number(num)*100).toPrecision(12))
            //                             let numbe = parseFloat((Number(num)*100).toPrecision(12));
            //                             that.tableDatas[k][7] = numbe;
            //                         }else{
            //                             that.tableDatas[k][7] = num;
            //                         }
            //                     }else{
            //                         that.tableDatas[k][7] = ''
            //                     }
            //                 }
                            
            //                 for(let i=0;i<6;i++){
            //                     if(that.tableDatas[1][i]!==undefined){
            //                         that.bar1Data.push(Number(that.tableDatas[1][i]))
            //                     }else{
            //                         that.bar1Data.push(0)
            //                     }
            //                     if(that.tableDatas[4][i]!==undefined){
            //                         that.bar2Data.push(Number(that.tableDatas[4][i]))
            //                     }else{
            //                         that.bar2Data.push(0)
            //                     }
            //                     if(that.tableDatas[3][i]!==undefined){
            //                         that.line1Data.push(Number(that.tableDatas[3][i]))
            //                     }else{
            //                         that.line1Data.push(0)
            //                     }
            //                     if(that.tableDatas[6][i]!==undefined){
            //                         that.line2Data.push(Number(that.tableDatas[6][i]))
            //                     }else{
            //                         that.line2Data.push(0)
            //                     }
            //                     if(that.tableDatas[9][i]!==undefined){
            //                         that.line3Data.push(Number(that.tableDatas[9][i]))
            //                     }else{
            //                         that.line3Data.push(0)
            //                     }
            //                     if(that.tableDatas[12][i]!==undefined){
            //                         that.line4Data.push(Number(that.tableDatas[12][i]))
            //                     }else{
            //                         that.line4Data.push(0)
            //                     }
            //                 }
            //                 that.bar1Option.series[0].data = that.bar1Data;
            //                 that.bar2Option.series[0].data = that.bar2Data;
            //                 that.line1Option.series[0].data = that.line1Data;
            //                 that.line2Option.series[0].data = that.line2Data;
            //                 that.line3Option.series[0].data = that.line3Data;
            //                 that.line4Option.series[0].data = that.line4Data;

            //                 that.barChart1.clear();
            //                 that.barChart1.setOption(that.bar1Option);
            //                 that.barChart2.clear();
            //                 that.barChart2.setOption(that.bar2Option);

            //                 that.lineChart1.clear();
            //                 that.lineChart1.setOption(that.line1Option);
            //                 that.lineChart2.clear();
            //                 that.lineChart2.setOption(that.line2Option);

            //                 that.lineChart3.clear();
            //                 that.lineChart3.setOption(that.line3Option);
            //                 that.lineChart4.clear();
            //                 that.lineChart4.setOption(that.line4Option);
            //             })

            //         }else{
            //             this.$message.warning('请选择时间')
            //         }
            //     }else{
            //         this.$message.warning('请选择部门')
            //     }
                
            // },
            handlePrint() {
                this.$PRINT('#myReport');
            },
           setOption(){
            var myChart = echarts.init(document.getElementById('main'));
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));
            var myChart4 = echarts.init(document.getElementById('main4'));
            var option = {
                tooltip: {
                    trigger:"axis",
                    axisPointer: {
                    type: 'shadow'
                    },
                    formatter:"{a1}<br/>{b1}：{c1}%"
                },
                legend: {
                    data:['目标值']
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '10%',
                    top: '2%',
                    containLabel: true
                },
                xAxis: {
                    axisLabel: {
                    interval: 'auto',
                    rotate: 80 //设置倾斜角度，数值 可设置 正负 两种，
                    },
                    type: 'category',
                    data: this.xaxis,
                },
                color:['#91cc75','#438af4'],
                yAxis: {
                    axisLabel:{
                        formatter:"{value}%"
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        z:"-1",
                        barGap: '-100%',
                        barWidth:10,
                        data: [100, 100, 100, 100, 100, 100],
                        markLine : {
                            symbol:"none",
                            label: {
                                position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                            },
                            data : [{
                                silent:false,             //鼠标悬停事件  true没有，false有
                                lineStyle:{               //警戒线的样式  ，虚实  颜色
                                    type:"solid",
                                    color:"#ffb4b4",
                                },
                                label:{
                                    position:'end',
                                    formatter:"目标(90)",
                                    color:"#ffb4b4",
                                    fontSize:'8'
                                },
                                yAxis:90         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                            }]
                        }
                    },
                    {
                        name: '及时率',
                        type: 'bar',
                        barWidth:10,
                        data: [95, 92, 96, 90, 91, 98]
                    }
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart2.setOption(option);
            myChart3.setOption(option);
            myChart4.setOption(option);
           },
            checkPermission,
            getGroup() {
                if (this.checkPermission(["record_confirm"])) {
                    getOrgList({ can_supervision: true }).then((res) => {
                        let data = res.data,xaxis = [];
                        let arr = data.filter(item=>{
                            return item.type==26||item.type==28
                        })
                        arr.forEach(item=>{
                            xaxis.push(item.name)
                        })
                        this.orgData = arr;
                        this.xaxis = xaxis;
                        this.setOption();
                    });
                } else {
                    getSubOrgList().then((res) => {
                        let data = res.data,xaxis = [];
                        let arr = data.filter(item=>{
                            return item.type==26||item.type==28
                        })
                        arr.forEach(item=>{
                            xaxis.push(item.name)
                        })
                        this.orgData = arr;
                        this.xaxis = xaxis;
                        this.setOption();
                    });
                }
            }, 
        }
    };
</script>
<style>
    .printContainer{
        /* width: 1075px; */
    }
    #numTable,#echartsContainer{
        /* margin-left: 37px; */
        width: 100%;
    }
    #numTable td{
        height: 32px;
        padding-left: 5px;
    }
    .numCell{
        width: 80px;
    }
    .numCell.numCell_last{
        width: 100px;
    }
    #echartsContainer{
        margin-top: 30px;
    }
   .chartsWrap{
    /* margin-top: 30px; */
    /* padding-top: 50px; */
    width: 100%;
    overflow-x: scroll;
    border-top: 1px solid #eeeeee;
   }
</style>