import * as echarts from "echarts";
import { getDailyCount, getTicketList } from "../../api/help"
import { handelProfitrate,handelZoom,handelWatermark,emptyData} from "../../util/processingData"
export default {
    data() {
        return {
            tableData2: [{
                id: 1,
                time: "2022-09-01 16:00",
                type: "账户问题",
                title: "账户不能登录",
                userName:"",//提交用户名
                date:"",//提交时间
                status: "已解决"
            }],
            tableData3: [{
                id: 1,
                time: "2022-09-01 16:00",
                type: "账户问题",
                title: "账户不能登录",
                userName:"",//提交用户名
                date:"",//提交时间
                status: "已解决"
            }],
            tableData4: [{
                id: 1,
                time: "2022-09-01 16:00",
                type: "账户问题",
                title: "账户不能登录",
                userName:"",//提交用户名
                date:"",//提交时间
                status: "已解决"
            }],
            tableData7: [{
                id: 1,
                time: "2022-09-01 16:00",
                type: "账户问题",
                title: "账户不能登录",
                userName:"",//提交用户名
                date:"",//提交时间
                status: "已解决"
            }],
            tableData8: [{
                id: 1,
                time: "2022-09-01 16:00",
                type: "账户问题",
                title: "账户不能登录",
                userName:"",//提交用户名
                date:"",//提交时间
                status: "已解决"
            }],
            tableData11: [{
                id: 1,
                time: "2022-09-01 16:00",
                type: "账户问题",
                title: "账户不能登录",
                userName:"",//提交用户名
                date:"",//提交时间
                status: "已解决"
            }],   
            tableData12: [{
                id: 1,
                time: "",
                type: "",
                title: "",
                userName:"",//提交用户名
                date:"",//提交时间
                status: ""
            }],      
            data: [{

            }],
            dailyCount: {
                submitNum: "",//今日提交工单数
                solvedNum: "",//已处理工单数
                pendingNum: "",//未处理工单数
                checkingNum: "",//待审核工单数
                checkedNum: "", //已审核工单数             
            },
            dayWorkOrder:"",//今日工单
            option: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },
                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    //   axisLabel: {
                    //     formatter: `{yyyy}-{MM}-{dd}`,
                    //   },
                    data: []
                },
                yAxis: [
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        axisLabel: {
                            formatter: function (e) {

                                let value;
                                if (e > 100000000) {
                                    value = `${e / 100000000}E`;
                                } else if (e > 1000000) {//百万
                                    value = `${e / 1000000}M`;
                                } else if (e > 10000) {//百万
                                    value = `${e / 10000}W`;
                                } else if (e < -1000000) {//百万
                                    value = `${e / 1000000}M`;
                                } else if (e < -10000) {//万
                                    value = `${e / 10000}W`;
                                }
                                else {
                                    value = e;
                                }
                                return value;
                            },
                        },
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: true,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                  

                 

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "今日提交工单数",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 0,
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "已处理工单数",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#a32140",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 1,
                        lineStyle: {
                            //线条样式
                            color: "#a32140",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "未处理工单数",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#7a5edf",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 2,
                        lineStyle: {
                            //线条样式
                            color: "#7a5edf",
                            width: "1",
                        },
                        data: [],
                    },                
                    {
                        name: "待审核工单数",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#040404",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 3,
                        lineStyle: {
                            //线条样式
                            color: "#040404",
                            width: "1",
                        },
                        data: [],
                    },                

                    {
                        name: "已审核工单数",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#12a62b",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 4,
                        lineStyle: {
                            //线条样式
                            color: "#12a62b",
                            width: "1",
                        },
                        data: [],
                    },                


                ],
            },
            helpBackstageLoading:false

        }
    },
    mounted() {
        this.fetchTicketList7({status:7})
        this.fetchTicketList2({status:2})
        this.fetchTicketList3({status:3})
        this.fetchTicketList4({status:4})
        this.fetchTicketList8({status:8})
        this.fetchTicketList11({status:11})
        this.fetchTicketList12({status:12})
        this.fetchDailyCount()
       
    },
    methods: {

              //初始化图表
              inCharts() {
                if (this.myChart == null) {
                    this.myChart = echarts.init(document.getElementById("helpBackstageBox"));
                }
                this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
               
                this.myChart.setOption(this.option);
    
                window.addEventListener("resize", () => {
                    if (this.myChart) this.myChart.resize();
                });
            },
        //请求每日工单数 图表使用 .replace(/-/g,"/")    
        async fetchDailyCount(data) {
            this.helpBackstageLoading =true
            const list = await getDailyCount(data)
           //空数据处理
           let noData = emptyData(list.data.data, this.option.series, this.inCharts, this)
           if (noData) {
               this.helpBackstageLoading = false
               return
           }
            let today = new Date()
            today= today.toISOString().split("T")[0] //拿到当前日期 年月日

             //  //添加水印
             this.option= handelWatermark(this.option)         
            let chartData = list.data.data
            let submitNumValueList = []
            let solvedNumValueList = []
            let pendingNumValueList = []
            let checkingNumValueList = []
            let checkedNumValueList = []
            chartData.forEach(item => {            
                if (item.date.split("T")[0] == today) {
                    console.log(item,6+6+6);
                    this.dailyCount=item
                }
               
                submitNumValueList.push(Number(item.submitNum.toFixed(2)))  
                solvedNumValueList.push(Number(item.solvedNum.toFixed(2)))  
                pendingNumValueList.push(Number(item.pendingNum.toFixed(2)))  
                checkingNumValueList.push(Number(item.checkingNum.toFixed(2)))  
                checkedNumValueList.push(Number(item.checkedNum.toFixed(2)))  

            });      
            
            this.option.series[0].data = handelProfitrate(chartData, submitNumValueList)
            this.option.series[1].data = handelProfitrate(chartData, solvedNumValueList)
            this.option.series[2].data = handelProfitrate(chartData, pendingNumValueList)
            this.option.series[3].data = handelProfitrate(chartData, checkingNumValueList)
            this.option.series[4].data = handelProfitrate(chartData, checkedNumValueList)

           
            this.inCharts()     
            this.helpBackstageLoading =false       

           
        },
        //请求超时工单列表
        async fetchTicketList7(data) {
            const list = await getTicketList(data)
            // console.log(list,"超时工单列表");
              this.tableData7 = list.data.data
              this.tableData7.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })

        },
        //请求撤回工单列表
        async fetchTicketList2(data) {
            const list = await getTicketList(data)
            //  console.log(list,"撤回工单列表");
            this.tableData2 = list.data.data
            this.tableData2.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })
        },
        //请求待处理工单列表
        async fetchTicketList3(data) {
            const list = await getTicketList(data)
            //    console.log(list,"待处理工单");
              this.tableData3 =list.data.data
              this.tableData3.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })

        },
        //请求已处理工单列表
        async fetchTicketList4(data) {
            const list = await getTicketList(data)
              this.tableData4 = list.data.data
              this.tableData4.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })
        },
        //请求待审核工单列表
        async fetchTicketList8(data) {
            const list = await getTicketList(data)
              this.tableData8 = list.data.data
              this.tableData8.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })
        },
        //请求审核完成工单列表
        async fetchTicketList11(data) {
            const list = await getTicketList(data)
              this.tableData11 = list.data.data
              this.tableData11.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })
        },
         //请求已关闭工单列表
         async fetchTicketList12(data) {
            const list = await getTicketList(data)
              this.tableData12 = list.data.data
              this.tableData12.forEach(item=>{
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
            })
        },



        //点击详情 跳转工单处理页面
        handelDetails(row) {
            this.$addStorageEvent(1, "detailsID",row.id  );
            this.$router.push({
                path: "/HelpDetails",
                name: "HelpDetails",
                params: row
              })
           
        }
    }
}