import echarts from 'echarts/lib/echarts';

export default function DrpOption(data=[],wrz,grz) {
   const maxVal = Math.max(...data.map(obj => obj.drp))
    const maxSw = Math.max(...data.map(obj => obj.z))
    const minSw = Math.min(...data.map(obj => obj.z))
    const maxLl = Math.max(...data.map(obj => obj.tq))
    const minLl = Math.min(...data.map(obj => obj.tq))
  let eopts = {
     tooltip: {
         trigger: 'axis',
       },
       grid: [
         {
           top: "13%",
           left: "10%",
           right: "8%",
           width: '80%',
           height: '35%'
         },
         {
           bottom: "5%",
           left: "10%",
           right: "8%",
           width: '80%',
           height: '35%'
         },
       ],
       legend: {
         // 显示图例
         show: true,
         // 图例的位置
         data: ['警戒水位', '危险水位', "降雨量", "水位", "转换流量"],
         left:3,
         right:0,
         itemWidth:16,
       },
       xAxis: [
         {
           gridIndex: 0,
           type: 'category',
           data: data.map(o => o.tm).reverse(),
           splitLine: {
             show: false
           },
           axisLabel: {
             color: '#333',
             fontSize: 12,
             show:false,
           },
           axisLine: {
             lineStyle: {
               color: '#07a6ff',
               width: 0.5,
             }
           },
           axisTick: {
             show: false,
           },
         },
         {
           gridIndex: 1,
           type: 'category',
           data: data.map(o => o.tm.substr("2020-".length,11)),
           inverse: true,
           splitLine: {
             show: false
           },
           axisLabel: {
             color: '#333',
             fontSize: 12,
             formatter: val => val.substr('2020-'.length, 11)
           },
           axisLine: {
             lineStyle: {
               color: '#07a6ff',
               width: 0.5,
             }
           },
           axisTick: {
             show: false,
           },
         }
       ],
       yAxis: [
         {
           inverse: true,
           gridIndex: 0,
           type: 'value',
           position: 'left',
           name: "降雨量(mm)",
           nameLocation: "start",
           axisLabel: {
             color: '#333',
             fontSize: 12,
           },
           splitLine: {
             show: true,
             lineStyle: {
               color: '#07a6ff',
               width: 0.25,
               type: 'dotted'
             }
           },
           axisLine: {
             show: false
           },
           axisTick: {
             show: false,
           },
           min: 0,
           max: maxVal
         },
         {
           gridIndex: 1,
           type: 'value',
           position: 'left',
           name: "水位(m)",
           splitLine: {
             show: true,
             lineStyle: {
               color: '#07a6ff',
               width: 0.25,
               type: 'dotted'
             }
           },
           axisLabel: {
             color: '#333',
             fontSize: 12,
           },
           axisLine: {
             show: false
           },
           axisTick: {
             show: false,
           },
           min: minSw,
           max: maxSw
         },
         {
           gridIndex: 1,
           type: 'value',
           position: 'right',
           name: "流量(m³/s)",
           splitLine: {
             show: false,
             lineStyle: {
               color: '#07a6ff',
               width: 0.25,
               type: 'dotted'
             }
           },
           axisLabel: {
             color: '#333',
             fontSize: 12,
           },
           axisLine: {
             show: false
           },
           axisTick: {
             show: false,
           },
           min: minLl,
           max: maxLl
         }
       ],
  }
  let chartData = {
    series: [
   
         {
           xAxisIndex: 1,
           yAxisIndex: 1,
           name: '警戒水位',
           type: 'line',
           color: "#F59A23",
           barWidth: '60%',
           data:  data.map(o => wrz),
           lineStyle: {
             type: "dashed"
           },
           symbol: 'none' // 设置标记点为'none'，即去掉圆点
         },
         {
           xAxisIndex: 1,
           yAxisIndex: 1,
           name: '危险水位',
           type: 'line',
           color: "#D9001B",
           lineStyle: {
             type: "dashed"
           },
           data:  data.map(o => grz),
           symbol: 'none' // 设置标记点为'none'，即去掉圆点
         },
         {
           name: '降雨量',
           type: 'bar',
           barWidth: '60%',
           data:  data.map(o => o.drp).reverse(),
           itemStyle: {
             color: "#007AFD",
           },
           label: {
             show: false,
           },
   
         },
         {
           xAxisIndex: 1,
           yAxisIndex: 1,
           name: '水位',
           type: 'line',
           symbol: 'none',
           color: "#0AE0B5",
           label: {
             show: false,
           },
           data:  data.map(o => o.z ? o.z.toFixed(2) : null),
         },
         {
           xAxisIndex: 1,
           yAxisIndex: 2,
           name: '转换流量',
           type: 'line',
           color: "#007AFD",
           symbol: 'none',
           showSymbol: false,
           label: {
             show: false,
           },
           data:  data.map(o => o.tq),
         }
       ]
  }
   return {
     eopts,
     chartData
   }
}