<template>
  <div class="flex" style="overflow-y: scroll">
    <!--维修记录-->
    <service-repair :data="data" @order_show="order_show"></service-repair>
    <!--改造记录-->
    <service-reform :data="data" @order_show="order_show"></service-reform>
    <!--工单各环节流转情况-->
    <modal v-if="orderlinkshow" :show.sync="orderlinkshow" width="80%" title="工单各环节流转信息" large backdrop="false" v-ref:modal>
      <article slot="modal-body" class="modal-body" style="height: 700px;padding: 0!important;">
        <order-link-detail :data="data" :ordersn="ordersn"></order-link-detail>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>

  </div>
</template>

<script>
/**
*工单信息
*/

import ServiceRepair from './ServiceRepair'
import OrderLinkDetail from './OrderLinkDetail'
import ServiceReform from './ServiceReform'
export default {
  title: '工单信息',
  data () {
    return {
      orderlinkshow: false
    }
  },
  components: {ServiceRepair,ServiceReform,OrderLinkDetail},
  props: {
    data: {
      type: Object
    },
    ordersn:''
  },
  ready () {
    // this.getAuthority()
  },
  methods: {
    async order_show (val) {
      this.ordersn = val
      this.orderlinkshow = true
    }
  }
}
</script>
<style lang="less">
  #mulit-info-class {
    width: 280px;
    margin-right: 20px;
    overflow-y: auto;
    > div {
      height: auto;
      margin-bottom: 8px;
    }
  }
  // 内容显示样式
  .control-label {
    height: 23px;
    border-right: 1px solid #F2F6FA;
    margin-bottom: 0;
    text-align: left;
  }

  .info-content {
    padding:6px;
    span {
      padding-left: 5px;
    }
  }
// 信息区域的表格显示紧凑
  .self-table > tbody > tr > td {
    padding: 3px;
    text-align: center;
  }
</style>
