<template>
  <div>
    <transition name="fade">
      <div v-show="isShow" class="modal" :style="{ 'z-index': zIndex }">
        <div class="mask" @click.stop="hide"></div>

        <dv-border-box-10 style="z-index: 11; width: 100%; height: 100%;">
          <div style="padding: 5px; width: 100%; height: 100%;">
            <table style="background: #fefefe;border-radius: 10px;">
              <thead>
                <tr>
                  <th
                    colspan="2"
                    style="
                      height: 56px;
                      font-size: 2.2rem;
                      letter-spacing: 4px;
                      font-weight: 600;
                    "
                  >
                    <div style="position: relative">
                      <p>
                        {{
                          data && 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"
                        size="small"
                        ghost
                        @click="hide"
                        >关闭</Button
                      >
                    </div>
                  </th>
                </tr>
                <tr style="height: 36px">
                  <th>日志</th>
                  <th style="width: 64%">内容</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div style="padding: 0 20px;overflow-y: scroll;max-height: 60rem;">
                      <div v-if="data.receive_time">接收时间：{{ $moment(data.receive_time).format("YYYY-MM-DD HH:mm") }}</div>
                      <div v-if="data.notice_open_time">通知开启：{{ $moment(data.notice_open_time).format("YYYY-MM-DD HH:mm") }}</div>
                      <div v-if="data.open_time">开启时间：{{ $moment(data.open_time).format("YYYY-MM-DD HH:mm") }}</div>
                      <div v-if="data.notice_close_time">通知关闭：{{ $moment(data.notice_close_time).format("YYYY-MM-DD HH:mm") }}</div>
                      <div v-if="data.close_time">关闭时间：{{ $moment(data.close_time).format("YYYY-MM-DD HH:mm") }}</div>
                      <div v-if="data.id_logs_transfer_id_relation && data.id_logs_transfer_id_relation.length > 0">
                        <p v-for="item in data.id_logs_transfer_id_relation" style="text-align: left;margin-top: 10px;">{{ $moment(item.created_at).format("YYYY-MM-DD HH:mm") }}{{ item.content }}</p>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div
                      style="
                        max-height: 19vh;
                        overflow-y: scroll;
                        line-height: 2;
                        text-align: left;
                        padding: 10px;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                      "
                    >
                      <p>发 令 人： {{ data.admin ? data.admin.name : "" }}</p>
                      <p>
                        发令时间：{{
                          $moment(data.created_at).format("YYYY-MM-DD HH:mm")
                        }}
                      </p>
                      <p>接 收 人： {{ data.jieshouren }}</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>
                      <p>指令内容：{{ data.content }}</p>
                      <p>
                        执行状态：{{ typeMap.get(data.status) }}
                      </p>
                      <p v-if="data.equipment_id_equipments_id_relation && data.equipment_id_equipments_id_relation.type === 1">
                        开启数量：{{ data.kaiqishuliang }} / {{ data.equipment_id_equipments_id_relation ? data.equipment_id_equipments_id_relation.bengzhashuliang : 0 }}
                      </p>

                      <div style="display:flex;">
                        <p>调令反馈：</p>

                        <div>
                          <p v-for="i in data.id_feedbacks_transfer_id_relation">{{ i.content }}  {{ $moment(i.created_at).format('YYYY-MM-DD HH:mm') }}</p>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>执行状态</td>
                  <td>
                    <template v-if="data.status === 2 || data.status === 3">
                      <div class="sign-container" v-if="!readonly">
                        <vEsign
                          style="flex: 1"
                          ref="esign"
                          line-color="#333"
                          bg-color=""
                          :line-width="5"
                        ></vEsign>

                        <div class="btns">
                          <Button
                            type="primary"
                            size="small"
                            ghost
                            @click="$refs['esign'].reset()"
                            >清空签名</Button
                          >
                          <Button
                            type="primary"
                            size="small"
                            @click="esignConfirm(false)"
                            >通知现场</Button
                          >
                          <Button
                            type="primary"
                            size="small"
                            @click="esignConfirm(true)"
                            >确认执行</Button
                          >
                        </div>
                      </div>
                    </template>
                    <template v-else-if="data.status === 4">
                      <div class="sign-container" v-if="!readonly">
                        <vEsign
                          style="flex: 1"
                          ref="esign"
                          line-color="#333"
                          bg-color=""
                          :line-width="5"
                        ></vEsign>

                        <div class="btns">
                          <Button
                            type="primary"
                            size="small"
                            ghost
                            @click="$refs['esign'].reset()"
                            >清空签名</Button
                          >
                          <Button
                            type="primary"
                            size="small"
                            @click="esignConfirm(true)"
                            >确认执行</Button
                          >
                        </div>
                      </div>
                    </template>
                    <template v-else-if="data.status === 5">
                      <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
                          v-if="!readonly"
                          style="flex: 1"
                          ref="esign"
                          line-color="#333"
                          bg-color=""
                          :line-width="5"
                        ></vEsign>

                        <div class="btns" v-if="!readonly">
                          <Button
                            type="primary"
                            size="small"
                            ghost
                            @click="$refs['esign'].reset()"
                            >清空签名</Button
                          >
                          <Button
                            type="primary"
                            size="small"
                            @click="esignConfirm(false)"
                            >通知现场</Button
                          >
                          <Button
                            type="primary"
                            size="small"
                            @click="esignConfirm(true)"
                            >确认关闭</Button
                          >
                        </div>
                      </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
                          v-if="!readonly"
                          style="flex: 1"
                          ref="esign"
                          line-color="#333"
                          bg-color=""
                          :line-width="5"
                        ></vEsign>

                        <div class="btns" v-if="!readonly">
                          <Button
                            type="primary"
                            size="small"
                            ghost
                            @click="$refs['esign'].reset()"
                            >清空签名</Button
                          >
                          <Button
                            type="primary"
                            size="small"
                            @click="esignConfirm(true)"
                            >确认关闭</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: 100px"
                            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: 100px"
                            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 { PopupManager } from "element-ui/src/utils/popup"
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 {
      zIndex: 2000,
      isShow: false,
      readonly: false,
      data: {},
      typeMap: new Map([
        [1, "待下发"],
        [2, "已下发"],
        [3, "确认接收"],
        [4, "已通知开启"],
        [5, "确认开启"],
        [6, "已通知关机"],
        [7, "确认关机"]
      ]),
    };
  },
  methods: {
    //同步被调整调令状态一致
    async setPTransferStatus (resetStatus) {
      if (this.data.is_adjust &&
        this.data.to_transfer_id &&
        this.data.to_transfer_id_transfers_id_relation &&
        resetStatus > this.data.to_transfer_id_transfers_id_relation.status) {
        await save({
          id: this.data.to_transfer_id,
          table_name: "transfers",
          status: resetStatus
        },false)
      }

    },

    show() {
      this.$emit('pause')
      if (!this.readonly) {
        if (this.data.status === 2) {
          this.$confirm(
            "确认接收调令？",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then((res) => {
            let copyData = deepCopy(this.data);
            copyData.status = 3;
            copyData.receive_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,
              },
              false
            ).then((_) => {
              this.$emit("refresh");
              this.$emit('start');
            });
          }).catch(_ => {
            this.$emit('start')
          });
          return;
        }
        if (this.data.status === 3 || this.data.status === 5) {
          this.$confirm(
            `确认要通知现场${(this.data.status === 3 || this.data.tiaozhengleixing === 0) ? "开启" : "关闭"}？`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then((res) => {
            let copyData = deepCopy(this.data);
            copyData.status = (this.data.status === 3 || this.data.tiaozhengleixing === 0) ? 4 : 6;
            this.data.status === 3 ? (copyData.notice_open_time = this.$moment().format('YYYY-MM-DD HH:mm')) : (copyData.notice_close_time = this.$moment().format('YYYY-MM-DD HH:mm:ss'))
            for (let key in copyData) {
              if (/_relation/g.test(key)) {
                delete copyData[key];
              }
            }
            save(
              {
                table_name: "transfers",
                ...copyData,
              },
              false
            ).then((_) => {
              this.setPTransferStatus(copyData.status).then(_ => {
                this.$emit("refresh");
                this.$emit('start');
              })
            });
          }).catch(_ => {
            this.$emit('start')
          });
          return;
        }
      }

      this.zIndex = PopupManager.nextZIndex()
      this.isShow = true;
    },
    hide() {
      this.$emit('start');
      this.isShow = false;
    },
    setData(data) {
      this.data = data;
    },
    async esignConfirm(isSign) {
      let fileInfo;
      if (this.$refs["esign"] && isSign) {
        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) {
        //弃，已用modal
        copyData.status = isSign ? 4 : 3;
        if (isSign) {
          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,
        },false).then((_) => {
          this.$emit("refresh");
        });
      }
      if (this.data.status === 3) {
        //弃，已用modal
        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,
        },false).then((_) => {
          this.$emit("refresh");
        });
      }
      if (this.data.status === 4) {
        copyData.status = 5;
        if (isSign) {
          copyData.start_sign = fileInfo.data?.id;
          copyData.act_start_time = this.$moment().format("YYYY-MM-DD HH:mm");
          copyData.open_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,
        },false).then((_) => {
          this.setPTransferStatus(copyData.status).then(_ => {
            this.$emit("refresh");
            this.$emit('start');
          })
        });
      }
      if (this.data.status === 5) {
        //弃，已用modal
        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,
        },false).then((_) => {
          this.$emit("refresh");
        });
      }
      if (this.data.status === 6) {
        copyData.status = 7;
        if (isSign) {
          copyData.end_sign = fileInfo.data?.id;
          copyData.act_end_time = this.$moment().format("YYYY-MM-DD HH:mm");
          copyData.close_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,
        },false).then((_) => {
          this.setPTransferStatus(copyData.status).then(_ => {
            this.$emit("refresh");
            this.$emit('start');
          })
        });
      }

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

<style scoped lang="scss">
@import "src/styles/scss/style";
$width: 100rem;
$height: 74vh;
.mask {
  background: #00000022;

  z-index: 10;
  position: fixed;
  inset: 0 0 0 0;
}
.modal {
  width: $width;
  height: $height;
  border-radius: 22px / 12px;

  position: fixed;
  top: calc(50% - (#{$height} / 2));
  left: calc(50% - (#{$width} / 2));

  table {
    color: #333;
    text-align: center;
    border-collapse: collapse;
    font-size: 1.3rem;
    width: 100%;
    height: 100%;

    td,
    th {
      border-right: 2px solid #333;
      border-bottom: 2px solid #333;
    }
    td:nth-last-child(1),th:nth-last-child(1) {
      border-right: none;
    }
    tbody tr:nth-last-child(1) {
      td,th {
        border-bottom: none;
      }
    }
  }

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

    padding: 20px;
    .btns {
    }
  }
}
::v-deep .ivu-btn-small {
  font-size: 1.2rem;
  padding: 0 10px;
}
</style>
