import * as echarts from "echarts";
import { msgBoradTabel, msgBoradNum,responMsg } from "../../api/messageBoard"
import { handelBtcPrice, handelWatermark,handelDimensionalArr,handelZoom,} from "../../util/processingData"


export default {
    data() {
        return {
            tabelMsg: {
                status: 0
            },
            //未处理留言
            tabelData0: [
                {
                    id: "1",
                    userDate: "2022/03/01",
                    userName: "用户名",
                    userMsg: "留言内容",
                    msgPage: "留言所在页面",
                    coinType: "BTC",
                    respon: "回复内容",
                    responDate: "2022/03/02",
                    responser: "回复人"
                },
                {
                    id: "2",
                    userDate: "2022/03/01",
                    userName: "用户名",
                    userMsg: "留言内容",
                    msgPage: "留言所在页面",
                    coinType: "BTC",
                    respon: "回复内容",
                    responDate: "2022/03/02",
                    responser: "回复人"
                },
                {
                    id: "3",
                    userDate: "2022/03/01",
                    userName: "用户名",
                    userMsg: "留言内容",
                    msgPage: "留言所在页面",
                    coinType: "BTC",
                    respon: "回复内容",
                    responDate: "2022/03/02",
                    responser: "回复人"
                },
            ],
            //已处理留言
            tabelData1: [
                {
                    id: "1",
                    userDate: "2022/03/01",
                    userName: "用户名",
                    userMsg: "留言内容",
                    msgPage: "留言所在页面",
                    coinType: "BTC",
                    respon: "回复内容",
                    responDate: "2022/03/02",
                    responser: "回复人"
                },
                {
                    id: "2",
                    userDate: "2022/03/01",
                    userName: "用户名",
                    userMsg: "留言内容",
                    msgPage: "留言所在页面",
                    coinType: "BTC",
                    respon: "回复内容",
                    responDate: "2022/03/02",
                    responser: "回复人"
                },
                {
                    id: "3",
                    userDate: "2022/03/01",
                    userName: "用户名",
                    userMsg: "留言内容",
                    msgPage: "留言所在页面",
                    coinType: "BTC",
                    respon: "回复内容",
                    responDate: "2022/03/02",
                    responser: "回复人"
                },
            ],
            //留言数量
            msgCount: {
                total: "",
                solvdCount: "",
                pendingCount: ""
            },
            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,
                    },
                  

                 

                ],
                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: [],
                    },                

                ],
            },
            dialogFormVisible: false,
            submitReply: {//提交回复
                message: '',
                msg_id: "",

            },
            chartData:[],//所有留言数据（今日留言数）
            MessageBoardLoading:false



        }
    },
    mounted() {
        this.tabelMsg.status = 0 //未处理
        this.fetchMsgBoradTabe0(this.tabelMsg)
        this.tabelMsg.status = 1//已处理
        this.fetchMsgBoradTabel1(this.tabelMsg)
        this.tabelMsg.status = 2//所有留言
        this.fetchMsgBoradTabel2(this.tabelMsg)
        //请求留言数量
        this.fetchMsgBoradNum()
    },
    methods: {
        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("MessageBoardBox"));
            }
            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();
            });
        },
        //tabel表格数据请求//未处理
        async fetchMsgBoradTabe0(data) {
            const list = await msgBoradTabel(data)         
            this.tabelData0 = list.data.data.data
            if ( !this.tabelData0[0]) return
            this.tabelData0.forEach(item=>{
                item.userDate = `${item.userDate.split("T")[0]} ${item.userDate.split("T")[1].split(".")[0]}` 
            })
        },
        //已处理
        async fetchMsgBoradTabel1(data) {
            const list = await msgBoradTabel(data)
            this.tabelData1 = list.data.data.data
            if ( !this.tabelData1[0]) return
            this.tabelData1.forEach(item=>{
                item.userDate = `${item.userDate.split("T")[0]} ${item.userDate.split("T")[1].split(".")[0]}` 
                item.responDate = `${item.responDate.split("T")[0]} ${item.responDate.split("T")[1].split(".")[0]}` 
            })
        },
        //所有留言
        async fetchMsgBoradTabel2(data) {
            const list = await msgBoradTabel(data)
           
            this.chartData = list.data.data.data
            if (!this.chartData[0]) return
         
        },
        //回复留言
        async fetchResponMsg(data) {
            const list = await responMsg(data);
          
            this.$message({
                message: list.data.msg,
                type: "success",
                customClass: "messageClass",
              });

              if (list.data.code == 200) {
                    // this.$router.go(0) //处理数据以后 刷新一次更新数据
                    this.tabelMsg.status = 0 //未处理
                    this.fetchMsgBoradTabe0(this.tabelMsg)
                    this.tabelMsg.status = 1//已处理
                    this.fetchMsgBoradTabel1(this.tabelMsg)
                    this.tabelMsg.status = 2//所有留言
                    this.fetchMsgBoradTabel2(this.tabelMsg)
                    //请求留言数量
                    this.fetchMsgBoradNum()
              }
          
        },

        //留言数量请求
        async fetchMsgBoradNum(data) {
            this.MessageBoardLoading =true
            const list = await msgBoradNum(data)  
            if (list.data.data.length == 0){
                this.MessageBoardLoading =false
                return
            }
            //当前时间匹配今日留言
            let todayTime = new Date()
            todayTime = todayTime.toISOString().split("T")[0]
          
            let chartDataList = list.data.data
            // if (!this.chartDataList) return
            this.option= handelWatermark(this.option,750,300) //加水印
            let pendingCountValue = [] //未解决留言数
            let solvdCountValue = []//已解决留言数
            let totalValue = [] //总留言数
            chartDataList.forEach(item=>{
                // item.date = item.date.split("T")[0].replace(/-/g,"/")
                if (todayTime ==item.date.split("T")[0] ) {//匹配当前日期 今日留言是否有数据
                    this.msgCount = item
                }
              
                pendingCountValue.push(item.pendingCount)
                solvdCountValue.push(item.solvdCount)
                totalValue.push(item.total)
            })

            this.option.series[0].data = handelDimensionalArr(chartDataList, pendingCountValue)
            this.option.series[1].data = handelDimensionalArr(chartDataList, solvdCountValue)
            this.option.series[2].data = handelDimensionalArr(chartDataList, totalValue)
            this.inCharts()
            this.MessageBoardLoading =false
        },
        //点击未处理留言的回复
        clickRow(a, b) {
            //每一行的ID
            this.submitReply.msg_id=b[a].id
        
            this.dialogFormVisible = true
        },
        //确定提交回复
        handelSubmitReply() {         

            this.fetchResponMsg(this.submitReply)
            this.dialogFormVisible = false

       
         
          
        }

    }
}