<template>
    <el-container class="cim-s-sp">
        <div class="info-box">
            <div class="info-close" @click="close">X</div>
            <div class="title">区域基础设施</div>
            <div class="echrtscontainer" id="barCharts"></div>
        </div>
    </el-container>
</template>
<script>
import {defineComponent, reactive, onMounted, inject } from "vue";
    /**
     * 小区房屋信息
     * **/
export default defineComponent({
    name: 'houseinfo',
    props: {
        tableDatas: {}
    },
    setup(props,context) {
        let data = reactive({
            // tabletitle: props.tableDatas.title,
            // labesData: props.tableDatas.labesData,
            // tablesData: props.tableDatas.tablesData
            //tabletitle: '标题'
            // labesData: [
            //     { name: '单位名称' , field: 'name' },
            //     { name: '信息名称' , field: 'typename' },
            //     { name: '接入方式' , field: 'accesstype' },
            //     { name: '时间' , field: 'date' }
            // ],
            // tablesData:[
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1 15:30:48'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'}
            // ]
        })
        onMounted(() => {
            change();

        })
        let echarts = inject("echarts");
        const change = () => {
            const chartBox = echarts.init(document.getElementById("barCharts")); 
            const option = {
                grid: {
                    bottom: '15%',
                    left: '10%',
                    right: '5%',
                    top: '10%',
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}"
                },
                xAxis: {
                    data: ["通讯", "公安交警", "文化活动", "娱乐", "教育", "餐饮", "医疗卫生", "车站", "银行"],
                    axisLabel: {
                        interval: 1,
                        textStyle:{
                            color:'#fff',
                        }
                    }
                },
                yAxis: {
                    axisLabel: {
                        interval:0,
                        textStyle:{
                            color:'#fff',
                        }
                    }
                },
                series: [
                {
                    name: '区域基础设施',
                    type: "bar",
                    data: [23, 24, 18, 25, 27, 28, 25, 21, 20],
                },
                ],
            };
            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                chartBox.resize();
            })
        }

        let methods = {
            close(){
                context.emit('close')
            }
        };
        return {
        ...methods,
        ...data,
        };
    },
});
</script>

<style lang="scss" scoped>
.cim-s-sp{
    width: 350px;
    padding: 0 10px;
    min-height: 150px;
    background: url(/public/images/common/bg1.png);
    background-size: 100% 100%;
}

.info-box{
    width: 100%;
    height: 100%;
    position: relative;
}
.info-box .title{
    display: inline-block;
    margin: 10px auto;
    color: #fff;
    font-size: 16px;

}
.info-close{
  color: #fff;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 14px;
  cursor: pointer;
}
.echrtscontainer{
    height: 200px;
}

</style>