<template>
  <!-- 消息提醒详情页 -->
  <div>
    <title-bar :title="title" @click-right="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div class="text-content">
      <div class="text-content-left">
        <van-sidebar @change="onChange" style="width: 100%" line-height="100px" v-model="activeKey">
          <van-sidebar-item v-for="(item, index) in listInfo" :key="index" class="label" :title="item.cnname" />
        </van-sidebar>
      </div>
      <div class="text-content-right">
        <div class="Managementdata d-flex flex-column">
          <scroller-view v-calculate-height :pulldown="pulldown" :pullup="pullup" :refresh-data="onrefreshdata"
                         :load-data="onloaddata">
            <div v-for="(item, index) in list" :key="index" class="customer-bottom-list">
              <div class="customer-bottom-list-top">
                <div class="content-box">
                  <div class="red-point"></div>
                  <div style="width: 95%;">{{ item.msg_content }}</div>
                </div>
              </div>
              <div class="customer-bottom-list-bottom">
                <div>
                  <div>生成时间：</div>
                  <div>{{ item.gen_date }}</div>
                </div>
                <div v-show="currentType == '0900' || currentType == '0510'">
                  <div>超期时间：</div>
                  <div>{{ item.max_date }}</div>
                </div>
              </div>
              <div class="read-but" @click="changeMsgStatus(index)">已读</div>
            </div>
          </scroller-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Sidebar, SidebarItem } from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import { NativeUI } from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";

Vue.use(Sidebar);
Vue.use(SidebarItem);


/**
 *@description: 消息提醒详情页。没有搜索功能，接口没有搜索功能
 *@author: wanghang
 *@date: 2022/2/26
 */
@Component({
  name: "UpcomingTask",
  components: {
    TitleBar
  }
})
export default class UpcomingTask extends Vue {
  activeKey: any = 0;
  title = "消息提醒"; // 页面标题

  msgCount: any = 0;
  listInfo: any[] = []; //列表信息
  currentPage: any = 0; //当前所在页
  titles: any[] = []; //标题内容
  list: any[] = []; //存放查询的列表数据
  refreshing: any = false;
  msgNum: any = 0;
  currentType: any = ""; //当前类别
  checkedList: any[] = []; //按钮状态列表
  pageNo = 1;
  pullup = true;
  pulldown = true;
  nodata = true;

  onClick() {
    sessionStorage.setItem("activeKey", "");
  }

  mounted() {
    this.selectMsgRemind();
  }

