<!--物联分类详情-->
<template>
  <div class="page-container iotClassification-info">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{propsData.typeName}}详情</p>
      <p class="page-top-title-out-p" @click="outButton">返回</p>
      <p class="page-top-title-submit-p" v-if="tableType == 1" @click="modelSubmitButton">提交</p>
    </div>
    <div class="content-box">
      <div class="text-box">
        <div>
          <p>标识：</p>
          <p>{{propsData.typeKey}}</p>
        </div>
        <div>
          <p>状态：</p>
          <p>{{propsData.state?'启用':'停用'}}</p>
        </div>
      </div>
      <div class="table-button">
        <div>
          <p class="cursor-p" @click="tableClick(1)"
             :class="tableType == 1? 'checkTableColor':''">模型</p>
          <p :class="tableType == 1? 'checkTableBack':''"></p>
        </div>
        <div>
          <p class="cursor-p" @click="tableClick(2)"
             :class="tableType == 2? 'checkTableColor':''">属性</p>
          <p :class="tableType == 2? 'checkTableBack':''"></p>
        </div>
        <div>
          <p class="cursor-p" @click="tableClick(3)"
             :class="tableType == 3? 'checkTableColor':''">功能</p>
          <p :class="tableType == 3? 'checkTableBack':''"></p>
        </div>
        <div class="div-flex">
          <p> </p>
          <p></p>
        </div>
      </div>
      <model-page ref="modelPage" v-if="tableType == 1"></model-page>
      <attribute-page v-if="tableType == 2"></attribute-page>
      <function-page v-if="tableType == 3"></function-page>
    </div>
  </div>
</template>

<script>
  import modelPage from "./modelPage.vue";
  import attributePage from "./attributePage.vue";
  import functionPage from "./functionPage.vue";
  export default {
    name: 'infoPage',
    components: {
      modelPage,
      attributePage,
      functionPage,
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        tableType:1,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //table切换
      tableClick(type){
        if(type != this.tableType){
          this.$set(this,'tableType',type);
        }
      },
      //保存按钮
      modelSubmitButton(){
        this.$refs.modelPage.modelSubmit();
      },
      //返回按钮
      outButton(){
        this.$parent.tableButton('out')
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotClassification-info{
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .text-box{
        display: flex;
        div{
          display: flex;
          width:400px;
          p{
            margin-top:10px;
            line-height:40px;
          }
          p:nth-child(1){
            width:122px;
            text-align: right;
          }
          p:nth-child(2){

          }
        }
      }
      .table-button{
        display: flex;
        div{
          width:180px;
          p{
            text-align: center;
          }
          p:nth-child(1){
            height:60px;
            line-height:60px;
          }
          p:nth-child(2){
            height:2px;
            background-color: #dedede;
          }
          .cursor-p{
            cursor: pointer;
          }
          .checkTableColor{
            color:#0045AF!important;
          }
          .checkTableBack{
            background-color: #0045AF!important;
          }
        }
        .div-flex{
          flex:1;
        }
      }
    }
  }
</style>
