<template>
  <div>
    <transition name="fade">
      <div v-show="isShow" class="modal">
        <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;">
                  <div style="position: relative;">
                    <p>{{ data.equipment_id_equipments_id_relation ? data.equipment_id_equipments_id_relation.name : '' }}</p>
                    <Button style="position: absolute;top: 50%;right: 20px;transform: translateY(-50%)" type="primary" ghost @click="hide">关闭</Button>
                  </div>
                </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') }}</div>
                    <div style="padding: 10px 0;">~</div>
                    <div>{{ $moment(data.end_time).format('YYYY-MM-DD HH:mm') }}</div>
                  </div>
                </td>
                <td>
                  <div style="line-height: 1.2;text-align: left;padding: 20px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
                    <p>发令人：{{ data.admin ? data.admin.name : '' }}</p>
                    <p>发令时间：{{ $moment(data.created_at).format("YYYY-MM-DD HH:mm") }}</p>
                    <p>接收人：</p>
                    <p>开启时间：{{ $moment(data.start_time).format("YYYY-MM-DD HH:mm") }}</p>
                    <p>关闭时间：{{ $moment(data.end_time).format("YYYY-MM-DD HH:mm") }}</p>
                    指令内容：{{ data.content }}
                    <p style="padding: 10px 0;">执行状态：{{ typeMap.get(data.status) }}</p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>执行状态</td>
                <td>
                    <template v-if="data.status === 2">
                      <div class="btns">
                        <Button type="primary" @click="esignConfirm">接收调令</Button>
                      </div>
                    </template>
                    <template v-else-if="data.status !== 6">
                      <div class="sign-container">
                        <div v-if="data.act_start_time">
                          <div>
                            <p style="text-align: left;">开启时间：{{ $moment(data.act_start_time).format("YYYY-MM-DD HH:mm") }}</p>
                            <img style="height: 50px;" class="d-flex" :src="data.start_sign_uploads_id_relation ? data.start_sign_uploads_id_relation.url : ''" alt="">
                          </div>
                        </div>

                        <vEsign style="flex: 1;"  ref="esign" line-color="#eee" bg-color="" :line-width="5"></vEsign>

                        <div class="btns">
                          <Button type="primary" ghost @click="$refs['esign'].reset()">重置</Button>
                          <Button type="primary" @click="esignConfirm">确认</Button>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div style="padding: 20px;height: 100%;" class="d-flex flex-column">
                        <div class="flex-1">
                          <p style="text-align: left;">开启时间：{{ $moment(data.act_start_time).format("YYYY-MM-DD HH:mm") }}</p>
                          <img style="height: 50px;" class="d-flex" :src="data.start_sign_uploads_id_relation ? data.start_sign_uploads_id_relation.url : ''" alt="">
                        </div>
                        <div style="margin-top: 20px;" class="flex-1">
                          <p style="text-align: left;">关闭时间：{{ $moment(data.act_end_time).format("YYYY-MM-DD HH:mm") }}</p>
                          <img style="height: 50px;" class="d-flex" :src="data.end_sign_uploads_id_relation ? data.end_sign_uploads_id_relation.url : ''" alt="">
                        </div>
                      </div>
                    </template>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </dv-border-box-10>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from 'axios'
import vEsign from "vue-esign";
import { base64toFile, deepCopy } from "@/utils"
import { getToken } from "@/utils/auth";
import { save } from "@/api/system/baseForm";
export default {
  components: {
    vEsign
  },
  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
    },
    async esignConfirm () {
      let fileInfo;
      if (this.data.status !== 2) {
        const base64 = await this.$refs['esign'].generate({ format:'image/png', quality: 0.7 });
        const file = base64toFile(base64,`${new Date().getTime()}.png`)
        const form = new FormData();
        form.append('file',file)
        fileInfo = await axios.post(process.env.VUE_APP_UPLOAD_API,form,{
          headers: {
            Authorization: "Bearer " + getToken()
          }
        })
      }

      let copyData = deepCopy(this.data)
      if (this.data.status === 2) {
        copyData.status = 3;
        for (let key in copyData) {
          if (/_relation/g.test(key)) {
            delete copyData[key]
          }
        }
        save({
          table_name: 'transfers',
          ...copyData
        }).then(_ => {
        })
      }
      if (this.data.status === 3) {
        copyData.status = 4;
        copyData.start_sign = fileInfo.data?.id;
        copyData.act_start_time = this.$moment().format('YYYY-MM-DD HH:mm');
        for (let key in copyData) {
          if (/_relation/g.test(key)) {
            delete copyData[key]
          }
        }
        save({
          table_name: 'transfers',
          ...copyData
        }).then(_ => {
          this.$emit('refresh')
        })
      }
      if (this.data.status === 4) {
        copyData.status = 6;
        copyData.end_sign = fileInfo.data?.id;
        copyData.act_end_time = this.$moment().format('YYYY-MM-DD HH:mm');
        for (let key in copyData) {
          if (/_relation/g.test(key)) {
            delete copyData[key]
          }
        }
        save({
          table_name: 'transfers',
          ...copyData
        }).then(_ => {
          this.$emit('refresh')
        })
      }

      this.$refs['esign'].reset()
      this.hide()
    }
  },
  computed: {},
}
</script>

<style scoped lang="scss">
$width: 1300px;
$height: 860px;
.modal {
  width: $width;
  height: $height;
  background: #0d111f;
  position: fixed;
  top: calc(50% - (#{$height} / 2));
  left: calc(50% - (#{$width} / 2));

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

    td,th {
      border: 2px solid #d6e1f6;
    }
  }

  .sign-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    padding: 20px;
    .btns {
    }
  }
}
</style>
