<template>
  <div class="resident-detail">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in residentCrumb">
          <a v-if="item.href" :href="item.href">{{item.name}}</a>
          <span v-else >{{item.name}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="f-detail-content screenSet">
      <div class="header">
        <div class="title"><p>基本信息</p></div>
        <div class="h-btn">
          <el-button class="button-white" plain size="small" @click="changePlan">计划变更</el-button>
          <el-button v-if="status==3" class="button-white" plain size="small" @click="finishFollowup">恢复随访</el-button>
          <el-button v-else class="button-white" plain size="small" @click="finishFollowup">结束随访</el-button>
        </div>
      </div>
      <div class="base-info">
        <div class="resident-info base-content">
          <div class="content-div">
            <div class="c-title">姓名：</div>
            <div class="c-content">{{residentDetail.patientName}}</div>
          </div>
          <div class="content-div ">
            <div class="c-title">性别：</div>
            <div class="c-content">{{residentDetail.sexName}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">年龄：</div>
            <div class="c-content">{{residentDetail.age}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">身份证号：</div>
            <div class="c-content">{{residentDetail.idNo}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">联系方式：</div>
            <div class="c-content">{{residentDetail.mobilePhone}}</div>
          </div>
        </div>
        <div class="group-info base-content">
          <div class="content-div">
            <div class="c-title">分组：</div>
            <div class="c-content">{{residentDetail.labelName}}</div>
          </div>
        </div>
        <div class="followup-info base-content">
          <div class="content-div">
            <div class="c-title">随访模板：</div>
            <div class="c-content">{{planDetails.resourceName}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">随访开始时间：</div>
            <div class="c-content">{{planDetails.timeStr}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">备注：</div>
            <div class="c-content">{{planDetails.remarksStatusStr}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">随访状态：</div>
            <div class="c-content">{{planDetails.statusStr}}</div>
          </div>
        </div>
      </div>
      <div class="time-nodes">
        <p class="title">随访时间节点</p>
        <div class="node-div">
          <el-radio-group v-model="timeNodes" size="small">
            <el-radio-button :key="item.id" v-for="item in timeNodeList" :label="item.id">{{item.timeStr}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="followup-contents">
          <div class="content-div">
            <div class="c-title">随访方式：</div>
            <div class="c-content">{{nodeContent.typeStr}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">提醒医生预约居民：</div>
            <div class="c-content more-content">
              <p v-for="item in nodeContent.remindList">{{item.startDaysStr}}</p>
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">推送患教：</div>
            <div class="c-content more-content" v-for="item in nodeContent.pushContentList">
              <p>{{item.startDaysStr}} <span class="click-text" @click="goToShort(item.resourceUrl)" >《{{item.sendContent}}》</span></p>
              <p class="reminding">推送规则：优先微信推送，如果居民没关注云鹊医公众号，将短信推送，短信推送会消耗您的额度。推送详情请前往云鹊医app患教中心查询</p>
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">随访登记表：</div>
            <div class="c-content more-content">
              <p  class="click-text" v-for="item in nodeContent.followupList" @click="goToShort(item.resourceUrl)" >{{item.sendContent}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <change-plan :showThisPage="showChangePlan" :planChangeData="planChangeData" @closeChangePlan="closeChangePlan"></change-plan>
    <finish-followup :showThisPage="showFinishFollowup" :finishData="finishData" @closeFinishFollowup="closeFinishFollowup"></finish-followup>
  </div>
</template>

<script>
  //变更计划dialog
  import ChangePlan from '@/views/followup/plan-manage/dialog/change-plan';
  //结束随访dialog
  import FinishFollowup from '@/views/followup/plan-manage/dialog/finish-followup';

  import { mapState, mapActions } from 'vuex'
  export default {
    name: "resident-detail",
    components: {
      ChangePlan,
      FinishFollowup,
    },
    data() {
      return {
        /*面包屑配置*/
        curmbFirst: '随访管理',
        curmbSecond: '计划管理',
        curmbThird: '查看居民',
        jumPathThird: '/followUp/plan-manage',
        /*面包屑配置*/
        timeNodes: 0,//时间节点
        showChangePlan: false,//是否展示变更计划
        showFinishFollowup: false, //是否展示结束随访,
        planChangeData: {}, //变更信息
        finishData: {}, //结束信息
        planDetails: {}, //计划详情
        status: null,
        residentCrumb: [], //面包屑
      }
    },
    created() {
      let residentCrumbList = sessionStorage.getItem('residentCrumb');
      this.residentCrumb = JSON.parse(residentCrumbList);
    },

    mounted() {
      this.getResidentDetail({
        patientId: this.$route.query.patientId,
        planId: this.$route.query.planId,
        fuPlanPatientId: this.$route.query.fuPlanPatientId
      }); //获取居民详情
      this.getGroupList(); //获取分组列表
    },
    computed: {
      ...mapState('planManage', {
        residentDetail: state => state.residentDetail,
        nodeContent: state => state.nodeContent,
        timeNodeList: state => state.timeNodeList,
        nodeContent: state => state.nodeContent,
        groupList: state => state.groupList
      })
    },
    methods: {
      ...mapActions('planManage', ['getResidentDetail', 'getNodeTimeContent', 'getGroupList']),
      changePlan() {
        this.planChangeData = {
          planPatientsId: this.residentDetail.fPlanDto.planPatientsId,
         // planId: this.residentDetail.fPlanDto.id,
          patientId: this.residentDetail.patientId,
          yLabelList: this.residentDetail.labelIdList||[],
         // startDate:  this.residentDetail.fPlanDto.timeStr,
          planIdOld: this.residentDetail.fPlanDto.id,
          patientName: this.residentDetail.patientName,
        }
        this.showChangePlan = true;
      },
      closeChangePlan(isShow) {
        this.showChangePlan = isShow
      },
      finishFollowup() {
        let patientIdList = [];
        let planPatientsIdList = [];
        patientIdList.push(this.residentDetail.patientId)
        planPatientsIdList.push(this.residentDetail.fPlanDto.planPatientsId)
        this.finishData = {
          changeCode: this.status,
          planId: this.residentDetail.fPlanDto.id,
          patientName: this.residentDetail.patientName,
          patientIdList: patientIdList,
          title: this.status==3?'恢复随访':'结束随访',
          reasonName: this.status==3?'恢复原因：':'结束原因：',
          planPatientsIdList: planPatientsIdList
        }
        this.showFinishFollowup = true;
      },
      closeFinishFollowup(isShow) {
        this.showFinishFollowup = isShow
      },
      goToShort(url) {
        window.open(url)
      },
    },
    watch: {
      timeNodeList(val) {
        console.log('val1',val)
        if(val&&val.length) {
          this.timeNodes = val[0].id
        }
      },
      timeNodes(val) {
        this.getNodeTimeContent(val)
      },
      residentDetail(val) {
        this.planDetails = val.fPlanDto
        this.status = val.fPlanDto.status
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../style/followup/followup-common';
  @import '../../../style/followup/element-reset.css';
  .resident-detail {
    .bread-crumb {
      position: fixed;
      left: 255px;
      top: 64px;
      width: 100%;
      background: #fff;
      height: 61px;
      padding: 20px 20px 30px;
      z-index: 99;
      border-top: 3px solid #F0F2F5;
      .el-breadcrumb__inner {
        font-size: 14px;
      }
      a:hover {
        color: #449284;
      }
    }
    .f-detail-content {
      .header {
        .title {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
      }
      .base-info {
        padding: 10px;
        border-bottom: 1px dashed #efefef;
        .base-content {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 10px 0;
          .content-div {
            .c-title {
              width: 115px;
            }
          }
        }
      }
      .time-nodes {
        padding: 20px 10px;
        .title {
          color: #666666;
          padding-bottom: 20px;
        }
        .followup-contents {
          padding: 25px;

        }
        .node-div {
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
          white-space: nowrap;
          &::-webkit-scrollbar{
            height: 6px;
          }
          &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.1);
          }
        }
      }
    }
  }
</style>
