<template>
    <!-- 预警消息 -->
    <div class="mcs-name">
      <img src="@/assets/early.png" class="imgSrc" v-if="info.msgType=='warning'"></img>
      <img src="@/assets/dq.png" class="imgSrc" v-if="info.msgType=='notice'"></img>
      <img src="@/assets/warning1.png" class="imgSrc" v-if="info.msgType=='inform'"></img>
      <span style="font-weight:900;color:rgb(37 34 34);margin-left:5px;font-size:11px;line-height:17px"> {{info.msgTitle}}</span>
      <span class="dateSrc"> {{info.msgPubdTime}}</span>
      <br />
      <p v-if="info.msgType=='warning'" @click="getDetail(info)" style="margin-left:23px;margin-top:5px;cursor:pointer;" v-html="a"></p>
      <p v-if="info.msgType=='notice'"  @click="getDetail(info)"  style="margin-left:23px;margin-top:5px;cursor:pointer" v-html="a"></p>
      <p v-if="info.msgType=='inform'"  @click="getDetail(info)"  style="margin-left:23px;margin-top:5px;cursor:pointer" v-html="a"></p>
      <!-- <p  v-if="info.msgType=='A'" style="margin-left:23px;margin-top:5px">您提交的{{info.title}} <span style="color:#1093d7">【申领单号】</span>被<span style="color:#f9bd72">【审核人姓名】</span>退回，请注意及时查看处理。 </p> -->
      <!-- <p  v-if="info.msgType=='notice'" style="margin-left:23px;margin-top:5px"> <span style="color:#1093d7">【申领单号】</span>的耗材资质<span style="color:#1093d7">【审核人姓名】</span>即将于【日期】到期，请注意及时更新。 </p>
      <p  v-if="info.msgType=='inform'" style="margin-left:23px;margin-top:5px"> <span style="color:#1093d7">【申领单号】</span>提交的<span style="color:#1093d7">【审核人姓名】</span>目录新增已到达，请注意及时审核。 </p> -->
      <p class="StasSrc" v-if="info.msgStas=='1'"> 已读</p>
      <p class="StasSrc" style="color:rgb(223 38 38);" v-else> 未读</p>
    </div>
</template>
  
<script>
import { updateMsgStas } from "@/api/messageCenter/index";
import { reqComData } from "@/api/user";
export default {
  name: "mcsInfo",
  props: {
    info: {
      type: Object,
      default: null,
    },
    chars: [],
  },
  data() {
    return {
      a: "",
    };
  },
  methods: {
    // 跳转
    getDetail(item) {
      if (item.msgKey == null || item.msgRoutePath == "" || item.url == null) {
        return;
      }
      updateMsgStas([{ id: item.id, msgStas: "1" }]).then((res) => {});
      // 如果是资质到期或是维护直接跳转不请求接口
      if (item.url == "/web/spler/getUserSplerInfoB") {
        this.$router.push({
          name: item.msgRoutePath,
        });
        return;
      }
      console.log(item, '问问');
      reqComData({
        url: item.url,
        body: {
          [item.msgKey]: item.msgValue,
          spdId:item.spdID
        },
      }).then((res) => {
        if (res.success == true) {
          this.loding = false;
          if (res.data.records.length <= 0) {
            return;
          }
          let rowData = res.data.records[0] || {};
          if (
            item.msgTitle == "生产厂商资质到期提醒" ||
            item.msgTitle == "商品资质到期提醒"
          ) {
            this.$router.push({
              name: item.msgRoutePath,
              query: {
                ...rowData,
                type: "modify",
                page: "1",
                opeType: "修改",
              },
            });
            return;
          }
          this.$router.push({
            name: item.msgRoutePath,
            query: {
              ...rowData,
            },
          });
        }
      });
    },
  },
  mounted() {
    let messText = this.info.msgText;
    this.info.msgColumnList.forEach((item, index) => {
      messText = messText.replace(
        item.msgColumnNo,
        `<span style='color:${
          item.msgColumnColor
        }' onclick='getDetail(${JSON.stringify({
          url: item.url,
          msgKey: item.msgKey,
          msgRoutePath: item.msgRoutePath,
          id: this.info.id,
          msgTitle: this.info.msgTitle,
          msgValue: item.msgValue,
          spdID:this.info.spdId
        })})'>【${item.msgColumn}】</span>`
      );
    });
    this.a = messText;

    window.getDetail = this.getDetail;
  },
};
</script>
  
<style  lang="scss" scoped>
.mcs-name ::v-deep .imgSrc {
  position: relative;
  top: 3px;
}
.mcs-name ::v-deep .dateSrc {
  display: block;
  position: absolute;
  top: 13px;
  right: 30px;
}
.mcs-name ::v-deep .StasSrc {
  display: block;
  position: absolute;
  top: 33px;
  right: 35px;
  font-weight: 800;
}
</style>