import React from 'react'
import { Box, AutoRollComponent, NoData } from '$components';
// import ReactEcharts from 'echarts-for-react';
import { Progress } from 'antd';

function PopulationDynamics(props) {
    const { fireDevice } = props;
    const total = fireDevice.reduce((p, n) => p + n.device_count, 0);

    // let Ydata = fireDevice.map(d => d.type_name);
    // let Xdata = fireDevice.map(d => d.device_count);
    // const options = {
    //     xAxis: {
    //         type: 'value',
    //         show: false,
    //     },
    //     grid: {
    //         left: -10,
    //         top: 20,
    //         bottom: 0,
    //         right: 20,
    //         containLabel: true,
    //     },
    //     yAxis: [
    //         {
    //             type: 'category',
    //             inverse: true,
    //             axisLabel: {
    //                 show: true,
    //                 margin: 25,
    //                 // textStyle: {
    //                 color: '#ECF7FF',
    //                 fontSize: 12,
    //                 // },
    //                 // 调整左侧文字的3个属性，缺一不可
    //                 verticalAlign: 'center',
    //                 align: 'left',
    //                 //调整文字上右下左
    //                 padding: [0, 0, 0, -30],
    //             },
    //             splitLine: {
    //                 show: false,
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //             data: Ydata
    //         },
    //         {
    //             inverse: true,
    //             // y轴最右侧的文字
    //             axisTick: "none",
    //             axisLine: "none",
    //             type: "category",
    //             axisLabel: {
    //                 // margin: 10,
    //                 // textStyle: {
    //                 color: "#24DCF7",
    //                 fontSize: "12",
    //                 // },
    //                 rich: {

    //                     a1: {
    //                         color: '#24DCF7',
    //                         width: 5,
    //                         height: 5,
    //                         fontSize: 16,
    //                     },
    //                     a2: {
    //                         color: '#5999C8',
    //                         width: 5,
    //                         height: 5,
    //                         fontSize: 12,
    //                     },
    //                 },
    //                 formatter: function (value) {
    //                     return [`{a1|${value}}      {a2|个}`];
    //                 },
    //             },
    //             data: Xdata,
    //         },
    //     ],
    //     series: [
    //         {
    //             type: 'bar',
    //             barWidth: 12,
    //             zlevel: 2,
    //             z: 2,
    //             showBackground: true,
    //             backgroundStyle: {
    //                 color: '#2B375C'
    //             },
    //             color: '#005AC6',

    //             label: {
    //                 show: false,

    //             },
    //             data: Xdata,
    //         },
    //         {
    //             type: "pictorialBar",
    //             // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
    //             symbolSize: [15, 15],
    //             symbolOffset: [0, 0],
    //             symbolPosition: "right",
    //             z: 20,
    //             zlevel: 20,
    //             itemStyle: {
    //                 // normal: {
    //                 color: "#fff"
    //                 // }
    //             },
    //             data: (function () {
    //                 var list = [];
    //                 for (var i = 0; i < Xdata.length; i++) {
    //                     list.push(2.02 * Xdata[i]);
    //                 }
    //                 console.log(list)
    //                 return list;
    //             })()
    //         },
    //     ],
    // };

    const getContent = () => {
        return <div className='fire-device'>{
            fireDevice.map(d => <div className='fire-device-item'>
                <div className='_name'>{d.type_name}</div>
                <div className='_progress'>
                    <Progress
                        percent={(d.device_count / total) * 100}
                        showInfo={false}
                        strokeWidth={12}
                        strokeColor='#005AC6'
                        trailColor='#2B375C'
                        strokeLinecap="butt"
                    />
                    <div className='_round' style={{
                        position: 'absolute',
                        left: `calc(${(d.device_count / total) * 100}% - 6px)`,
                    }}></div>
                </div>
                <div className='_count'>{d.device_count}<span className='_unit'>个</span></div>
            </div>)
        }</div>
        // <ReactEcharts
        //     option={options}
        //     notMerge
        //     lazyUpdate
        //     style={{ height: 250, width: 423 }}
        // />
    }

    return <Box title={"接入消防设备"} >
        {
            fireDevice.length
                ? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-middle`} />
                : <NoData height={250} />
        }
    </Box>
}

export default PopulationDynamics;