<template>
    <div class="object-container animate-border"  :class="roleinfo.btnVisible?'show':'hide'">
        <i></i><i></i>
        <div class="flex attribute-box column max-h">
            <div class="flex mb-1 attributetitle-box">
                <div style="height:31px" class="flex ai-c">
                    <div class="attributeimg"></div>
                    <div class="flex section-title fc-w fz-14">
                        <div class="flex-1 cursor" v-for="(item,index) in roleinfo.titleArr" :key="index" :class="roleinfo.titleIndex==index?'titleActive':''" @click="titlenavClick(index)">
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-1 content-box column">
                <div class="flex-1 table-box fc-w fz-14">
                    <div class="flex mb-1 tab-li" v-if="roleinfo.xihuluPath">
                        <div class="flex tab-li-left ai-c ">新型经营主体风采</div>
                        <div class="flex flex-1 tab-li-right ai-c auto" style="text-indent: 0">
                            <img style="width:220px;" :src="roleinfo.xihuluPath"  />
                        </div>
                    </div>
                    <div class="flex mb-1 tab-li" v-if="roleinfo.imgPath">
                        <div class="flex tab-li-left ai-c ">新型经营主体风采</div>
                        <div class="flex flex-1 tab-li-right ai-c auto" style="text-indent: 0">
                            <img style="width:220px;" :src="roleinfo.imgPath"  />
                        </div>
                    </div>
                    <div v-for="(item,index) in roleinfo.tableData" :key="index">
                        <div class="flex mb-1 tab-li" v-if="item.name">
                            <div class="flex tab-li-left ai-c ">{{ item.name }}</div>
                            <div class="flex flex-1 tab-li-right ai-c auto">
                                {{ item.value }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="mt-1 search-box">

                </div> -->
            </div>
        </div> 
    </div>
</template>
<script>
import {defineComponent, reactive, onMounted,inject,watch} from "vue";
export default defineComponent({
    name: 'realestate',
    components: {
        
    },
    props:['visible','tabledia','isShowImg'],
    setup(props,context) {
        let data = reactive({
            roleinfo:{
                btnVisible: true,
                titleIndex: 1,
                titleArr:['统计汇总','详情'],
                tableData: props.tabledia,
                imgPath: null,
                xihuluPath: null,
            }
        })
        watch(
            () => props.visible,
            (newVal, oldVal) => {
                data.roleinfo.btnVisible = newVal
            }
        )
        watch(
            () => props.tabledia,
            (newVal, oldVal) => {
                console.log('11111',newVal)
                data.roleinfo.imgPath = null
                data.roleinfo.tableData = newVal
                newVal.forEach(item =>{
                    if(item.name == '新型经营主体名称'){
                        data.roleinfo.imgPath = "/images/dapeng/" + item.value + ".jpg"
                    }
                })
            }
        )
        watch(
            () => props.isShowImg,
            (newVal, oldVal) => {
                if(newVal && newVal.includes("西葫芦")){
                    data.roleinfo.xihuluPath = "/images/dapeng/西葫芦.jpg"
                }else{
                    data.roleinfo.xihuluPath = null
                }
            }
        )
        onMounted(() => {
            data.roleinfo.tableData.forEach(item =>{
                if(item.name == '新型经营主体名称'){
                    data.roleinfo.imgPath = "/images/dapeng/" + item.value + ".jpg"
                }
            })
            if(props.isShowImg && props.isShowImg.includes("西葫芦")){
                data.roleinfo.xihuluPath = "/images/dapeng/西葫芦.jpg"
            }
           
        })
        let methods = {
            titlenavClick(index){
                data.roleinfo.titleIndex = index
                if(index == 0){
                    context.emit('handleObject',index)
                }
            }
        };
        return {
        ...methods,
        ...data,
        };
    },
});
</script>

<style scoped>
.object-container{
    position: fixed;
    width: 380px;
    height: calc(100% - 110px);
    top: 95px;
    right: 20px;
    z-index: 999;
}
.attributetitle-box{
    height: 36px;
    line-height: 31px;
    background: url(/images/cim/attributetitle.png);
    background-size: 100% 100%;
}
.attributeimg{
    width: 40px;
    height: 40px;
    background: url(/images/cim/attributeicon.png);
    background-size: 100% 100%;
    margin-left: 5px;
}
.section-title{
    width: 180px;
    height: 31px;
}
.section-title .titleActive{
    background: linear-gradient(180deg, rgba(34,169,255,0) 0%, #0CA5FF 100%);
}
.content-box{
    background: url(/images/cim/rightbg.png);
    background-size: 100% 100%;
    padding: 15px;
    overflow: hidden;
}
.table-box{
    overflow: auto;
}
.tab-li{
    min-height: 42px;
    background: url(/images/cim/list.png);
    background-size: 100% 100%;
    padding: 5px 3px;
}
.tab-li-left{
    width: 80px;
    padding-left: 10px;
    margin-right: 20px;
    font-size: 12px;
    text-align: left;
}
.tab-li-right{
    margin: 0 10px 0 1px;
    padding: 3px 0 3px 0;
    font-size: 12px;
    text-align: left;
    line-height: 20px;
    text-indent: 2em;
}  
.search-box{
    width: 100%;
    height: 200px;
    border: 1px solid red;
}
.auto{
    overflow: auto;
}
.object-container.show{
    right: 20px;
    animation:mymoveright 1.5s 1;
    -webkit-animation:mymoveright 1.5s 1;
}
.object-container.hide{
    right: -10000px;
    animation:mymoverighthide 1.5s 1;
    -webkit-animation:mymoverighthide 1.5s 1;
}

@keyframes mymoveright
{ from {right:0px;} to {right:20px;} }

@-webkit-keyframes mymoveright 
{ from {right:0px;} to {right:20px;} }

@keyframes mymoverighthide
{ from {right:20px;} to {right:-10000px;} }

@-webkit-keyframes mymoverighthide 
{ from {right:0px;} to {right:-10000px;} }

</style>
 