import miment from 'miment'
import {getData} from '@/api/bigscreen'

export default {
  data() {
    return {
      // form select-input key
      selectInput: {
        keyname: '',
        keyword: ''
      },

      //日期时间快捷选项
      datetimeRangePickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
            const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(miment().add(-1, 'ww').stamp());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(miment().add(-1, 'MM').stamp());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(miment().add(-3, 'MM').stamp());
            picker.$emit('pick', [start, end]);
          }
        }],
        // disabledDate(time){
        //   return time.getTime() > Date.now()
        // }
      },
    }
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    // 搜索重置搜索页码
    search() {
      this.params.currentPage = 1;
      this.queryByPage();
    },
    // 把selectInput中的值赋到params查询对象中
    parseParamsBySelectInput(keyname, keyword) {
      if (this.params === undefined || this.params === null) {
        console.warn('query form must bind to params object in vue data')
        return
      }
      // if (!this.params.hasOwnProperty(keyname)) {
      //   console.warn('params has no field:' + keyname)
      //   return
      // }
      if (keyword !== undefined) {
        this.params[keyname] = keyword.trim()
      }
    },
    resetForm(data) {
      let formKeys = Object.keys(data)
      for (let k of formKeys) {
        data[k] = null
      }
    },
    handlerInputchange(val) {
      this.parseParamsBySelectInput(this.selectInput.keyname, val)
    },
    // 查询echarts 数据
    queryEchartsData(params) {
      return new Promise(async (resolve) => {
        const {code, data} = await getData(params);
        if (code != 200) return
        const analysisData = this.analysisChartsData(params, data);
        resolve(analysisData)
      })
    },
    // 解析不同图标的数据
    analysisChartsData(params, data) {
      // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图
      // widget-piechart 饼图、widget-funnel 漏斗图
      // widget-text 文本框
      // widge-table 表格(数据不要转)
      // widget-stackchart 堆叠图
      const chartType = params.chartType
      if (
        chartType == "widget-barchart" ||
        chartType == "widget-linechart" ||
        chartType == "widget-barlinechart"
      ) {
        return this.barOrLineChartFn(params.chartProperties, data);
      } else if (
        chartType == "widget-piechart" ||
        chartType == "widget-funnel"
      ) {
        return this.piechartFn(params.chartProperties, data);
      }  else if (chartType == "widget-text") {
        return this.widgettext(params.chartProperties, data)
      } else if (chartType == "widget-stackchart") {
        return this.stackChartFn(params.chartProperties, data)
      }else if(chartType == "custom-linechart" || chartType == "custom-barlinechart"){
        return this.barOrLineChartFnCustom(params.chartProperties, data);
      }else if(chartType == 'monitor-linechart-trend'){
        return this.LineChartFnCustomTrend(params.chartProperties, data);

      } else if(chartType == "monitor-stackchart"){
        return this.stackChartFnCustom(params.chartProperties, data)
      }else {
        return data
      }
    },
    //折线趋势图-自定义 lsq 2022-03-01
    LineChartFnCustomTrend(chartProperties, data) {
      const ananysicData = {};
      let series = [];
      if(data && data[0] && (data[0].code==200 || data[0].code==0) && data[0].data){
        series = data[0].data;
      }
      ananysicData["series"] = series;
      return ananysicData;
    },
    // 柱状图、折线图、柱线图-自定义 // Start LSQ 2022/2/21
    barOrLineChartFnCustom(chartProperties, data) {
      const ananysicData = {};
      let xAxisList = [];
      let series = [];
      let kpiUnit='';
      if(data && data[0]){
        if(data[0].data && data[0].series){
          if(data[0].data.names && data[0].data.names.length>0){
            xAxisList=data[0].data.names;
          }else{
            // xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
            xAxisList=[]
          }
          if(data[0].data.kpiUnit){
            kpiUnit=data[0].data.kpiUnit;
          }
          if(data[0].data.series && data[0].data.series.length>0){
            series = data[0].data.series;

          }else{
            series =  [{
              name: "",
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }];
          }
        }else{
          let dataData='';
          if(data[0].data && data[0].data.length>=0){
            dataData=data[0].data;
          }else{
            dataData=data;
          }
          if(dataData.length>0){
            //容量分析柱线图数据结构
            let seriesCapacityData=[];//容量
            let seriesUsageRateData=[];//使用率
            let seriesUsageValueData=[];//使用量
            let seriesGrowthData=[];//增长量
            dataData.map(item=>{
              xAxisList.push(item.periodVal);
              if(item.capacityValue || item.capacityValue==0){
                seriesCapacityData.push(item.capacityValue)
              }
              if(item.usageRate || item.usageRate==0){
                seriesUsageRateData.push(item.usageRate)
              }
              if(item.usageValue || item.usageValue==0){
                seriesUsageValueData.push(item.usageValue)
              }
              //增长量
              if(item.growth || item.growth==0){
                seriesGrowthData.push(item.growth);
              }
            })
            if(seriesUsageValueData.length>0){
              series.push({
                type:'bar',
                name:'使用量',
                data:seriesUsageValueData
              })
            }else{
              series.push({
                type:'bar',
                name:'',
                data:seriesUsageValueData
              })
            }
            if(seriesCapacityData.length>0){
              series.push({
                type:'bar',
                name:'容量',
                data:seriesCapacityData
              })
            }else{
              series.push({
                type:'bar',
                name:'',
                data:seriesCapacityData
              })
            }
            if(seriesGrowthData.length>0){
              series.push({
                type:'bar',
                name:'增长量',
                data:seriesGrowthData
              })
            }else{
              series.push({
                type:'bar',
                name:'',
                data:seriesGrowthData
              })
            }
            if(seriesUsageRateData.length>0){
              series.push({
                type:'line',
                name:'使用率',
                data:seriesUsageRateData
              })
            }else{
              series.push({
                type:'line',
                name:'',
                data:seriesUsageRateData
              })
            }

          }else{
            xAxisList=[];
            series=[];
           /* series =  [{
              name: "使用量",
              type:'bar',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },{
              name: "容量",
              type:'line',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            },{
              name: "使用率",
              type:'line',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }];*/
          }
        }
      }else{
        // xAxisList=['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00']
        xAxisList=[];
        series=[];
        /*series =  [{
          name: "使用量",
          type:'bar',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },{
          name: "容量",
          type:'line',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },{
          name: "使用率",
          type:'line',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }];*/
      }
      ananysicData["xAxis"] = xAxisList;
      ananysicData["series"] = series;
      ananysicData["kpiUnit"] = kpiUnit;
      return ananysicData;
    },
    // 柱状图、折线图、柱线图
    barOrLineChartFn(chartProperties, data) {
      const ananysicData = {};
      const xAxisList = [];
      const series = [];
      for (const key in chartProperties) {
        const obj = {};
        const seriesData = [];
        const value = chartProperties[key];
        obj["type"] = value;
        for (let i = 0; i < data.length; i++) {
          if (value.startsWith("xAxis")) {
            // 代表为x轴
            xAxisList[i] = data[i][key];
          } else {
            // 其他的均为series展示数据
            seriesData[i] = data[i][key];
          }
        }
        obj["data"] = seriesData;
        if (!obj["type"].startsWith("xAxis")) {
          series.push(obj);
        }
      }
      ananysicData["xAxis"] = xAxisList;
      ananysicData["series"] = series;
      return ananysicData;
    },
    //堆叠图自定义
    stackChartFnCustom(chartProperties, data){
      const ananysicData = {};
      const series = [];
      //全部字段字典值
      const types = Object.values(chartProperties)
      let newData=data[0];
      //x轴字段、y轴字段名
      const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
      const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
      const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
      //x轴数值去重，y轴去重
      const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
      const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
      const dataGroup = this.setGroupBy(data, yAxisField)
      let yAxisListNew=yAxisList[0].series;

      if(yAxisListNew && yAxisListNew.length>0){
          yAxisListNew.map(item=>{
            if(item.type=='bar'){
              series.push({
                name: item.name,
                type: item.type,
                data: item.data,
              })
            }else{
              series.push({
                name: item.flag,
                type: 'line',
                data: item.datas,
              })
            }

          })

      }
      if(xAxisList[0]){
        ananysicData["xAxis"] = xAxisList[0];
      }else{
        ananysicData["xAxis"] = newData.data.names;
      }
      ananysicData["series"] = series;
      if(newData.kpiMap){
        ananysicData["kpiMap"] = newData.kpiMap;
      }
      if(newData.kpiUnit){
        ananysicData["kpiUnit"] = newData.kpiUnit;
      }else if(newData.data){
        ananysicData["kpiUnit"] = newData.data.kpiUnit;

      }else{
        ananysicData["kpiUnit"] = '';
      }
      return ananysicData;
    },
    //堆叠图
    stackChartFn(chartProperties, data) {
      const ananysicData = {};
      const series = [];
      //全部字段字典值
      const types = Object.values(chartProperties)
      //x轴字段、y轴字段名
      const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')]
      const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')]
      const dataField = Object.keys(chartProperties)[types.indexOf('bar')]
      //x轴数值去重，y轴去重
      const xAxisList = this.setUnique(data.map(item => item[xAxisField]))
      const yAxisList = this.setUnique(data.map(item => item[yAxisField]))
      const dataGroup = this.setGroupBy(data, yAxisField)
      for (const key in chartProperties) {
        if (chartProperties[key] !== 'yAxis' && !chartProperties[key].startsWith('xAxis')) {
          Object.keys(dataGroup).forEach(item => {
            const data = new Array(yAxisList.length).fill(0)
            dataGroup[item].forEach(res => {
              data[xAxisList.indexOf(res[xAxisField])]= res[key]
            })
            series.push({
              name: yAxisList[item],
              type: chartProperties[key],
              data: data,
            })
          })
        }
      }
      ananysicData["xAxis"] = xAxisList;
      ananysicData["series"] = series;
      return ananysicData;
    },
    // 饼图、漏斗图
    piechartFn(chartProperties, data) {
      const ananysicData = [];
      for (let i = 0; i < data.length; i++) {
        const obj = {};
        for (const key in chartProperties) {
          const value = chartProperties[key];
          if (value === "name") {
            obj["name"] = data[i][key];
          } else {
            obj["value"] = data[i][key];
          }
        }
        ananysicData.push(obj);
      }
      return ananysicData;
    },
    widgettext(chartProperties, data) {
      const ananysicData = [];
      for (let i = 0; i < data.length; i++) {
        const obj = {};
        for (const key in chartProperties) {
          const value = chartProperties[key];
          if (value === "name") {
          } else {
            obj["value"] = data[i][key];
          }
        }
        ananysicData.push(obj);
      }
      return ananysicData;
    },
    setUnique(arr) {
      let newArr = [];
      arr.forEach(item => {
        return newArr.includes(item) ? '' : newArr.push(item);
      });
      return newArr;
    },
    setGroupBy(array, name) {
      const groups = {}
      array.forEach(function (o) {
        const group = JSON.stringify(o[name])
        groups[group] = groups[group] || []
        groups[group].push(o)
      })
      return Object.keys(groups).map(function (group) {
        return groups[group]
      })
    },
  },
  watch: {
    'selectInput.keyname'(newVal, oldVal) {
      this.resetForm(this.params)
      this.params.currentPage = 1
      this.params.pageSize = 10
      this.parseParamsBySelectInput(newVal, this.selectInput.keyword)
    },
    'selectInput.keyword'(newVal, oldVal) {
      if (!this.selectInput.keyname) return
      this.parseParamsBySelectInput(this.selectInput.keyname, newVal)
    }
    // 'selectInput.keyword'(newVal, oldVal) {
    //   this.parseParamsBySelectInput(this.selectInput.keyname, newVal)
    // }
  }
}