<template>
  <div>
    <transition name="fade">
      <div v-show="isShow" class="modal" @click="hide">
        <dv-border-box-10 style="width: 100%;height: 100%;">
          <div style="padding: 20px;width: 100%;height: 100%;">
            <table>
              <thead>
              <tr>
                <th colspan="2" style="height: 74px;font-size: 26px;letter-spacing: 4px;font-weight: 600;">{{ data.equipment_id_equipments_id_relation ? data.equipment_id_equipments_id_relation.name : '' }}</th>
              </tr>
              <tr style="height: 54px;">
                <th>时间</th>
                <th style="width: 64%;">内容</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>
                  <div>
                    <div>{{ $moment(data.start_time).format('YYYY-MM-DD HH:mm:ss') }}</div>
                    <div style="padding: 10px 0;">~</div>
                    <div>{{ $moment(data.end_time).format('YYYY-MM-DD HH:mm:ss') }}</div>
                  </div>
                </td>
                <td>
                  <div style="text-align: left;padding: 20px;height: 100%;">
                    {{ data.content }}
                    <p style="text-align: right;padding: 10px 6px;">执行状态：{{ typeMap.get(data.status) }}</p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>签名板</td>
                <td>xxx</td>
              </tr>
              </tbody>
            </table>
          </div>
        </dv-border-box-10>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      data: {},
      typeMap: new Map([
        [1,'待下发'],
        [2,'已下发'],
        [3,'待执行'],
        [4,'执行中'],
        [5,'已取消'],
        [6,'已完成']
      ])
    }
  },
  methods: {
    show () {
      this.isShow = true
    },
    hide () {
      this.isShow = false
    },
    setData (data) {
      this.data = data
    }
  },
  computed: {},
}
</script>

<style scoped lang="scss">

.modal {
  width: 1000px;
  height: 560px;
  background: #0d111f;
  position: fixed;
  top: calc(50% - 280px);
  left: calc(50% - 500px);

  table {
    text-align: center;
    border-collapse: collapse;
    font-size: 22px;
    width: 100%;
    height: 100%;

    td,th {
      border: 1px solid #d6e1f6;
    }
  }
}
</style>
