import React from 'react';
import { connect } from 'react-redux';
import { Select } from 'antd';
import ReactECharts from 'echarts-for-react';
import moment from 'moment'

const { Option } = Select;

const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWater }) => {





   return <div style={{
      backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
      backgroundSize: '100% 36px',
      backgroundPosition: '0 0',
      backgroundRepeat: 'no-repeat', zIndex: 2,
      width: '26%', height: '56%', minWidth: 360, position: "absolute", left: 10, top: "44%"
   }}>
      <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
         <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>液位趋势</div>
      </div>
      <div style={{ width: '100%', height: 'calc(100% - 46px)', marginTop: 10, backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}>
         <ReactECharts
            option={{
               title: {
                  // text: v.name, 
               },
               grid: {
                  // width: 300,
                  // height: 200
               },
               dataZoom: [
                  {
                     type: 'slider',
                     showDetail:false
                  },
                  {
                     type: 'inside',
                    
                  },
               ],
               tooltip: {
                  trigger: 'axis'
               },
               legend: {
                  data: ['集水池液位', '池前（上游）液位'],
                  right: '10%',
                  textStyle: {
                     color: '#FFF',
                  },
               },
               xAxis: {
                  type: 'category',
                  // name: "时间",
                  boundaryGap: false,
                  data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm'))
               },
               yAxis: {
                  type: 'value',
                  name: "单位：m",
                  areaStyle: {
                     color: '#FFF',
                  },
               },
               series: [
                  {
                     type: 'line',
                     name: '集水池液位',
                     smooth: true,
                     areaStyle: {
                        color: '#0e9cff26',
                     },
                     data: depthWater?.map(v => v.sLiquid_level?.toFixed(2) || 0)
                  }, {
                     type: 'line',
                     name: '池前（上游）液位',
                     smooth: true,
                     areaStyle: {
                        color: '#0e9cff26',
                     },
                     data: depthWater?.map(v => v.sGrille_level?.toFixed(2) || 0)
                  },
               ]
            }}
            notMerge={true}
            lazyUpdate={true}
            style={{ width: "100%", height: "100%" }}
            theme={'ReactEChart'}
         />
      </div>
   </div>

}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      clientHeight: global.clientHeight,
   };
}

export default connect(mapStateToProps)(LevelTrend);