<template>
  <div class="home-wrap">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="message-content">
      <el-row>
        <el-col class="visitor screenSet" :span="24">
          <div class="visitor-title">
            <div class="title">
              今日履约：
              <span style="color:#449284;margin-right: 10px">{{todayPlansList.length}}人</span>
              <span
                class="type-button"
                :style="{background:(planBtn?'rgba(68,146,132,0.06)':'#ffffff')}"
                @click="changeTodayPlansList(0)"
              >未完成</span>
              <span
                class="type-button"
                :style="{background:(!planBtn?'rgba(68,146,132,0.06)':'#ffffff')}"
                @click="changeTodayPlansList(1)"
              >已过期</span>
            </div>
            <span class="visitor-more" @click="lookMore(1)">查看更多</span>
          </div>
          <div class="visitor-info">
            <el-table :data="todayPlansList" style="width: 100%">
              <el-table-column prop="patientName" label="姓名" align="center"></el-table-column>
              <el-table-column prop="appointTime" label="预约时间" align="center"></el-table-column>
              <el-table-column prop="fuTypeStr" label="履约方式" align="center"></el-table-column>
              <el-table-column prop="content" label="操作" align="center">
                <template slot-scope="scope">
                  <span class="text-btn" @click="goToScale(scope.row)">履约录入</span> |
                  <span class="text-btn" @click="changeFollowStatus(scope.row)">变更履约状态</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col class="visitor screenSet" :span="24" style="margin-top: 0;margin-bottom: 0;">
          <div class="visitor-title">
            <div class="title">
              今日预约
              <span
                class="type-button"
                :style="{background:(appointBtn?'rgba(68,146,132,0.06)':'#ffffff')}"
                @click="changeTodayAppointsList(0)"
                style="margin-left: 10px;"
              >未完成</span>
              <span
                class="type-button"
                :style="{background:(!appointBtn?'rgba(68,146,132,0.06)':'#ffffff')}"
                @click="changeTodayAppointsList(1)"
              >已过期</span>
            </div>
            <span class="visitor-more" @click="lookMore(2)">查看更多</span>
          </div>
          <div class="visitor-info">
            <el-table :data="todayAppointsList" style="width: 100%">
              <el-table-column prop="planName" label="履约计划名称" align="center"></el-table-column>
              <el-table-column prop="appointTime" label="履约计划时间" align="center"></el-table-column>
              <el-table-column prop="appointedCount" label="已经预约" align="center"></el-table-column>
              <el-table-column prop="notAppointedCount" label="未预约" align="center"></el-table-column>
              <el-table-column prop="content" label="操作" align="center">
                <template slot-scope="scope">
                  <span
                    class="text-btn"
                    @click="goToReservation(scope.row.planName, scope.row.appointTime)"
                  >去预约</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col class="message screenSet" :span="24" id="screenSet">
          <div class="message-title">
            系统消息
            <span>今日消息：{{count}}条</span>
          </div>
          <div class="message-info" v-if="messageList.length > 0">
            <div class="message-item" v-for="(item,index) in messageList" :key="index">
              <div class="text-top">
                <img :src="item.url" />
                <span>{{item.menuName}}</span>
                <span>{{item.portalTime}}</span>
              </div>
              <div class="text-bottom" v-html="item.content"></div>
            </div>
          </div>
          <div class="no-message" v-else>
            <div>
              <img src="../assets/image/noData.png" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <change-followup-status
      :isShowChangeDialog="isShowChangeDialog"
      :statusForm="statusForm"
      @closeChangeStatus="closeChangeStatus()"
    ></change-followup-status>
    <el-dialog
      title="选择量表"
      :visible.sync="selectFormShow"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="400px"
      :before-close="closeForm"
    >
      <div class="list-content">
        <p
          v-for="(item, index) in formList.scalesList"
          :key="index"
          @click="goFormView(item)"
        >{{item.sendContent}}</p>
      </div>
    </el-dialog>

    <!-- 敏感词及协议校验 -->
    <el-dialog class="prot-dialog" title="" :visible.sync="isShowProtocolDialog" width="30%" center :show-close=false>
      <p class="prot-dialog-tips-1">由于该居民尚未同意《云鹊平台隐私协议》，将导致履约量表部分信息无法录入，为了方便您的工作开展，请您发送短信提醒居民完成授权</p>
      <p v-show="!isSentedProt" class="prot-dialog-tips-2">若您选择暂不发送，您只能录入量表的非敏感信息</p>
      <p v-show="isSentedProt" class="prot-dialog-tips-3">为避免打扰居民，7天内只能发送1次，您已发送过短信，请尽快联系居民同意授权</p>
      <span v-show="!isSentedProt" slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeProtocolDialog"> 暂不发送 </el-button>
        <el-button size="small" type="primary" @click="sendMsg"> 发送短信 </el-button>
      </span>
      <span v-show="isSentedProt" slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="closeProtocolDialog"> 我知道了 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import BreadCrumb from "../components/breadcrumb.vue";
import { setTimeout, setInterval } from "timers";

