<template>
  <div class="follow-new-box" :class="{ show: innerDrawer }">
    <!-- <p class="icon" @click="changeStatus">
      <i class="iconfont iconricheng"></i><span v-show="noReadNum">{{noReadNum}}</span>
    </p> -->
    <div class="follow-new">
      <div class="follow-task-title">
        <div>
          <span @click="changeIndex(0)" :class="curentIndex == 0 ? 'active' : ''">当前随访任务</span
          ><span @click="changeIndex(1)" :class="curentIndex == 1 ? 'active' : ''">过往随访任务</span>
        </div>
      </div>
      <el-scrollbar tag="div" class="self-scroll">
        <el-empty style="margin-top:30%" v-if="followList.length == 0" :image="require('@/assets/images/empty.png')" description="暂无数据~"></el-empty>
        <div class="task-item" v-for="(item, index) in followList" :key="index">
          <div class="task-item-head">
            <div><span>{{item.msgAction.operator.substring(item.msgAction.operator.length-2) == '医生' ? item.msgAction.operator : item.msgAction.operator + '医生'}}</span>下达了随访任务</div>
            <span style="cursor: pointer"
              v-if="item.read === 0"
              ><el-tooltip
                class="item"
                effect="dark"
                content="标记已读"
                placement="top"
                ><i
                @click.stop="signReadStatus(item)"
                  class="iconfont iconyidu"
                  style="margin-top: 10px"
                ></i> </el-tooltip
            ></span>
          </div>
          <p class="task-item-desc">
            {{item.msgAction && item.msgAction.content ? item.msgAction.content : ''}}
          </p>
          <p class="time">{{getTimeText(item.sendTime)}}</p>
        </div>
      </el-scrollbar>
      <div class="footer">
        <el-pagination
          :page-size="pageSize"
          :total="totalRow"
          @current-change="pageChange"
          :current-page="currentPage"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import {
  noticPage,
  noticRead,
} from "@/request/common";
// import { mapGetters, mapState } from 'vuex';
export default {
  name: 'AegleFollowTask',
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    patientId: {
    type: String | Number,
    default: ''
  },
  },
  computed: {
    // ...mapGetters(['patientIdCm']),
    // ...mapState(["messageCallback"])
  },
  data() {
    return {
      noReadNum: 0,
      innerDrawer: false,
      curentIndex: 0,
      followList: [],
      totalRow: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  watch: {
    value(v) {
      this.innerDrawer = v;
      this.curentIndex = 0;
    },
    patientId: {
      handler(v){
        if(v == -1 || v == ''){
          this.noReadNum = 0;
          this.followList = [];
          this.totalRow = 0
        } else if(v) {
          this.currentPage = 1;
          this.noticPageList()
        } 
      },
      immediate: true
    }
  },
  methods: {
    //标记已读
    async signReadStatus(d) {
      let param = {
        businessEvent: d.msgType,
        id: d.id,
      };
      let res = await noticRead(param);
      if (res.code == 0) {
        this.$message.success("标记成功！");
        this.currentPage = 1;
        this.noticPageList();
        this.$emit('changeRead')
        // if(this.messageCallback) {
        //   this.messageCallback.updateData()
        // }
      } else {
        this.$message.error(res.msg);
      }
    },
        // 获取随访任务列表
    async noticPageList(status) {
      if(!this.patientId) return;
      let params = {
        businessEvent: 'pc.notification',
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        read:this.curentIndex,
        checkpointId: '*_release-follow-task',
        msgAction: `\"patientBaseId\":\"${this.patientId}\"`
      };
      let res = await noticPage(params);
      if (res.code == 0) {
        if(this.curentIndex == 0 || status){
          this.noReadNum = res.data.totalRow;
        }
        if(!status) {
          this.totalRow = res.data.totalRow;
          this.followList = res.data.list.map((item) => {
            item.msgAction = JSON.parse(item.msgAction);
            return item;
          });
        }
      } else {
        if(this.curentIndex == 0 || status){
          this.noReadNum = 0;
        }
        if(!status){
          this.followList = [];
          this.totalRow = 0;
          this.$message.error(res.msg);
        }
      }
    },
    getTimeText(v) {
      return moment(v).format("YYYY-MM-DD HH:mm:ss");
    },
    changeStatus() {
      // this.innerDrawer = !this.innerDrawer;
      this.$emit("change", !this.innerDrawer);
    },
    changeIndex(i) {
      this.curentIndex = i;
      this.currentPage = 1;
      this.noticPageList()
    },
    pageChange(e) {
      this.currentPage = e;
      this.noticPageList()
    },
    webSocketListener(e) {
      if(e.detail.data != 'ping') {
        this.noticPageList(true)
      }
    },
  },
  mounted() {
    window.addEventListener('onmessageWS', this.webSocketListener)
  }
};
</script>
<style lang="less" scoped>
.follow-new-box {
  // &.show {
  //   right: 500px;
  //   transition: right 0.3s;
  // }
  // position: fixed;
  // width: 450px;
  width:100%;
  right: 50px;
  transition: right 0.3s;
  // height: 100vh;
  height: 100%;
  top: 0;
  z-index: 2001;
  background-color: #fff;
  display: flex;
  z-index: 1;
  .follow-new {
    flex: 1;
    background-color: #fff;
    padding-left: 20px;
    // padding: 20px 0 20px 30px;
    /deep/ .self-scroll {
      height: calc(100% - 125px);
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .footer {
      margin-top: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .follow-task-title {
      display: flex;
      justify-content: center;
      padding: 20px 0;
      margin-right: 20px;
      > div {
        display: flex;
        border-radius: 4px;
      }
      span {
        width: 108px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #d9d9d9;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: rgba(0, 0, 0, 0.65);
      }
      span:first-child {
        border-radius: 4px 0 0 4px;
      }
      span:last-child {
        border-radius: 0 4px 4px 0;
      }
      span.active {
        color: #1890ff;
        border-color: #1890ff;
      }
    }
  }

  .icon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    position: absolute;
    left: -28px;
    top: 20px;
    background: #1890ff;
    border-radius: 4px 0px 0px 4px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.19);
    color: #fff;
    font-size: 16px;
    margin: 0;
    i {
      color: #fff!important;
      margin: 0!important;
    }
    span {
      font-size: 12px;
      line-height: 13px;
      display: inline-block;
      height: 13px;
      position: absolute;
      background: #eb1111;
      border-radius: 5px;
      color: #fff;
      top: -5px;
      left: -5px;
      padding: 0 3px;
    }
  }
  .task-item {
    margin-bottom: 15px;
    padding-right: 20px;
    .task-item-head {
      display: flex;
      justify-content: space-between;
      > div {
        // opacity: 0.8;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: rgba(0,0,0,0.8);
        span {
          color: #1890ff;
          margin-right: 8px;
        }
      }
      .iconyidu {
        opacity: 0.3;
        font-size: 26px;
        color: #3e98ff;
      }
      .iconyidu:hover {
        opacity: 1;
      }
    }
    p {
      opacity: 0.6;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: justify;
      color: #000000;
      // line-height: 21px;
      margin: 0 0 8px;
      // text-indent: 2em;
    }
    .time {
      font-size: 12px;
      text-indent: 0;
    }
  }
}
</style>