<template>
  <div class="topNotice">
    <div class="header">
      <h5 class="title">消息</h5>
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <ul v-if="topNoticeData.length" class="content">
        <li v-for="(item, index) in topNoticeData" :key="index" class="proitem">
          <h5 class="proname">标题：{{ item.SMS_Title }}</h5>
          <span class="orderendtime" :title=item.SMS_Content>内容：{{ item.SMS_Content }}</span>
          <el-button class="unread" @click="handleChange(item.SMS_Id)">未读</el-button>
        </li>
      </ul>
      <div v-else class="nomsg">没有新消息</div>
    </el-scrollbar>
    <!-- <div class="footer_menu">
      <router-link class="inlineBlock" to="/notice/manage">
        <el-dropdown-item>
          <i class="el-icon-more"/>更多公告信息
        </el-dropdown-item>
      </router-link>
    </div>-->
  </div>
</template>

<script>
// import { getNotice, getSchedule } from '@/api/customer/customerInfoHY'
import { getFileTranserLists } from "@/api/memberManagement/memberList";
import { getMsg, getReadData } from "@/api/commonAPI";
import daibangdetail from "@/views/todoManagement/todoList/detail";
import orderDetail from "@/views/orderManagement/orderList/detail";
import taskDetail from "@/views/taskManagement/taskList/common/detail";
import memberDetail from "@/views/memberManagement/memberList/components/detail";
import router from "@/router";
export default {
  name: "TopNotice",
  data() {
    return {
      loading: false,
      proNoticeDatas: [],
      proScheduleDatas: [],
      noticeData: [], //消息数据
      topNoticeData: [], //顶部消息数据
      readId: "",
      detailId: "",
      timer: "", //定时器
      timer1: "", //顶部消息定时器
    };
  },
  created() {
    this.getList();
    this.getTopList();
  },
  methods: {
    // 项目的消息
    getTopList() {
      this.loading = true;
      const params={
        istop:-1,
        isread:0,
      }
      // 消息提醒
      getMsg(params).then((response) => {
        if (response.state == "success") {
          const res = response.rows;
          if (res&&res.length!=0) {
            res.map((item) => {
              this.topNoticeData.unshift({
                SMS_Title: item.SMS_Title,
                SMS_Content: item.SMS_Content,
                SMS_Id: item.SMS_Id,
                F_ID: item.F_ID,
              });
            });
            // this.$emit('getTopNoticeNums', {
            //   num: this.noticeData.length > 99 ? '99+' : this.noticeData.length // 顶部消息数量
            // })
          }else{
            this.topNoticeData=[]
          }
        }
      });
    },
    getList() {
      this.loading = true;
      const params={
        istop:1,
      }
      // 消息提醒
      getMsg(params).then((response) => {
        if (response.state == "success") {
          const res = response.rows;
          if (res&&res.length!=0) {
            res.map((item) => {
              this.noticeData.unshift({
                SMS_Title: item.SMS_Title,
                SMS_Content: item.SMS_Content,
                SMS_Id: item.SMS_Id,
                F_ID: item.F_ID,
              });
            });
            // this.$emit('getTopNoticeNums', {
            //   num: this.noticeData.length > 99 ? '99+' : this.noticeData.length // 顶部消息数量
            // })
          }else{
            this.noticeData=[]
          }
        }
      });
    },
    //已读处理
    getRead() {
      this.$confirm("确定已读吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getReadataList();
          this.$message({
            type: "success",
            message: "处理成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消处理",
          });
        });
    },
    handleChange(val) {
      if (val) {
        this.readId = val;
        this.getRead();
      }
    },
    getReadataList(){
      const params = {
            ids: this.readId,
            state: 1,
          };
      getReadData(params)
            .then((response) => {
              if (response.state == "success") {
                this.getTopList();
              }
            })
            .catch((result) => {
              console.log("处理失败");
            });
    }
  },
  mounted() {
    this.timer1 = setInterval(()=>{
      const params = {
        istop:-1,
        isread:0,
      }
      getMsg(params).then((response=>{
        if(response.state == 'success'){
          const res = response.rows;
          if(res&&res.length){
            this.topNoticeData = [];
            res.map((item)=>{
              this.topNoticeData.unshift({
                SMS_Title: item.SMS_Title,
                SMS_Content: item.SMS_Content,
                F_ID: item.F_ID,
                SMS_Id: item.SMS_Id,
              })
            })
          }
        }
      }))
    },120000),
    this.timer = setInterval(() => {
      const params={
        istop:1,
      }
      getMsg(params).then((response) => {
        if (response.state == "success") {
          const res = response.rows;
          if (res && res.length) {
            this.noticeData = [];
            res.map((item) => {
              this.noticeData.unshift({
                SMS_Title: item.SMS_Title,
                SMS_Content: item.SMS_Content,
                F_ID: item.F_ID,
                SMS_Id: item.SMS_Id,
              });
            });
             const infoData = res[0];
            var a = window.localStorage.getItem("num");
            if (a != infoData.F_ID) {
              window.localStorage.setItem('num',infoData.F_ID)
              if (infoData.SMS_Type == 3) {
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "待办消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    this.$layer.iframe({
                      content: {
                        content: daibangdetail, // 传递的组件对象
                        parent: this, // 当前的vue对象
                        data: { rowid: infoData.F_ID.toString() }, // props
                      },
                      area: ["80%", "90%"],
                      title: "详情",
                    });
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }else if(infoData.SMS_Type == 0){
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "订单消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    this.$layer.iframe({
                      content: {
                        content: orderDetail, // 传递的组件对象
                        parent: this, // 当前的vue对象
                        data: { rowid: infoData.F_ID.toString() }, // props
                      },
                      area: ["80%", "90%"],
                      title: "详情",
                    });
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }else if(infoData.SMS_Type == 1){
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "媒体消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    router.push({name:'mediaInformation'})
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }else if(infoData.SMS_Type == 2){
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "任务消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    this.$layer.iframe({
                      content: {
                        content: taskDetail, // 传递的组件对象
                        parent: this, // 当前的vue对象
                        data: { rowid: infoData.F_ID.toString() }, // props
                      },
                      area: ["80%", "90%"],
                      title: "详情",
                    });
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }else if(infoData.SMS_Type == 4){
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "质检消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    this.$layer.iframe({
                      content: {
                        content: daibangdetail, // 传递的组件对象
                        parent: this, // 当前的vue对象
                        data: { rowid: infoData.F_ID.toString() }, // props
                      },
                      area: ["80%", "90%"],
                      title: "详情",
                    });
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }else if(infoData.SMS_Type == 5){
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "绩效消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    this.$layer.iframe({
                      content: {
                        content: daibangdetail, // 传递的组件对象
                        parent: this, // 当前的vue对象
                        data: { rowid: infoData.F_ID.toString() }, // props
                      },
                      area: ["80%", "90%"],
                      title: "详情",
                    });
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }else if(infoData.SMS_Type == 6){
                this.readId = infoData.SMS_Id;
                this.detailId = infoData.F_ID;
                const h = this.$createElement;
                this.$msgbox({
                  title: "转移消息",
                  message: h("p", null, [
                    h("span", null, "内容是 "),
                    h("span", null, infoData.SMS_Content),
                  ]),
                  customClass: "messageBox",
                  closeOnClickModal: false,
                  showCancelButton: true,
                  confirmButtonText: "详情",
                  cancelButtonText: "关闭",
                })
                  .then((action) => {
                    this.$layer.iframe({
                      content: {
                        content: memberDetail, // 传递的组件对象
                        parent: this, // 当前的vue对象
                        data: { rowid: infoData.F_ID.toString() }, // props
                      },
                      area: ["80%", "90%"],
                      title: "详情",
                    });
                    this.getReadataList();
                  })
                  .catch((result) => {
                    console.log("取消了");
                  });
              }
            }
          }
        }
      });
    }, 120000);
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" >
.topNoticePop {
  padding: 0;
  .topNotice {
    .scrollbar-wrapper {
      max-height: 488px;
    }
    .footer_menu {
      .el-dropdown-menu__item {
        padding: 20px;
        line-height: 20px;
      }
    }
  }
}
.messageBox {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.topNoticePop {
  .topNotice {
    .header {
      padding: 20px;
      background-color: #fff;
      border-bottom: 1px solid #e4eaec;
      .title {
        margin: 0;
        color: #37474f;
        font-weight: 400;
        font-size: 1em;
        text-shadow: rgba(0, 0, 0, 0.05) 0 0 1px;
      }
    }
    .content {
      list-style: none;
      padding: 0 20px;
      margin: 0;
      .proitem {
        border-bottom: 1px solid #e4eaec;
        &:last-child {
          border-bottom: none;
        }
        padding: 10px 0;
        .proname {
          margin: 0;
          padding: 0;
          font-weight: 400;
          font-size: 14px;
        }
        .orderendtime {
          display: inline-block;
          font-size: 12px;
          width: 260px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
      }
    }
    .nomsg {
      min-height: 270px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footer_menu {
      background-color: #f3f7f9;
      border-top: 1px solid #e4eaec;
    }
  }
}
.unread {
  float: right;
}
</style>
