<template>
  <div class="plan-detail">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird">
    </bread-crumb>
    <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 @click="changePlan" size="small">修改</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">{{planDetail.name}}</div>
          </div>
        </div>
        <div class="group-info base-content">
          <div class="content-div">
            <div class="c-title">履约居民：</div>
            <div class="c-content has-operation">{{planDetail.num}}人<el-button type="text" @click="goToResidentList">查看居民></el-button></div>
          </div>
        </div>
        <div class="followup-info base-content">
          <div class="content-div">
            <div class="c-title">履约模板：</div>
            <div class="c-content">{{planDetail.resourceName}}</div>
          </div>
        </div>
        <div class="followup-info base-content">
          <div class="content-div">
            <div class="c-title">履约开始时间：</div>
            <div class="c-content has-operation">{{planDetail.timeStr}} <el-button class="btn-text" type="text" @click="goToFollowTime">查看全部></el-button></div>
          </div>
        </div>
        <div class="followup-info base-content">
          <div class="content-div">
            <div class="c-title">备注：</div>
            <div class="c-content">{{planDetail.remarksStatusStr}}</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 planDetail.fPlanTimeReqList" :label="item.id">{{item.timeStr}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="followup-contents" v-if="nodeContent.length">
          <div class="content-div">
            <div class="c-title">履约方式：</div>
            <div class="c-content">{{nodeContent[0].typeStr}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">提醒医生预约居民：</div>
            <div class="c-content more-content">
              <p v-for="item in nodeContent[0].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[0].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[0].followupList" @click="goToScale(item)">{{item.sendContent}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <follow-time :showThisPage="showFollowTime" :nodeTimeList="nodeTimeList" @closeFollowTime="closeFollowTime"></follow-time>
  </div>
</template>

<script>
  import BreadCrumb from '@/components/breadcrumb';
  //变更计划dialog
  import FollowTime from '@/views/followup/plan-manage/dialog/follow-time';

  import { mapState, mapActions } from 'vuex'
  export default {
    name: "plan-detail",
    components: {
      BreadCrumb,
      FollowTime
    },
    data() {
      return {
        /*面包屑配置*/
        curmbFirst: '履约管理',
        curmbSecond: '计划管理',
        curmbThird: '计划详情',
        jumPathThird: '/followUp/plan-manage',
        /*面包屑配置*/
        timeNodes: null,//时间节点
        showFollowTime: false,  //是否展示全部时间
        thisNodeContents: {},
        nodeContent: [],  //节点详情
      }
    },
    created() {

    },
    mounted() {
      this.getPlanDetail(this.$route.query.planId); //获取计划详情
      this.getNodeTimeList(this.$route.query.planId); // 获取履约时间列表
    },
    computed: {
      ...mapState('planManage', {
        residentDetail: state => state.residentDetail,
        planDetail: state => state.planDetail,
        nodeTimeList: state => state.nodeTimeList,
      })
    },
    methods: {
      ...mapActions('planManage', ['getResidentDetail',
        'getPlanDetail',
        'getNodeTimeList',
        'getNodeTimeContent',
        'setResidentCrumb',
        'setPlanModifyCrumb'
      ]),
      goToFollowTime() {
        this.showFollowTime = true
      },
      goToResidentList() {
        let residentCrumb = [
          {
            name: '履约管理',
            href: null
          },
          {
            name: '计划管理',
            href: `#/followup/plan-manage/plan-list`
          },
          {
            name: '计划详情',
            href: `#/followup/plan-manage/plan-detail?planId=${this.$route.query.planId}`
          },
          {
            name: '查看居民',
            href: null
          }
        ]
        this.setResidentCrumb(residentCrumb);
        this.$router.push({path: '/followup/plan-manage/resident-list', query: {planId: this.$route.query.planId, planName: this.planDetail.name}})
      },
      changePlan() {
        let planModifyCrumb = [
          {
            name: '履约管理',
            href: null
          },
          {
            name: '计划管理',
            href: `#/followup/plan-manage/plan-list`
          },
          {
            name: '计划详情',
            href: `#/followup/plan-manage/plan-detail?planId=${this.$route.query.planId}`
          },
          {
            name: '修改计划',
            href: null
          }
        ]
        this.setPlanModifyCrumb(planModifyCrumb)
        this.$router.push({path: '/followup/plan-manage/plan-modify', query: {planId: this.$route.query.planId}})
      },
      closeFollowTime(isShow) {
        this.showFollowTime = isShow
      },
      goToShort(url) {
        window.open(url)
      },
      goToScale(val) {
        this.$router.push({path: '/followup/record-manage/form-template',
          query: {doctorId: val.doctorId, scaleNo: val.resourceId, planPatientsTimesId: val.planPatientsTimesId,planTimesId : val.planTimesId, showBtn: 0}});
      }
    },
    watch: {
      planDetail(val) {
        if(val.fPlanTimeReqList.length){
          this.timeNodes = val.fPlanTimeReqList[0].id
        }

      },
      timeNodes(val) {
        this.nodeContent =  this.planDetail.fPlanTimeReqList.filter(function(item){
          return item.id == val;
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../style/followup/followup-common';
  @import '../../../style/followup/element-reset.css';
  .plan-detail {
    .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;
            }
          }
          .has-operation {
              button {
                height: 19.2px;
                padding: 0 0 0 15px;
              }

          }
        }
      }
      .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>
