<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) {
      console.log(`goToScale`, val)
      if (val.resourceId.indexOf('SCALE') > -1) {
        this.$router.push({
          path: '/followup/record-manage/form-template',
          query: {
            doctorId: val.doctorId,
            scaleNo: val.resourceId,
            planPatientsTimesId: val.planPatientsTimesId,
            planTimesId: val.planTimesId,
            showBtn: 0,
          },
        })
      } else {
        this.$message({
          message: '此次随访暂不支持在pc端录入',
          type: 'warn',
        })
      }
    },
  },
  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>
