<template>
  <div class="meta-abnormalDetail-wrap">
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">异常编码</div>
        <div class="detail-right">
          {{ detailList.abncode ? detailList.abncode : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">作业单元</div>
        <div class="detail-right">
          {{ detailList.workunitname ? detailList.workunitname : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">异常项</div>
        <div class="detail-right">
          {{ detailList.itemname ? detailList.itemname : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">设备</div>
        <div class="detail-right">
          {{ detailList.equname ? detailList.equname : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">产品</div>
        <div class="detail-right">
          {{ detailList.prodname ? detailList.prodname : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">停机</div>
        <div class="detail-right">
          {{ detailList.haltflag == "1" ? "是" : "否" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">提报人</div>
        <div class="detail-right">
          {{ detailList.adduser ? detailList.adduser : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">提报电话</div>
        <div class="detail-right clearfix">
          <svg-icon
            v-if="detailList && detailList.tel"
            :icon-class="'电话'"
            @click="callPhone(detailList.tel)"
            class="fr"
          ></svg-icon>
          <svg-icon v-else :icon-class="'电话'" class="fr"></svg-icon>
          <div class="fr">{{ detailList.tel ? detailList.tel : "无" }}</div>
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">提报时间</div>
        <div class="detail-right">
          {{ detailList.addtime ? detailList.addtime : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="detail-box">
        <div class="detail-left">解除时间</div>
        <div class="detail-right">
          {{ detailList.abendtime ? detailList.abendtime : "无" }}
        </div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <ol>
        <li class="detail-box detail-dis">
          <div class="detail-left">异常描述</div>
          <div class="detail-right">
            {{ detailList.abncomment ? detailList.abncomment : "无" }}
          </div>
        </li>
        <!-- 异常提报上传图片imgAfter -->
        <li class="detail-box detail-box-img" v-if="imgAfter.length > 0">
          <div class="detail-left">异常图片</div>
          <div class="detail-right">
            <img
              v-for="(img, index) in imgAfter"
              :key="index"
              :src="img"
              alt=""
              class="proima-img"
              @click="openImg(imgAfter, index)"
            />
          </div>
        </li>
        <!-- 异常处理上传图片imgBefter -->
        <li class="detail-box detail-box-img" v-if="imgBefter.length > 0">
          <div class="detail-left">异常处理图片</div>
          <div class="detail-right">
            <img
              v-for="(img, index) in imgBefter"
              :key="index"
              :src="img"
              alt=""
              class="proima-img"
              @click="openImg(imgBefter, index)"
            />
          </div>
        </li>
      </ol>
    </meta-card>
    <meta-card class="card-list">
      <div class="push">
        <div class="push-left">当前处理节点</div>
        <div class="push-right">{{ formData.currentUserInfo }}</div>
      </div>
    </meta-card>
    <meta-card class="card-list">
      <div class="push">
        <div class="push-left">当前推送节点</div>
        <div class="push-right">{{ formData.pushUserInfo || "无" }}</div>
      </div>
    </meta-card>
  </div>
</template>
<script>
import { getDocUrl, callPhone } from "@/common/utils/tool";
import { ImagePreview } from "vant";
export default {
  name: "MetaAbnormalDetail",
  props: {
    detailList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      imgBefter: [],
      imgAfter: [],
      formData: {},
    };
  },
  watch: {
    detailList() {
      this.imgSrcList(this.detailList);
      this.dealAndPush(this.detailList);
    },
  },
  methods: {
    // 呼叫手机号
    callPhone,
    // 图片预览
    openImg(imgarr, index) {
      ImagePreview({
        images: imgarr,
        startPosition: index,
      });
    },
    //图片处理
    imgSrcList(mast) {
      if (mast.imgafter) {
        mast.imgafter = mast.imgafter.substr(0, mast.imgafter.length - 1);
        mast.imgafter.split(",").forEach((item) => {
          let imgpath = getDocUrl(item);
          this.imgAfter.push(imgpath);
        });
      }
      if (mast.imgbefter) {
        mast.imgbefter = mast.imgbefter.substr(0, mast.imgbefter.length - 1);
        mast.imgbefter.split(",").forEach((item) => {
          let imgpath = getDocUrl(item);
          this.imgBefter.push(imgpath);
        });
      }
    },
    //当前处理，当前推送字段加工
    dealAndPush(mast) {
      switch (mast.abnstatus) {
        case "3":
          this.formData.currentUserInfo = "异常解除" + mast.adduser;
          break;
        case "0":
        case "1":
        case "2":
        case "7":
          if (mast.currentname === "无") {
            mast.currentname = "";
          }
          this.formData.currentUserInfo =
            mast.optorder +
            "级 " +
            (mast.nodename ? mast.nodename : "无") +
            " " +
            (mast.currentname ? mast.currentname : "");
          break;
      }
      //当前推送节点
      if (mast.pushorder) {
        this.formData.pushUserInfo = mast.pushorder + "级 " + mast.pushname;
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.meta-abnormalDetail-wrap {
  font-size: 4vw;
  .card-list {
    margin-top: 1.2vh;
    .push {
      display: flex;
      justify-content: space-between;
      .push-left {
        text-align: left;
      }
      .push-right {
        text-align: right;
        color: #999;
      }
    }
    .detail-box-img {
      margin-top: 4vw;
    }
    .detail-box {
      display: flex;
      line-height: 2.6vh;
      .detail-left {
        width: 24vw;
      }
      .detail-right {
        color: #999;
        width: calc(100% - 24vw);
        text-align: right;
        svg {
          width: 4.46vw;
          height: 4.46vw;
          margin-top: 0.5vw;
          margin-left: 3vw;
        }
        .proima-img {
          width: 16vw;
          height: 16vw;
          margin: 1vw;
        }
      }
    }
  }
}
</style>