<template>
  <el-dialog title="本次履约详情"
             :visible.sync="dialogDetail"
             v-if="dialogFormVisible"
             center
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="70%"
             :before-close="closeDetail">
    <div class="detail-content">
      <div class="base-info">
        <div class="base-content">
          <div class="content-div">
            <div class="c-title">姓名：</div>
            <div class="c-content">{{enteringInfo.nickname | emptyFileter}}</div>
          </div>
          <div class="content-div ">
            <div class="c-title">性别：</div>
            <div class="c-content">{{enteringInfo.sex | emptyFileter}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">年龄：</div>
            <div class="c-content" v-if="enteringInfo.age">{{enteringInfo.age | emptyFileter}}岁</div>
            <div class="c-content" v-else>{{enteringInfo.age | emptyFileter}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">身份证号：</div>
            <div class="c-content">{{enteringInfo.idNo | emptyFileter}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">联系方式：</div>
            <div class="c-content">{{enteringInfo.mobilePhone | emptyFileter}}</div>
          </div>
        </div>
      </div>
      <div class="base-info pt10">
        <div class="base-content">
          <div class="content-div">
            <div class="c-title">履约计划名称：</div>
            <div class="c-content">{{enteringInfo.name | emptyFileter}}</div>
          </div>
        </div>
        <div class="group-info base-content">
          <div class="content-div">
            <div class="c-title">履约时间点：</div>
            <div class="c-content" v-if="enteringInfo.timeNo">第{{enteringInfo.timeNo}}次履约</div>
            <div class="c-content" v-else>{{enteringInfo.timeNo | emptyFileter}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">履约方式：</div>
            <div class="c-content">{{enteringInfo.fuPlanType | emptyFileter}}</div>
          </div>
          <div class="content-div" v-if="enteringInfo.executePlanTime">
            <div class="c-title">实际履约时间：</div>
            <div class="c-content">{{enteringInfo.executePlanTime}}</div>
          </div>
          <div class="content-div" v-else>
            <div class="c-title">计划履约时间：</div>
            <div class="c-content">{{enteringInfo.fuPlanTime}}</div>
          </div>
          <div class="content-div">
            <div class="c-title">预约履约时间：</div>
            <div class="c-content">{{enteringInfo.appointmentTime | emptyFileter}}</div>
          </div>
        </div>
        <div class="group-info base-content flex-start">
          <div class="content-div">
            <div class="c-title">履约状态：</div>
            <div class="c-content">{{enteringInfo.status | emptyFileter}}</div>
          </div>
          <div class="content-div">
            <p class="tip">备注：{{enteringInfo.remarks | emptyFileter}}</p>
          </div>
        </div>
      </div>
      <div class="base-info console-list">
        <div class="list-item">
          <p class="title">预约日志</p>
        </div>
        <div class="list-item" v-for="(item, index) in enteringInfo.appointmentLogs" v-if="enteringInfo.appointmentLogs.length>0" :key="index">
          <p class="title">{{item.appointmentDate}},{{item.appointmentInfo}}</p>
          <p class="status">{{item.appointmentResult}}</p>
          <p class="reason" v-if="item.reason">变更原因：{{item.reason}}</p>
        </div>
        <div class="list-item" v-if="enteringInfo.appointmentLogs.length == 0">
          <p class="empty-p">暂无</p>
        </div>
      </div>
      <div class="base-info console-list">
        <div class="list-item">
          <p class="title">患教资料</p>
        </div>
        <div class="list-item" v-if="enteringInfo.eduData">
          <p class="time">{{enteringInfo.eduData.timeNodeInfo}}</p>
          <a class="link-p" :href="enteringInfo.eduData.highDefinitionShortUrl" target="_blank">{{enteringInfo.eduData.headerName}}</a>
        </div>
        <div class="list-item" v-if="!enteringInfo.eduData">
          <p class="empty-p">暂无</p>
        </div>
      </div>
      <div class="base-info console-list">
        <div class="list-item">
          <p class="title">履约登记表</p>
        </div>
        <div class="list-item" v-for="(item, index) in enteringInfo.fuTable" :key="index" v-if="enteringInfo.fuTable.length>0">
          <p class="link-p" @click="goToScale(item)">{{item.name}}</p>
        </div>
        <div class="list-item" v-if="enteringInfo.fuTable.length==0">
          <p class="empty-p">暂无</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import { mapState, mapActions } from 'vuex';
  export default {
    data(){
      return{
        dialogDetail: true,
        // eduData: {},
      }
    },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false
      },
      enteringInfo: {
        type: Object,
        default: {}
      }
    },
    computed: {
      // ...mapState('recordManage',{
      //   enteringInfo: state => state.enteringInfo,
      // })
    },
    created() {
      // if(this.dialogFormVisible == true) {
      //   this.getEnteringInfo({patientId: this.enteringRow.patientId,fuPlanPatientTimesId: this.enteringRow.fuPlanPatientTimesId});
      // }
    },
    mounted(){
    },
    methods: {
      // ...mapActions('recordManage', ['getEnteringInfo']),
      closeDetail(){
        this.$emit('closeDetail',false)
      },
      goToScale(val) {
        console.log(`goToScale`,val);
        if(val.scaleNo.indexOf('SCALE')>-1){
          this.$router.push({path: '/followup/record-manage/form-template',
          query: {doctorId: this.enteringInfo.doctorId, scaleNo: val.scaleNo, planPatientsTimesId: this.enteringInfo.planPatientsTimesId,planTimesId : val.planTimesId, showBtn: 1}});
        }
        
      }
    },
    filters: {
      emptyFileter: function(value) {
        if (!value) {
          return '-';
        } else {
          return value;
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../../../style/followup/followup-common';
  @import '../../../../style/followup/element-reset.css';

  .detail-content{
    max-height: 550px;
    overflow-y: scroll;
    &::-webkit-scrollbar{
      width:5px;
    }
    &::-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);
    }
  }
  .base-info {
    padding: 0 10px;
    border-bottom: 1px dashed #efefef;
    &.pt10{
      padding-top: 10px;
    }
    .base-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      line-height: 35px;
      &.dashed-border{
        border-bottom: 1px dashed #efefef;
      }
      &.flex-start{
        justify-content: flex-start;
      }
      .content-div {
        .c-title {
          width: 115px;
        }
        .tip{
          padding-left: 20px;
          color: #999;
        }
      }
    }

    &.console-list{
      padding: 15px 10px;
      .list-item{
        display: flex;
        line-height: 38px;
        color: #666;
        .title{
          width: 300px;
        }
        .status{
          width: 150px;
        }
        .reason{
          flex: 1;
        }
        .time{
          width: 150px;
        }
        .link-p{
          flex: 1;
          text-decoration: underline;
          color: $picaGreen;
          cursor: pointer;
        }
        .empty-p{
          flex: 1;
          color: #999;
        }
      }
    }
  }
</style>
