import * as echarts from 'echarts'

/**
 * 统一样式，加载
 * @param {*} id
 * @param {*} option
 */
export function loadEcharts(id, option) {
  var myChart = echarts.init(document.getElementById(id))

  if (option.textStyle == null) {
    option.textStyle = {
      fontFamily: 'Microsoft YaHei',
      color: '#ffffff'
    }
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.clear()
  myChart.setOption(option, true)

  window.addEventListener('resize', function() {
    myChart.resize()
  })

  return myChart
}

// 系统首页图
export function barTop(data, colorArr) {
  var salvProName = ['x']
  var salvProValue = [data]
  var Value = []// 背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    Value.push(salvProValue[0] + 20)
  }
  const color = colorArr
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '0%',
      right: '0%',
      bottom: '2%',
      top: '2%',
      containLabel: true
    },
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'none'
    //   },
    //   formatter: function(params) {
    //     return params[0].name + ' : ' + params[0].value
    //   }
    // },
    xAxis: {
      show: false,
      type: 'value'
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      axisLabel: {
        show: false,
        textStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: salvProName
    }],
    series: [{
      name: '值',
      type: 'bar',
      zlevel: 1,
      itemStyle: {
        normal: {
          // barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: `rgba(${color[0]},1)`
          }, {
            offset: 1,
            color: `rgba(${color[1]},1)`
          }])
        }
      },

      barWidth: 15,
      data: salvProValue

    },
    {
      name: '背景',
      type: 'bar',
      barWidth: 15,
      barGap: '-100%',
      data: Value,
      itemStyle: {
        normal: {
          color: `rgba(${color[1]},0.8)`,
          barBorderRadius: 30
        }
      }
    }
    ]
  }

  return option
}

export function bar01(data) {
  var dataX = data.map(r => r.key)
  var dataY = data.map(r => r.value)
  // var salvProMax = []// 背景按最大值
  // for (let i = 0; i < salvProValue.length; i++) {
  //   salvProMax.push(salvProValue[0])
  // }

  var option = {
    backgroundColor: 'transparent',
    grid: {
      left: '2%',
      right: '5%',
      bottom: '0%',
      top: '2%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function(params) {
        return params[0].name + ' : ' + params[0].value
      }
    },
    xAxis: {
      show: true,
      type: 'value',
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000'
        }
      }
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: dataX
    }],
    series: [{
      name: '值',
      type: 'bar',
      zlevel: 1,
      // lineStyle:{
      //   normal:{
      //
      //   }
      // },
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          //   offset: 0,
          //   color: 'rgb(42,197,137,1)'
          // }, {
          //   offset: 1,
          //   color: 'rgb(187,236,218,1)'
          // }])
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: `rgba(42, 197, 137, 1)`// 0% 处的颜色
              },
              {
                offset: 1,
                color: `rgba(187, 236, 218, 1)` // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          } // 渐变颜色
        }
      },
      label: {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        // axisLabel: {
        //     textStyle: {
        //         color: '#000',
        //         fontSize: '12'
        //     },
        // },
        position: 'right',
        data: dataY
      },
      barWidth: 10,
      data: dataY
    }
      // {
      //     name: '背景',
      //     type: 'bar',
      //     barWidth: 20,
      //     barGap: '-100%',
      //     data: salvProMax,
      //     itemStyle: {
      //         normal: {
      //             color: 'rgba(24,31,68,1)',
      //             barBorderRadius: 30,
      //         }
      //     },
      // },
    ]
  }
  return option
}

export function line01(data) {
  const dataX = data.map(r => r.key)
  const dataY = data.map(r => r.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // type: 'shadow',
        label: {
          show: true,
          backgroundColor: '#000'
        }
      }
    },
    grid: {
      left: '2%',
      right: '5%',
      bottom: '0%',
      top: '3%',
      containLabel: true
    },
    // legend: {
    //   data: ['line', 'bar'],
    //   textStyle: {
    //     color: '#ccc'
    //   }
    // },
    xAxis: {
      data: dataX,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000'
        }
      }
    },
    yAxis: {
      max: 1,
      min: 0,
      interval: 0.2,
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#000'
        }
      }
    },
    series: [{
      name: '时间',
      type: 'line',
      smooth: false,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      itemStyle: {
        normal: {
          color: `rgba(42, 197, 137, 1)`
        }
      },
      lineStyle: {
        normal: {
          width: 2,
          color: `rgba(42, 197, 137, 1)`
        }
      },
      data: dataY
    }]
  }

  return option
}

// 综合看板图
export function bar02() {
  const data = [70, 60, 50, 40, 30]

  const titlename = ['外观划伤', '表面油污', '尺寸', '颜色', '大小']
  const valdata = [683, 500, 400, 300, 200]
  const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: 'Top5不良',
      x: 'center',
      y: '4%',
      textStyle: {
        color: '#fff',
        fontSize: '22'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16'

      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          formatter: function(value, index) {
            return [
              '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
            ].join('\n')
          },
          rich: {
            lg: {
            // backgroundColor: '#339911',
              color: '#fff',
              borderRadius: 15,
              // padding: 5,
              align: 'center',
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: false,
        inverse: true,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }

      }
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 22,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: function(params) {
              // const num = myColor.length
              // return myColor[params.dataIndex % num]
              return myColor[params.dataIndex]
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            color: '#fff'
          // formatter: '{c}%',
          }
        }
      }
    ]
  }

  return option
}