<template>
  <div class="meta-abnormalCard-wrap">
    <div class="card-title">
      <div class="title-left">
        <div
          class="title-border"
          :style="{ 'background-color': abnormalContent.alarmcolor }"
        >
          <!-- 我的异常,异常详情对应字段 -->
          <span v-if="!recordFlag"
            >重要度{{ abnormalContent.alarmlevel }}</span
          >
          <!-- 异常记录对应字段 -->
          <span v-if="recordFlag"
            >重要度{{ abnormalContent.alamname }}</span
          >
        </div>
        <div class="title-name" v-if="!recordFlag">
          {{ abnormalContent.workunitname }}
        </div>
        <!-- 异常记录与别的页面字段不一样 -->
        <div class="title-name" v-if="recordFlag">
          {{ abnormalContent.unitname }}
        </div>
      </div>
      <div class="title-dis">
        <span v-if="!abnormalContent.detailFlag"
          >{{
            abnormalContent.aborder
              ? abnormalContent.aborder
              : abnormalContent.optorder
          }}级</span
        >
        <!-- 非异常记录右上角数据 -->
        <span v-if="!recordFlag">{{
          abnormalContent.abnstatus == "8"
            ? "挂起"
            : abnormalContent.abstatusname
        }}</span>
        <!-- 异常记录右上角数据 -->
        <span v-if="recordFlag">{{
          abnormalContent.abnstatusname
        }}</span>
      </div>
    </div>
    <div class="card-content">
      <div
        class="coordination title-dis"
        v-if="abnormalContent.parentid && !abnormalContent.detailFlag"
      >
        协同任务
      </div>
      <div
        class="question"
        v-if="!abnormalContent.detailFlag"
        :class="
          abnormalContent.parentid && !abnormalContent.detailFlag
            ? 'active'
            : ''
        "
      >
        {{ abnormalContent.itemname }}
      </div>
      <div class="describe" v-if="!abnormalContent.detailFlag && !recordFlag">
        {{ abnormalContent.prodname }}
      </div>
      <div class="describe" v-if="!abnormalContent.detailFlag">
        {{ abnormalContent.abncomment }}
      </div>
      <div class="dateSpecific">
        <div>
          {{ getTime(abnormalContent) }}
          由<span class="adduser">{{ getOptInfo(abnormalContent) }}</span>
          <!-- 非异常记录状态 -->
          <span v-if="!abnormalContent.detailFlag">提交</span>
          <!-- 异常记录状态包括很多 -->
          <span v-if="abnormalContent.detailFlag">{{ detailStatus }}</span>
        </div>
        <div>{{ getBottomRight(abnormalContent) }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getInfoObject } from "@/common/utils/tool";