  //查询对公消息提醒
  selectMsgRemind() {
    let param = {
      tc: nettyApi.TRADE_CODE.selectMsgRemind
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        //查到消息提醒列表
        let info: any[] = res.SchemeTypes;
        this.listInfo = res.SchemeTypes;
        this.msgCount = 0;
        for (let i = 0; i < info.length; i++) {
          this.msgCount = parseInt(this.msgCount) + parseInt(info[i].RewSchemes[0].SCHEME_COUNT);
        }
        this.selectCategoryList();
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //根据查询的类别，分别将字符串赋值给list
  setValue(infolist: any[], type: any) {
    this.checkedList = [];
    if (type == "0450") {
      //风险预警 this.riskInfo
      for (let i = 0; i < infolist.length; i++) {
        // temp.msg_content = infolist[i].field_list
        let temp: any = {};
        let obj: any = {};
        for (let j = 0; j < infolist[i].field_list.length; j++) {
          obj[infolist[i].field_list[j].field_name] = infolist[i].field_list[j].field_value;
        }
        temp.msg_content = obj.msg_content;
        temp.rs_level = obj.rs_level;
        temp.msg_id = obj.msg_id;
        temp.gen_date = obj.gen_date;
        temp.scheme_id = obj.scheme_id;
        this.checkedList.push({ checked: false });
        this.list.push(temp);
      }
    } else if (type == "0600") {
      //押品价值重估
      for (let i = 0; i < infolist.length; i++) {
        // temp.msg_content = infolist[i].field_list
        let temp: any = {};
        let obj: any = {};
        for (let j = 0; j < infolist[i].field_list.length; j++) {
          obj[infolist[i].field_list[j].field_name] = infolist[i].field_list[j].field_value;
        }
        temp.msg_content = obj.msg_content;
        temp.rs_level = obj.rs_level;
        temp.msg_id = obj.msg_id;
        temp.gen_date = obj.gen_date;
        temp.scheme_id = obj.scheme_id;
        this.checkedList.push({ checked: false });
        this.list.push(temp);
      }
    } else if (type == "0900") {
      //普通信息
      for (let i = 0; i < infolist.length; i++) {
        // temp.msg_content = infolist[i].field_list
        let temp: any = {};
        let obj: any = {};
        for (let j = 0; j < infolist[i].field_list.length; j++) {
          obj[infolist[i].field_list[j].field_name] = infolist[i].field_list[j].field_value;
        }
        temp.msg_content = obj.msg_content;
        temp.rs_level = obj.rs_level;
        temp.msg_id = obj.msg_id;
        temp.gen_date = obj.gen_date;
        temp.max_date = obj.max_date;
        temp.scheme_id = obj.scheme_id;
        this.checkedList.push({ checked: false });
        this.list.push(temp);
      }
    } else if (type == "0200") {
      //业务风险预警
      for (let i = 0; i < infolist.length; i++) {
        // temp.msg_content = infolist[i].field_list
        let temp: any = {};
        let obj: any = {};
        for (let j = 0; j < infolist[i].field_list.length; j++) {
          obj[infolist[i].field_list[j].field_name] = infolist[i].field_list[j].field_value;
        }
        temp.msg_content = obj.msg_content;
        temp.rs_level = obj.rs_level;
        temp.msg_id = obj.msg_id;
        temp.gen_date = obj.gen_date;
        temp.scheme_id = obj.scheme_id;
        this.checkedList.push({ checked: false });
        this.list.push(temp);
      }
    } else if (type == "0510") {
      //贷后检查
      for (let i = 0; i < infolist.length; i++) {
        // temp.msg_content = infolist[i].field_list
        let temp: any = {};
        let obj: any = {};
        for (let j = 0; j < infolist[i].field_list.length; j++) {
          obj[infolist[i].field_list[j].field_name] = infolist[i].field_list[j].field_value;
        }
        temp.msg_content = obj.msg_content;
        temp.rs_level = obj.rs_level;
        temp.msg_id = obj.msg_id;
        temp.gen_date = obj.gen_date;
        temp.max_date = obj.max_date;
        temp.scheme_id = obj.scheme_id;
        this.checkedList.push({ checked: false });
        this.list.push(temp);
      }
    }
    if (this.list.length < 10) {
      // 如果小于10条，说明没有更多数据了,去掉加载更多
      this.pullup = false;
    } else {
      //如果等于10条那么就保留加载更多
      this.pullup = true;
    }
  }

  onChange() {
    this.currentPage = this.activeKey;
    this.currentType = this.listInfo[this.activeKey].RewSchemes[0].SCHEME_TYPE; //当前类别
    this.selectCategoryList(1);
  }

  //下拉刷新
  onrefreshdata() {
    console.log("刷新刷新");
    return this.selectCategoryList();
  }

  //下拉加载
  onloaddata() {
    this.pageNo = Math.ceil(this.list.length / 10) + 1;
    return this.selectCategoryList(this.pageNo);
  }
  //改变消息状态
  changeMsgStatus(index:any) {
    let param = {
      msg_id: this.list[index].msg_id,
      tc: nettyApi.TRADE_CODE.updateMsgStatus
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(nettyApi.commonRq, param).then((res:any) => {
      NativeUI.closeWaiting();
      if (res.rc == '1') {
        //查到消息提醒列表
        // this.listInfo = res.SchemeTypes;
        // for (let i = 0; i < this.listInfo.length; i++) {
        //   this.msgNum += parseInt(this.listInfo[i].RewSchemes[0].SCHEME_COUNT);
        // }
        NativeUI.toast('已设置为已读');
        this.selectCategoryList(1);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //查询对应类别的提醒列表
  selectCategoryList(pageNo = 1) {
    let index = this.currentPage;
    let type = this.listInfo[index].RewSchemes[0].SCHEME_TYPE;
    let param = {
      scheme_type: type,
      scheme_id: this.listInfo[index].RewSchemes[0].SCHEME_ID,
      maxLine: "10",
      targetPage: pageNo,
      tc: nettyApi.TRADE_CODE.selectMsgRemindDetail
    };
    NativeUI.showWaiting("正在查询...");
    this.refreshing = false;
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        //查到消息提醒列表
        // this.listInfo = res.SchemeTypes;
        if (res.msg_woke_list.length > 0 && pageNo == 1) {
          //当当前类别查出来不为空的时候
          this.list = [];
          this.setValue(res.msg_woke_list, type);
        } else {
          this.setValue(res.msg_woke_list, type);
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

}
</script>

<style scoped>
.text-content {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  justify-content: flex-start;
}

.text-content-left {
  width: 25%;
  background-color: rgba(245, 245, 245, 1);
  border: 1px solid rgba(222, 222, 222, 1);
}

.text-content-right {
  width: 75%;
  height: 100%;
}

.text-content-right > div {
  height: 100%;
}

.label {
  border-bottom: 1px solid #e0e1e2;
}

van-sidebar-item {
}

::v-deep .van-sidebar-item--select::before {
  background-color: #FF574C;
  height: 100%;
}

::v-deep .van-sidebar-item__text {
  font-size: 18px;
}

::v-deep .text-content-left {
  z-index: 2100;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.Managementdata {
  margin-top: 20px;
  padding: 0 20px;
  height: calc(100vh - 130px);
}

::v-deep .Managementdata .bs-wrapper {
  height: 100%;
}

.red-point {
  height: 8px;
  width: 8px;
  display: flex;
  border-radius: 50%;
  margin-top: 8px;
  background: red;
  margin-right: 10px;
}

.customer-bottom-list {
  border-radius: 10px;
  background-color: #f8fdff;
  box-shadow: 0 0 6px #d7d7d7;
  margin: 0 10px 16px 10px;
  padding-bottom: 10px;
  position: relative;
}

/*.customer-bottom-list-top > div:nth-child(1) {*/
/*  width: 30px;*/
/*  height: 30px;*/
/*  border: 1px solid #FF574C;*/
/*  border-radius: 15px;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*}*/
.customer-bottom-list-top > div:nth-child(1) {
  font-size: 115%;
  font-weight: bold;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  margin-left: 0.8%;
  word-break: keep-all;
}

.customer-bottom-list-top {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1.5%;
  margin-left: 1.5%;
}

.labelDataStyle {
  width: auto;
  font-size: 12px;
  background-color: #E2F6FF;
  padding: 2px 5px;
  color: #0297D7;
  border-radius: 2px;
  word-break: keep-all;
  margin-left: 1%;
  margin-bottom: 5px;
}

.customer-bottom-list-top > div:nth-child(2) {
  width: 85%;
  display: flex;
  flex-wrap: wrap;
}

.customer-bottom-list-bottom {
  width: 95%;
  height: auto;
  display: flex;
  margin-top: 10px;
  padding-left: 50px;
  color: #959596;
}

.customer-bottom-list-bottom > div {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.customer-bottom-list-bottom > div > div:nth-child(1) {
  word-break: keep-all;
}

.content-box {
  display: flex;
  /*align-items: center;*/
  line-height: 24px;
  justify-content: center;
  white-space: pre-line;
}

.read-but {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 30px;
  color: #FF574C;
  border-radius: 10px;
  font-size: 14px;
  height: 30px;
  width: 50px;
  border: 1px solid;
  border-color: #FF574C;
}
</style>