import ChangeFollowupStatus from "./followup/record-manage/dialog/change-followup-status";
import { postTrace } from '@/utils/patients/patientsapi'
import { mapGetters, mapState, mapActions } from "vuex";
import * as commonUtil from "../utils/utils";
import { uniteValidate, authMessage } from '@/utils/followup/followapis'

let vm = null;
export default {
  components: {
    BreadCrumb,
    ChangeFollowupStatus
  },
  data() {
    return {
      curmbFirst: "数据总览",
      spanFirstNum: 12,
      spanSecondNum: 12,
      tableData: [],
      count: 0,
      messageList: [],
      planBtn: true,
      appointBtn: true,
      isShowChangeDialog: false,
      statusForm: {},
      selectFormShow: false,
      ScaleData: {},
      isShowProtocolDialog: false,
      scaleQuery: {},
      isSentedProt: false,
      scaleNo: '',
      patientIds: [],
      sendMsgPatientIds: [],
    };
  },
  created() {
    vm = this;
    vm.getSystemData();
    vm.getTodayPlansList({
      status: 0
    });
    vm.getTodayAppointsList({
      status: 0
    });
    /*vm.getTodayOverview({
          status:0
        });*/
  },
  computed: {
    ...mapGetters(["_token"]),
    ...mapState("workbench", {
      todayPlansList: state => state.todayPlansList,
      todayAppointsList: state => state.todayAppointsList
      //todayOverview: state => state.todayOverview,
    }),
    ...mapState("recordManage", {
      formList: state => state.formList
    })
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight()
  },
  methods: {
    ...mapActions("workbench", [
      "getTodayPlansList",
      "getTodayAppointsList",
      "getTodayOverview"
    ]),
    ...mapActions("recordManage", ["getFormList"]),

    // 查看更多
    lookMore(type) {
      if (type == 1) {
        this.$router.push("/followup/record-manage/record-list");
      } else if (type == 2) {
        this.$router.push("/followup/reservation-manage/reservation-list");
      }
    },
    // 获取系统消息数据
    getSystemData() {
      vm.GET("portal/portalMessage/queryPortalMessageInfo", {
        token: vm._token,
        pageNo: 1,
        pageSize: 15
      }).then(res => {
        if (res.code == "000000") {
          vm.messageList = res.data.portalMessageModels;
          vm.count = res.data.count;
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    created() {
        vm = this
        vm.getSystemData()
        vm.getTodayPlansList({
          status:0
        });
        vm.getTodayAppointsList({
          status:0
        });
        /*vm.getTodayOverview({
          status:0
        });*/
      postTrace('ACTION_WEB_ENTER', `${window.location.href}`);
    },
    changeTodayAppointsList(status) {
      if (status == 0) {
        vm.appointBtn = true;
      } else {
        vm.appointBtn = false;
      }
      vm.getTodayAppointsList({
        status: status
      });
    },
    goToReservation(planName, appointTime) {
      this.$router.push({
        path: "/followup/reservation-manage/reservation-list",
        query: { planName: planName, appointTime: appointTime, status: 1 }
      });
    },
    closeChangeStatus(val) {
      this.isShowChangeDialog = val;
      let status = null;
      if (this.planBtn == true) {
        status = 0;
      } else {
        status = 1;
      }
      this.getTodayPlansList({
        status: status
      });
    },
    goFormView(item) {
      // this.selectFormShow = false;
      // this.$router.push({
      //   path: "/followup/record-manage/form-template",
      //   query: {
      //     doctorId: this.ScaleData.doctorId,
      //     scaleNo: item.resourceId,
      //     planPatientsTimesId: this.ScaleData.planPatientsTimesId,
      //     planTimesId: item.planTimesId,
      //     showBtn: 1
      //   }
      // });
      this.scaleQuery = {
        doctorId: this.ScaleData.doctorId,
        scaleNo: item.resourceId,
        planPatientsTimesId: this.ScaleData.planPatientsTimesId,
        planTimesId: item.planTimesId,
        showBtn: 1
      }
      this.scaleNo = item.resourceId;
      // this.patientIds = [this.ScaleData.patientId];
      this.uniteValidateAction()
    },
    closeForm() {
      this.selectFormShow = false;
    },
    async goToScale(row) {
      await this.getFormList(row.planTimesId); //获取量表列表
      //获取量表列表情况
      this.patientIds = [row.patientId];
      if (this.formList.scalesList.length > 1) {
        this.selectFormShow = true;
        this.ScaleData = {
          doctorId: this.formList.doctorId,
          planPatientsTimesId: row.planPatientTimesId
        };
      } else if (this.formList.scalesList.length === 1) {
        // this.$router.push({
        //   path: "/followup/record-manage/form-template",
        //   query: {
        //     doctorId: this.formList.doctorId,
        //     scaleNo: this.formList.scalesList[0].resourceId,
        //     planPatientsTimesId: row.planPatientTimesId,
        //     planTimesId: row.planTimesId,
        //     showBtn: 1
        //   }
        // });
        this.scaleQuery = {
          doctorId: this.formList.doctorId,
          scaleNo: this.formList.scalesList[0].resourceId,
          planPatientsTimesId: row.planPatientTimesId,
          planTimesId: row.planTimesId,
          showBtn: 1
        }
        this.scaleNo = this.formList.scalesList[0].resourceId;
        this.uniteValidateAction()
      } else {
        this.$message.warning("暂无量表!");
      }
    },
    changeFollowStatus(row) {
      this.statusForm = {
        fuPlanPatientTimesId: row.planPatientTimesId,
        patientId: row.patientId,
        nickname: row.patientName,
        status: 1
      };
      this.isShowChangeDialog = true;
    },

    // Add by Anndy Yang
    // 统一验证：量表内是否存在敏感字段、居民是否签署隐私协议、7天内是否发送过授权短信
    uniteValidateAction() {
      let validParams = {
        scaleNo: this.scaleNo,
        patientIds: this.patientIds, // pc端只传这个字段
        // planPatientsTimesId: planPatientsTimesId,  // app端只传这个字段
        protocolType: 5,
        userType: 1,
        validateType: 1
      };

      uniteValidate(validParams).then(res => {
        let result = res;
        // 请求成功
        if (result.code === '000000') {
          let levelType = result.data.levelType;
          // 没有敏感字段或者居民已经签订过协议，则直接返回
          if (levelType === 1 || levelType === 2) {
            this.jumpToScale();
          } else if (levelType === 3) {
            this.isShowProtocolDialog = true;
            this.isSentedProt = true;
          } else if (levelType === 4) {
            this.isShowProtocolDialog = true;
            this.isSentedProt = false;
            this.sendMsgPatientIds = result.data.ids;
          }
        }
      });
    },

    // 发送协议授权短信给居民
    sendMsgToPatients() {
      authMessage({ patientIds: this.sendMsgPatientIds }).then(res => {
        if (res.code === '000000') {
          this.$message({
            message: '已发送，请尽快联系居民同意授权',
            type: 'success'
          });
        }
      });
      this.isShowProtocolDialog = false;
    },

    // 统一跳转到量表页面
    jumpToScale() {
      this.$router.push({
        path: "/followup/record-manage/form-template",
        query: this.scaleQuery
      });
    },

    // 关闭协议确认窗口
    closeProtocolDialog() {
      this.isShowProtocolDialog = false
      this.jumpToScale()
    },

    // 发送短信通知
    sendMsg() {
      this.sendMsgToPatients();
      this.closeProtocolDialog()
    },

  }
};
</script>
<style lang="scss">
.home-wrap {
  .list-content {
    p {
      cursor: pointer;
      line-height: 30px;
      text-decoration: underline;
      color: #449284;
    }
  }
  .message-content {
    .visitor {
      padding: 0 25px 30px;
      margin-bottom: 20px;
      background: #fff;
      margin-top: 88px;
      // min-height: 348px;
      @media screen and (min-width: 1240px) and (max-width: 1900px) {
        width: 95%;
        height: 300px !important;
      }
      @media screen and (min-width: 1900px) {
        width: 96.7%;
        height: 380px !important;
      }
      .visitor-title {
        height: 80px;
        line-height: 80px;
        margin-right: 20px;
        text-align: right;
        .title {
          float: left;
          font-size: 20px;
        }
        .visitor-more {
          font-size: 12px;
          color: #449284;
          border: 1px solid rgba(68, 146, 132, 0.3);
          padding: 5px 14px;
          border-radius: 3px;
          background: rgba(68, 146, 132, 0.06);
          cursor: pointer;
        }
        .type-button {
          font-size: 12px;
          color: #449284;
          border: 1px solid rgba(68, 146, 132, 0.3);
          padding: 5px 14px;
          border-radius: 3px;
          /*background: rgba(68,146,132,0.06);*/
          background: #ffffff;
          cursor: pointer;
        }
      }
      .visitor-info {
        margin-right: 20px;
        .text-btn:hover {
          cursor: pointer;
          color: #449284;
        }
      }
    }
    .message {
      padding: 0 25px 30px;
      // margin-top: 20px;
      margin-top: 20px;
      background: #fff;
      @media screen and (min-width: 1240px) and (max-width: 1900px) {
        width: 95%;
        // height: 320px !important;
      }
      @media screen and (min-width: 1900px) {
        width: 96.7%;
        // height: 400px !important;
      }
      .message-title {
        font-size: 20px;
        height: 80px;
        line-height: 80px;
        span {
          font-size: 14px;
          color: #717377;
          margin-left: 8px;
        }
      }
      .message-info {
        padding: 7px;
        .message-item {
          padding: 10px 10px 15px;
          border-bottom: 1px solid #ebeef5;
          .text-top {
            img {
              float: left;
              width: 16px;
              margin-top: 3px;
            }
            span:nth-child(2) {
              padding: 10px;
            }
            span:nth-child(3) {
              font-size: 12px;
              color: #999;
            }
          }
          .text-bottom {
            font-size: 14px;
            color: #666;
            margin-top: 15px;
          }
        }
      }
    }
    .no-message {
      text-align: center;
      img {
        width: 100px;
        // margin-top: 17%;
        margin: 6% 0 6%;
      }
    }
  }
}
</style>


