import { type EChartsOption, graphic } from 'echarts'

const TP_value = 30 // 判断温度
const degree_value = [] // 显示刻度值
const Gradient = [] // 设置温度渐变色
let showValue: number | string = '' // 实际显示的温度值

export const getShowValue = (value: number) => {
  value = value + 70
  return value > 130 ? 130 : value
}

// 柱状图模拟刻度，短设置1，长的设置3；构造一个数据
for (let i = 0, len = 135; i <= len; i++) {
  if (i < 10 || i > 130) {
    degree_value.push('')
  }
  else {
    if ((i - 10) % 20 === 0) degree_value.push('-3')
    else if ((i - 10) % 4 === 0) degree_value.push('-1')
    else degree_value.push('')
  }
}

// 温度渐变色
if (TP_value > 20) {
  Gradient.push(
    {
      offset: 0,
      color: '#93FE94',
    },
    {
      offset: 0.5,
      color: '#E4D225',
    },
    {
      offset: 1,
      color: '#E01F28',
    },
  )
}
else if (TP_value > -20) {
  Gradient.push(
    {
      offset: 0,
      color: '#93FE94',
    },
    {
      offset: 1,
      color: '#E4D225',
    },
  )
}
else {
  Gradient.push({
    offset: 1,
    color: '#93FE94',
  })
}

if (TP_value > 62) {
  showValue = 62
}
else {
  if (TP_value < -60) showValue = -60
  else showValue = TP_value
}

// 温度计默认配置项
export const defaultOption: EChartsOption = {
  grid: {
    left: '50%',
  },
  yAxis: [
    {
      show: false,
      data: [],
      min: 0,
      max: 135,
      axisLine: {
        show: false,
      },
    },
    {
      show: false,
      min: 0,
      max: 50,
    },
    {
      type: 'category',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  xAxis: [
    {
      show: false,
      min: -10,
      max: 80,
      data: [],
    },
    {
      show: false,
      min: -10,
      max: 80,
      data: [],
    },
    {
      show: false,
      min: -10,
      max: 80,
      data: [],
    },
    {
      show: false,
      min: -5,
      max: 80,
    },
  ],
  series: [
    {
      name: '条',
      type: 'bar',
      // 对应上面XAxis的第一个对)象配置
      xAxisIndex: 0,
      data: [
        {
          value: getShowValue(showValue),
        },
      ],
      barWidth: 9,
      itemStyle: {
        color: new graphic.LinearGradient(0, 1, 0, 0, Gradient),
      },
      z: 2,
    },
    {
      name: '白框',
      type: 'bar',
      xAxisIndex: 1,
      barGap: '-100%',
      data: [134],
      barWidth: 14,
      itemStyle: {
        color: '#0C2E6D',
        borderRadius: 50,
      },
      z: 1,
    },
    {
      name: '外框',
      type: 'bar',
      xAxisIndex: 2,
      barGap: '-100%',
      data: [135],
      barWidth: 19,
      itemStyle: {
        color: '#4577BA',
        borderRadius: 50,
      },
      z: 0,
    },
    {
      name: '圆',
      type: 'scatter',
      emphasis: {
        scale: false,
      },
      data: [0],
      xAxisIndex: 0,
      symbolSize: 24,
      itemStyle: {
        color: '#93FE94',
        opacity: 1,
      },
      z: 2,
    },
    {
      name: '白圆',
      type: 'scatter',
      emphasis: {
        scale: false,
      },
      data: [0],
      xAxisIndex: 1,
      symbolSize: 30,
      itemStyle: {
        color: '#0C2E6D',
        opacity: 1,
      },
      z: 1,
    },
    {
      name: '外圆',
      type: 'scatter',
      emphasis: {
        scale: false,
      },
      data: [0],
      xAxisIndex: 2,
      symbolSize: 35,
      itemStyle: {
        color: '#4577BA',
        opacity: 1,
      },
      z: 0,
    },
    {
      name: '刻度',
      type: 'bar',
      yAxisIndex: 0,
      xAxisIndex: 3,
      label: {
        show: true,
        position: 'left',
        distance: 30,
        color: '#000',
        fontSize: 14,
        formatter(params) {
          if (params.dataIndex > 130 || params.dataIndex < 10) {
            return ''
          }
          else {
            if ((params.dataIndex - 10) % 20 === 0)
              return (params.dataIndex - 70).toString()
            else return ''
          }
        },
      },
      barGap: '-100%',
      data: degree_value,
      barWidth: 3,
      itemStyle: {
        color: '#000', // 刻度短横线颜色
        borderRadius: 120,
        borderWidth: 10,
      },
      z: 9,
    },
  ],
}