<template>
  <div>
    <Navbar title="同步界面" :is-go-back="true" />
    <div class="flex-header">
      <div class="form-inline">
        <div class="form-group">
          <a-button type="primary" @click="startSync">同步保养表单信息</a-button>
        </div>
        <div class="form-group">
          <a-button type="primary" @click="start">同步机台</a-button>
        </div>
        <div class="form-group">
          <a-button type="primary" @click="start1">同步行事历</a-button>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import {
  SqlApi,
} from 'pc-component-v3';
import {
  Notify,
} from 'pc-component-v3';
import MaintenanceSheetResource from '../api/pad/MaintenanceSheetResource.js';
import MachineMaintenanceSheetResource from '../api/pad/MachineMaintenanceSheetResource.js';
import MaintenancePlanResource from '../api/pad/MaintenancePlanResource.js';
import CalendarResource from '../api/pad/CalendarResource.js';

export default {
  components: {
    MaintenanceSheetResource,
    MachineMaintenanceSheetResource,
    CalendarResource,
    MaintenancePlanResource,
  },

  data: function() {
    return {
      loading: false,
    };
  },
  mounted: function() {

  },

  methods: {
    /**
       * 开始同步
       */
    startSync: function() {
      var _self = this;
      _self.loading = true;
      MaintenanceSheetResource.synchronousMaintenanceForm().then(successData => {
        console.log(successData);
        _self.loading = false;
      }, errorData => {
        _self.loading = false;
        Common.processException(errorData);
      });
    },
    /**
       * 开始同步机台与表单关系
       */
    start: function() {
      var _self = this;
      _self.loading = true;
      MachineMaintenanceSheetResource.synchronousMachineMaintenanceForm().then(successData => {
        console.log(successData);
        _self.loading = false;
      }, errorData => {
        _self.loading = false;
        Common.processException(errorData);
      });
    },

    /**
       * 开始同步行事历
       */
    start1: function() {
      var _self = this;
      _self.loading = true;
      CalendarResource.syncCalendar().then(successData => {
        console.log(successData);
        _self.loading = false;
      }, errorData => {
        _self.loading = false;
        Common.processException(errorData);
      });
    },
  },
};
</script>

<style scoped>
  .flex-container {
    display: flex;
    /* 垂直*/
    flex-direction: column;
    width: 100%;
    /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
    height: calc(100vh - 150px);
  }

  .flex-content {
    flex: 1;
    overflow: scroll;
    width: 100%;
    height: 0;
  }

  .fixed-table {
    table-layout: fixed;
    width: 800px !important;
    min-width: 800px !important;
  }

  table.fixed-table tr {
    height: 40px;
  }

  table.fixed-table th,
  table.fixed-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .flex-header {
    height: 80px;
    /*放大缩小比例为0 */
    flex: 0 0 100px;
  }

  .flex-footer {
    margin-top: 0.8em;
    height: 35px;
    /*放大缩小比例为0 */
    flex: 0 0 35px;
  }

  .form-inline .form-group button {
    width: 250px;
    text-align: center;
    margin: 30px;
  }

  .form-inline .form-group label {
    width: 100px;
    text-align: right;
    padding-right: 5px;
  }

  .form-inline .form-group input,
  .form-inline .form-group select {
    width: 200px;
  }

  .file-image-div {
    width: 150px;
    height: 120px;
    text-align: center;
  }

  .my-icon {
    font-size: 100px !important;
    padding: 10px;
  }

  .attachment-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: small;
    max-width: 150px;
  }

  .attachment-label:hover {
    text-overflow: inherit;
    overflow: visible;
  }
</style>