export default {
  name: "MetaAbnormalCard",
  props: {
    abnormalContent: {
      type: Object,
      default: () => {
        return {};
      },
    },
    recordFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      info: {},
      detailPerson: "",
      detailStatus: "",
    };
  },
  methods: {
    getOptStatus(item, obj) {
      switch (item.abnstatus) {
        case "0":
          this.detailPerson = item.adduser;
          this.detailStatus = "提报";
          break;
        case "1":
          this.detailPerson = item.currentname;
          this.detailStatus = "响应";
          break;
        case "2":
          this.detailPerson = item.currentname;
          this.detailStatus = "处理";
          break;
        case "3":
          if (item) {
            switch (item.abnstatus) {
              case "3":
                this.detailPerson = item.currentname;
                this.detailStatus = "处理完";
                break;
              case "7":
                this.detailPerson = item.adduser;
                this.detailStatus = "驳回";
                break;
            }
          }
          break;
        case "6":
          this.detailPerson = item.adduser;
          this.detailStatus = "撤销";
          break;
        case "5":
          this.detailPerson = item.abendname;
          this.detailStatus = "解除";
          break;
      }
      if (obj == "person") {
        return this.detailPerson;
      }
    },
    getBottomRight(item) {
      let thisName = "";
      if (!this.recordFlag) {
        // 我的异常和异常详情
        if (
          !item.detailFlag &&
          item.abnstatus !== "0" &&
          item.abnstatus !== "5" &&
          item.abnstatus !== "6"
        ) {
          // 我的异常
          if (item.abnstatus === "3") {
            thisName = item.abusername ? item.abusername : item.adduser;
          } else if (
            item.abnstatus === "1" ||
            item.abnstatus === "2" ||
            item.abnstatus === "7"
          ) {
            thisName = item.currentname;
          }
        } else {
          // 异常详情
          thisName = "";
        }
      } else if (this.recordFlag) {
        // 异常记录
        if (
          item.abnstatus != "0" &&
          item.abnstatus != "5" &&
          item.abnstatus != "6" &&
          item.abnstatus != "3"
        ) {
          thisName = item.upduser;
        } else if (item.abnstatus == "3") {
          thisName = item.adduser;
        }
      }
      return thisName;
    },
    getTime(item) {
      if (!this.recordFlag) {
        // 我的异常和异常详情
        if (!item.detailFlag) {
          // 我的异常
          return item.abtime ? item.abtime : item.addtime;
        } else {
          // 异常详情
          return item.updtime;
        }
      } else {
        // 异常记录
        return item.addtime;
      }
    },
    getOptInfo(item) {
      // console.log(item)
      let id = item.abuserid ? item.abuserid : item.adduserid;
      if (id === this.info.userId && !item.detailFlag && !this.recordFlag) {
        // 只有我的异常修改成我
        this.getOptStatus(item, "status");
        return "我";
      } else {
        // console.log(item.abnstatus)
        // 我的异常获取的为item.abusername ? item.abusername : item.adduser
        // 异常记录取的此字段adduser
        // 异常详情判断比我的异常多
        if (!this.recordFlag) {
          // 我的异常和异常详情
          if (!item.detailFlag) {
            // 我的异常
            return item.abusername ? item.abusername : item.adduser;
          } else {
            // 异常详情
            return this.getOptStatus(item, "person");
          }
        } else if (this.recordFlag) {
          // 异常记录
          return item.adduser;
        }
      }
    },
  },
  mounted() {
    // 登录用户信息赋值
    this.info = getInfoObject();
  },
};
</script>

<style lang="scss" scoped>
.meta-abnormalCard-wrap {
  .title-dis {
    // background: rgba(21, 173, 49, 0.1);
    color: #999;
    border: 1px solid #ccc;
    // padding: 0.5vh 1vw;
    border-radius: 1.4vw;
    height: 6vw;
    line-height: 6vw;
    width: 19vw;
    text-align: center;
  }
  .card-title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 1vh;
    .title-left {
      display: flex;
      justify-content: flex-start;
      width: calc(100% - 20vw);
      .title-border {
        // background: #15ad31;
        border-radius: 0vw 1vw 1vw 0vw;
        width: 16vw;
        height: 3vh;
        line-height: 3vh;
        margin-right: 3vw;
        margin-left: -4vw;
        text-align: center;
        color: #fff;
      }
      .title-name {
        padding: 0vh 0.5vw;
        width: calc(100% - 17vw);
        font-size: 4vw;
      }
    }
  }
  .card-content {
    padding-top: 1.4vh;
    position: relative;
    .coordination {
      position: absolute;
      right: 0vw;
      top: 0.5vh;
    }
    .question {
      font-weight: 600;
      font-size: 4.4vw;
    }
    .active {
      width: calc(100% - 19vw);
    }
    .describe {
      color: #333;
      margin-top: 1.4vh;
      line-height: 2vh;
    }
    .dateSpecific {
      color: #999;
      display: flex;
      justify-content: space-between;
      margin-top: 1.4vh;
      .adduser {
        padding: 0vh 1vw;
        color: #1d2088;
      }
    }
  }
}
</style>
