<template>
    <div class="saga-fill">
        <div class="mess-view">
            <div class="saga-title">{{renderData.Name}}</div>
            <div class="point-type">通讯协议：{{renderData.ProtocolType}}</div>
            <div class="point-des">
                <p class="p">{{renderData.Description}}</p>
            </div>
        </div>
        <div class="doughnut-view">
            <doughnut v-if="renderData.Sum" type="type" width="200" height="200" :sum="renderData.Sum" :name="renderData.Name" :renderData="echartsData" :id="id"></doughnut>
            <div v-else class="center">
                <i class="icon-wushuju iconfont"></i>
                暂无数据
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script>
    import doughnut from "@/components/echarts/doughnut"
    export default {
        name: "dataOrgin",
        components: {
            doughnut
        },
        props: {
            id: {
                type: String,
                default: function createRandomId() {
                    return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
                }
            },
            renderData: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        data() {
            return {
                echartsData: []
            }
        },
        created() {
            console.log(this.renderData)
            this.changeData()
        },
        mounted() {},
        methods: {
            changeData() {
                this.echartsData = [
                    {
                        name: "已关联:" + this.renderData.Related ,
                        value: this.renderData.Related
                    },
                    {
                        name: "未关联:" + this.renderData.Notrelated,
                        value: this.renderData.Notrelated
                    },
                    {
                        name: "未使用:" + this.renderData.Notused,
                        value: this.renderData.Notused
                    },
                ]
            }
        },
        watch: {
            renderData: {
                deep: true,
                handler: function() {
                    this.changeData()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mess-view {
        height: 90px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        padding: 10px 20px 10px 15px;
        .saga-title {
            font-size: 14px;
            color: #333;
            font-weight: 600;
            line-height: 14px;
        }
        .point-type{
            font-size: 12px;
            height: 17px;
            line-height: 17px;
            margin-top: 5px;
            margin-bottom: 10px;
            color: #999;
        }
        .point-des{
            font-size: 12px;
            height: 17px;
            line-height: 17px;
            p{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                color: #999;
            }
        }
    }
    .saga-fill {
        .doughnut-view {
            height: 165px;
            width: 100%;
            padding: 0 5px;
            box-sizing: border-box;
        }
    }
</style>

