<template>
  <el-dialog
    title="本次履约详情"
    v-model:visible="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">
              {{ emptyFileter_filter(enteringInfo.nickname) }}
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">性别：</div>
            <div class="c-content">
              {{ emptyFileter_filter(enteringInfo.sex) }}
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">年龄：</div>
            <div class="c-content" v-if="enteringInfo.age">
              {{ emptyFileter_filter(enteringInfo.age) }}岁
            </div>
            <div class="c-content" v-else>
              {{ emptyFileter_filter(enteringInfo.age) }}
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">身份证号：</div>
            <div class="c-content">
              {{ emptyFileter_filter(enteringInfo.idNo) }}
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">联系方式：</div>
            <div class="c-content">
              {{ emptyFileter_filter(enteringInfo.mobilePhone) }}
            </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">
              {{ emptyFileter_filter(enteringInfo.name) }}
            </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>
              {{ emptyFileter_filter(enteringInfo.timeNo) }}
            </div>
          </div>
          <div class="content-div">
            <div class="c-title">履约方式：</div>
            <div class="c-content">
              {{ emptyFileter_filter(enteringInfo.fuPlanType) }}
            </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">
              {{ emptyFileter_filter(enteringInfo.appointmentTime) }}
            </div>
          </div>
        </div>
        <div class="group-info base-content flex-start">
          <div class="content-div">
            <div class="c-title">履约状态：</div>
            <div class="c-content">
              {{ emptyFileter_filter(enteringInfo.status) }}
            </div>
          </div>
          <div class="content-div">
            <p class="tip">
              备注：{{ emptyFileter_filter(enteringInfo.remarks) }}
            </p>
          </div>
        </div>
      </div>
      <div class="base-info console-list">
        <div class="list-item">
          <p class="title">预约日志</p>
        </div>
        <template v-for="(item, index) in enteringInfo.appointmentLogs">
          <div v-if="enteringInfo.appointmentLogs.length > 0" class="list-item">
            <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>
        </template>
        <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>
        <template v-for="(item, index) in enteringInfo.fuTable">
          <div v-if="enteringInfo.fuTable.length > 0" class="list-item">
            <p class="link-p" @click="goToScale(item)">{{ item.name }}</p>
          </div>
        </template>
        <div class="list-item" v-if="enteringInfo.fuTable.length == 0">
          <p class="empty-p">暂无</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
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() {},
  emits: ['closeDetail'],
  methods: {
    emptyFileter_filter: function (value) {
      if (!value) {
        return '-'
      } else {
        return value
      }
    },
    // ...mapActions('recordManage', ['getEnteringInfo']),
    closeDetail() {
      $emit(this, '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,
          },
        })
      } else {
        this.$message({
          message: '此次随访暂不支持在pc端录入',
          type: 'warn',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@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>
