<template>
  <el-dialog
    :visible.sync="addRepairNotesDialog"
    v-if="addRepairNotesDialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="90%"
    :fullscreen="fullscreen"
    class="fullscreen"
    append-to-body
  >
    <!-- <template slot="title">
      <modalTitle @setFullscreen="fullscreen = !fullscreen"></modalTitle>
    </template> -->
    <div class="ele-body">
      <el-card :body-style="{ padding: 0 }">
        <!-- tab切换 -->
        <div class="switch">
          <div class="switch_left">
            <ul>
              <li
                v-for="item in tabOptions"
                :key="item.key"
                :class="{ active: activeComp == item.key }"
                @click="activeComp = item.key"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <!-- <div class="right" style="padding: 10px">
          <el-button @click="$router.go(-1)">返回</el-button>
        </div> -->
        </div>
        <div class="page-title">
          <!-- <el-page-header @back="$router.go(-1)">-->
          <div slot="content" class="pageContent">
            <span v-for="item in tabOptions" :key="item.key">
              {{ item.key == activeComp ? item.name + '详情' : '' }}
            </span>
          </div>
          <!-- </el-page-header> -->
        </div>
        <div class="content-wrapper" style="margin-left: 10px">
          <component
            :is="activeComp"
            :id="id"
            :code="code"
            :showTitle="false"
          ></component>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
  import baseInfo from './edit.vue';
  import modalTitle from '@/components/modalTitle.vue';
  import maintain from './maintain.vue';
  import repair from './repair.vue';
  import malfunction from './malfunction.vue';
  import inventory from './inventory.vue';
  import pointInspection from './point-inspection.vue';
  import internet from './InternetOther.vue';
  import produceOrder from './produce-order.vue';
  export default {
    components: {
      baseInfo,
      // mould,
      pointInspection,
      maintain,
      repair,
      inventory,
      produceOrder,
      // InternetRecord,
      malfunction,
      internet,
      modalTitle
    },
    data() {
      return {
        // 设备主键id
        id: '',
        code: '',
        activeComp: 'baseInfo',
        addRepairNotesDialog: false,
        fullscreen: false,
        tabOptions: [
          { key: 'baseInfo', name: '设备信息' },
          { key: 'pointInspection', name: '巡点检记录' },
          { key: 'maintain', name: '保养记录' },
          // { key: 'mould', name: '关联模具' },
          { key: 'repair', name: '维修记录' },
          { key: 'malfunction', name: '故障记录' },
          { key: 'inventory', name: '盘点记录' },
          { key: 'internet', name: '物联数据' },
          { key: 'produceOrder', name: '生产记录' }
          // { key: 'healthRecord', name: '运行状况记录' }
          // // { key: "InternetRecord", name: "物联记录" },
        ]
      };
    },
    created() {
      this.id = this.$route.query.id;
      this.code = this.$route.query.code;
      console.log('routerouterouteroute', this.$route);
    },

    methods: {
      open(code, id) {
        this.addRepairNotesDialog = true;
        console.log(code, id, 'code, id');
        this.code = code;
        this.id = id;
      },

      handleClose() {
        this.$emit('refresh');
        this.addRepairNotesDialog = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .content-wrapper {
    background-color: #fff;
  }
  .page-title {
    background: #fff;
    padding: 26px 10px 15px;
    border-bottom: 1px solid #eaeefb;
  }
</style>
