<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:value="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="goToScale(item)"
              >
                {{ 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: [], //面包屑
      nodePlanPatientsTimesId: [],
    }
  },
  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)
    },
    goToScale(val) {
      this.$router.push({
        path: '/followup/record-manage/form-template',
        query: {
          doctorId: this.residentDetail.doctorId,
          scaleNo: val.resourceId,
          planPatientsTimesId:
            this.nodePlanPatientsTimesId[0].planPatientsTimesId,
          planTimesId: val.planTimesId,
          showBtn: 1,
        },
      })
    },
  },
  watch: {
    timeNodeList(val) {
      //        console.log('val1',val)
      if (val && val.length) {
        this.timeNodes = val[0].id
      }
    },
    timeNodes(val) {
      this.getNodeTimeContent(val)
      this.nodePlanPatientsTimesId = this.timeNodeList.filter(function (item) {
        return item.id == val
      })
      //        console.log(this.nodePlanPatientsTimesId)
    },
    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>
