<template>
    <div class="app-container">
      <el-card>
          <el-row :gutter="6"> 
            <el-date-picker
                v-model="listQuery.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="printContainers">
            <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="chartsWraps">
                    <div id="main" style="width:100%;height:500px;margin-left: 10px;"></div>
                </el-col>
                <el-col  class="chartsWraps">
                    <div id="main2" style="width:100%;height:500px;margin-left: 10px;"></div>
                </el-col>
                <el-col  class="chartsWraps">
                    <div id="main3" style="width:100%;height:500px;margin-left: 10px;"></div>
                </el-col>
                <el-col  class="chartsWraps">
                    <div id="main4" style="width:100%;height:500px;margin-left: 10px;"></div>
                </el-col>
            </el-row>
        </div>
      </el-card>
    </div>
  </template>
<script>
    import { taskAnalyse } from "@/api/task";
    import checkPermission from "@/utils/permission";
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                timeStamp:0,
                listQuery:{
                    year:'',
                    dept_type_name:'2级公司'
                },
                xaxis:[],
                deptName:'',
                fileName:'',
                option:{},
                option1:{},
                option2:{},
                option3:{},
                option4:{},
            };
        },
        mounted() {
            var myDate = new Date();
            this.listQuery.year = myDate.getFullYear();
            this.setOption();
            this.handleFilter();
            this.option = {
                //标题
                title: {
                    text: '',
                    // subtext: '小标题',
                    x: 'center',
                    top:'3%'
                },
                tooltip: {
                    trigger:"axis",
                    axisPointer: {
                    type: 'shadow'
                    },
                },
                legend: {
                    data:['单位完成值','单位目标值',{name:'集团目标值',itemStyle:{opacity:0}}],
                    right:'10%',
                    top:'3%'
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    axisLabel: {
                    interval: 'auto',
                    rotate: 80 //设置倾斜角度，数值 可设置 正负 两种，
                    },
                    type: 'category',
                    data: [],
                },
                color:['#438af4','#91cc75','#ff0000'],
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        formatter:"{value}%"
                    },
                    scale:true,
                    min:85,
                    max:105,
                },
                series: [
                    {
                        name: '单位完成值',
                        type: 'bar',
                        barGap: 0,
                        barWidth:10,
                        data: [],
                        markLine : {
                            symbol:"none",
                            label: {
                                position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                            },
                            data :[
                            {
                                silent:false,             //鼠标悬停事件  true没有，false有
                                lineStyle:{               //警戒线的样式  ，虚实  颜色
                                    type:"solid",
                                    color:"#ff0000",
                                },
                                label:{
                                    position:'end',
                                    formatter:'{c}',
                                    color:"#ff0000",
                                    fontSize:'8'
                                },
                                name:'',
                                yAxis:99         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                            }
                            ]
                        }
                    },
                    {
                        name: '单位目标值',
                        type: 'bar',
                        barWidth:10,
                        data: []
                    },
                    {
                        name: '集团目标值',
                        type: 'line',
                        data: []
                    }
                ],
            };
            
        },
        methods: {
            handlePrint() {
                this.$PRINT('#myReport');
            },
           setOption(){
            this.barChart1 = echarts.init(document.getElementById('main'));
            this.barChart2 = echarts.init(document.getElementById('main2'));
            this.barChart3 = echarts.init(document.getElementById('main3'));
            this.barChart4 = echarts.init(document.getElementById('main4'));
           },
            checkPermission,
            handleFilter(){
                let that = this;
                function compare(property) {
                    return function (a, b) {
                        return b[property]-a[property];
                    }
                }
                taskAnalyse(that.listQuery).then(res=>{
                    console.log(res)
                    let data = res.data;
                    let  xaxis1 = [],data1 = [],data12=[],
                    xaxis2 = [],data2 = [],data22=[],
                    xaxis3 = [],data3 = [],data32=[],
                    xaxis4 = [],data4 = [],data42=[];
                    let markLine1 = 0,markLine2=0,markLine3=0,markLine4=0;
                    let sortedArr1 = data.sort(compare("报告/证书合格率"));
                    sortedArr1.forEach(item1=>{
                        xaxis1.push(item1.单位) 
                        data1.push(item1.报告证书合格率)
                        data12.push(item1.报告证书合格率设定值)
                    })
                    markLine1 = sortedArr1[0].报告证书合格率基础值;
                    let sortedArr2 = data.sort(compare("报告/证书及时率"));
                    sortedArr2.forEach(item2=>{
                        xaxis2.push(item2.单位) 
                        data2.push(item2.报告证书及时率)
                        data22.push(item2.报告证书及时率设定值)
                    })
                    markLine2 = sortedArr2[0].报告证书及时率基础值;
                    let sortedArr3 = data.sort(compare("能力验证满意率"));
                    sortedArr3.forEach(item3=>{
                        xaxis3.push(item3.单位) 
                        data3.push(item3.能力验证满意率)
                        data32.push(item3.能力验证满意率设定值)
                    })
                    markLine3 = sortedArr3[0].能力验证满意率基础值;
                    let sortedArr4 = data.sort(compare("客户投诉处理满意率"));
                    sortedArr4.forEach(item4=>{
                        xaxis4.push(item4.单位) 
                        data4.push(item4.客户投诉处理满意率)
                        data42.push(item4.客户投诉处理满意率设定值)
                    })
                    markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
                    let option1 =that.option;
                    let option2 =that.option;
                    let option3=that.option;
                    let option4= that.option;

                    option1.xAxis.data = xaxis1;
                    option1.series[0].data = data1;
                    option1.series[1].data = data12;
                    option1.title.text = '报告/证书合格率';
                    option1.series[0].markLine.data[0].yAxis = markLine1;
                    that.barChart1.clear();
                    that.barChart1.setOption(option1);

                    option2.xAxis.data = xaxis2;
                    option2.series[0].data = data2;
                    option2.series[1].data = data22;
                    option2.title.text = '报告/证书及时率';
                    option2.series[0].markLine.data[0].yAxis = markLine2;
                    that.barChart2.clear();
                    that.barChart2.setOption(option2);

                    option3.xAxis.data = xaxis3;
                    option3.series[0].data = data3;
                    option3.series[1].data = data32;
                    option3.title.text = '能力验证满意率';
                    option3.series[0].markLine.data[0].yAxis = markLine3;
                    that.barChart3.clear();
                    that.barChart3.setOption(option3);

                    option4.xAxis.data = xaxis4;
                    option4.series[0].data = data4;
                    option4.series[1].data = data42;
                    option4.title.text = '客户投诉处理满意率';
                    option4.series[0].markLine.data[0].yAxis = markLine4;
                    that.barChart4.clear();
                    that.barChart4.setOption(option4);
                })
            },
        }
    };
</script>
<style>
    .printContainers{
        /* 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;
    }
   .chartsWraps{
    width: 99%;
    height: fit-content;
    overflow-y: hidden;
    overflow-x: scroll;
    border-top: 1px solid #eeeeee;
   }
</style>