<template>
  <div class="inquiry-wrap">
    <div class="line">
      <div class="left">
        <div>
          {{ item.diagnoseLogId }}&nbsp;
          <span class="dep">{{ item.department }}</span>
        </div>
      </div>
      <div class="right">
        <div
          class="right-status"
          :class="{ grey: item.returnStatus >= 5, org: item.returnStatus == 1 }"
        >
          {{ returnStatusText }}
        </div>
      </div>
    </div>
    <div class="tag-container">
      <div class="talk">
        <i
          class="talk-icon"
          :class="diagnoseTypeIcon"
        /><span>{{
          diagnoseType
        }}</span>
      </div>
      <div class="time">
        <i class="appointment" /><span>{{ appointBeginTime }}</span>-<span>{{ appointEndTime }}</span>
      </div>
    </div>
    <div class="line mt30">
      <div class="inquiry-user-container">
        <div class="inquiry-user">
          <div class="inquiry-user-l">
            <div class="inquiry-user-img">
              <div
                v-if="
                  diagnoseTypeIcon == 'voice' &&
                    (item.returnStatus == 1 || item.returnStatus == 3) &&
                    doctorTrtcEntryStatus != 1
                "
                class="offline"
              >
                <img
                  :src="offline"
                  alt=""
                >
              </div>
              <div class="avatar">
                <el-avatar :src="item.doctorImageUrl" />
              </div>
            </div>
            <div class="inquiry-user-info">
              <div class="info-name-wrap">
                <span class="info-name">
                  {{ item.doctorName }}
                </span>
                <span>接诊医生</span>
              </div>
              <div class="info-container">
                <div class="info-phone">
                  {{ item.doctorMobile }}
                </div>
                <div
                  v-if="item.doctorCallTime"
                  class="info-call-time"
                >
                  {{ pastDoctorCallTime }}前呼叫
                </div>
                <div
                  v-if="doctorCallKfStatus == 1"
                  class="info-calling"
                >
                  <img
                    :src="infocallImg"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="diagnoseTypeIcon == 'voice' && doctorTrtcEntryStatus == 2"
            class="call-status"
          >
            <img
              v-if="isCall"
              :src="isDoctorChat ? callouting : callout"
              alt=""
              @click="drivingCall(item.doctorId, 2)"
            >
          </div>
        </div>
        <div
          class="line-btn"
          @click="openChat"
        >
          <span
            v-if="userCallKfStatus == 1 || doctorCallKfStatus == 1"
          >正在呼叫医助，进入诊室</span>
          <span v-else>进入诊室</span>
        </div>
      </div>
      <div class="inquiry-user-container">
        <div class="inquiry-user">
          <div class="inquiry-user-l">
            <div class="inquiry-user-img">
              <div
                v-if="
                  diagnoseTypeIcon == 'voice' &&
                    (item.returnStatus == 1 || item.returnStatus == 3) &&
                    userTrtcEntryStatus != 1
                "
                class="offline"
              >
                <img
                  :src="offline"
                  alt=""
                >
              </div>
              <div class="avatar">
                <el-avatar :src="item.userImageUrl" />
              </div>
            </div>
            <div class="inquiry-user-info">
              <div class="info-name-wrap">
                <span class="info-name">
                  {{ item.userName }}
                </span>
                <span>助诊医生</span>
              </div>
              <div class="info-container">
                <div class="info-phone">
                  {{ item.userMobile }}
                </div>
                <div
                  v-if="item.userCallTime"
                  class="info-call-time"
                >
                  {{ pastUserCallTime }}前呼叫
                </div>
                <div
                  v-if="userCallKfStatus == 1"
                  class="info-calling"
                >
                  <img
                    :src="infocallImg"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="diagnoseTypeIcon == 'voice' && userTrtcEntryStatus == 2"
            class="call-status"
          >
            <img
              v-if="isCall"
              :src="isUserChat ? callouting : callout"
              alt=""
              @click="drivingCall(item.userId, 1)"
            >
          </div>
        </div>

        <div
          class="line-btn"
          @click="openAdvice"
        >
          诊断建议
          <div
            v-if="item.adviceStatus && item.adviceStatus == 2"
            class="line-btn-tap"
          >
            未写
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { teamDetail, callDirect, doctorAdviceList } from '@/api/diagnosis';
  import { createNamespacedHelpers } from 'vuex';
  const { mapState } = createNamespacedHelpers('main');
  export default {
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        infocallImg: require('@/assets/image/workbench/calling.png'),
        callout: require('@/assets/image/workbench/callout.png'),
        callouting: require('@/assets/image/workbench/callouting.png'),
        offline: require('@/assets/image/workbench/offline.png'),
        timer: null,
        isChat: false,
        isUserChat: false,
        isDoctorChat: false,
        isCall: false,
        accId: '',
      };
    },
    computed: {
      ...mapState({
        showChat: (state) => state.showChat,
        showAdvice: (state) => state.showAdvice,
      }),
      diagnoseType() {
        switch (this.item.diagnoseType) {
        case 1:
          return '语音问诊';
        case 2:
          return '视频问诊';
        case 3:
          return '图文问诊';
        default:
          return '';
        }
      },
      diagnoseTypeIcon() {
        switch (this.item.diagnoseType) {
        case 1:
          return 'voice';
        case 2:
          return 'voice';
        case 3:
          return 'photo';
        default:
          return 'photo';
        }
      },
      returnStatusText() {
        switch (this.item.returnStatus) {
        case 1:
          return '待处理';
        case 2:
          return '待问诊';
        case 3:
          return '问诊进行中';
        case 4:
          return '问诊已完成';
        case 5:
          return '已取消';
        default:
          return '暂无';
        }
      },
      appointBeginTime() {
        return new Date(this.item.appointBeginTime).format('yyyy-MM-dd hh:mm');
      },
      appointEndTime() {
        return new Date(this.item.appointEndTime).format('hh:mm');
      },
      userCallTime() {
        return new Date(this.item.userCallTime).format('hh:mm');
      },
      // 助诊呼叫状态
      userCallKfStatus() {
        return this.item.userCallKfStatus;
      },
      // 接诊呼叫状态
      doctorCallKfStatus() {
        return this.item.doctorCallKfStatus;
      },
      // 接诊 在线状态
      doctorTrtcEntryStatus() {
        return this.item.doctorTrtcEntryStatus;
      },
      // 助诊 在线状态
      userTrtcEntryStatus() {
        return this.item.userTrtcEntryStatus;
      },
      pastUserCallTime() {
        if (this.item.userCallTime) {
          return this.formatDateData(this.item.userCallTime);
        } else {
          return null;
        }
      },
      doctorCallTime() {
        return new Date(this.item.doctorCallTime).format('hh:mm');
      },
      pastDoctorCallTime() {
        if (this.item.doctorCallTime) {
          return this.formatDateData(this.item.doctorCallTime);
        } else {
          return null;
        }
      },
      nowtime() {
        return new Date().getTime() - this.item.appointBeginTime;
      },
    },
    watch: {
      item(newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal.doctorTrtcEntryStatus == 2) {
            this.isDoctorChat = false;
          }
          if (newVal.userTrtcEntryStatus == 2) {
            this.isUserChat = false;
          }
        }
      },
    },

    created() {},
    mounted() {
      console.log('this.item', this.item);
      if (this.item.returnStatus == 1 || this.item.returnStatus == 3) {
        const nowData = new Date().getTime();
        const timeleft = this.item.appointBeginTime - nowData;
        if (timeleft < 120000 && nowData < this.item.appointEndTime) {
          clearInterval(this.timer);
          this.down();
        } else {
          this.isCall = true;
        }
      }
    },

    methods: {
      formatDateData(time) {
        const now_data = new Date().getTime();
        const my_time = now_data - time;
        const hours = my_time / 1000 / 60 / 60;
        const hoursRound = Math.floor(hours);
        const minutes = my_time / 1000 / 60 - 60 * hoursRound;
        const minutesRound = Math.floor(minutes);
        const seconds = (
          my_time / 1000 -
          60 * 60 * hoursRound -
          60 * minutesRound
        ).toFixed(0);

        if (hoursRound > 0 && minutesRound > 0) {
          return hoursRound + '小时' + minutesRound + '分' + seconds + '秒';
        }
        if (hoursRound == 0 && minutesRound > 0) {
          return minutesRound + '分';
        }
        if (hoursRound == 0 && minutesRound == 0) {
          return seconds + '秒';
        }
      },
      down() {
        this.timer = setInterval(() => {
          const nowData = new Date().getTime();

          const timeleft = this.item.appointBeginTime - nowData;
          if (timeleft < 120000 && nowData < this.item.appointEndTime) {
            this.isCall = true;
            clearInterval(this.timer);
          }
        }, 1000);
      },
      getInfo(id) {
        return teamDetail({
          tid: this.item.imTeamId,
        })
          .then((res) => {
            if (res.code == '000000') {
              const { memberList } = res.data;
              console.log('---memberList', memberList);
              if (memberList) {
                const accId = memberList.filter((val) => {
                  return val.id == id;
                });
                return accId[0].accId;
              }
            }
          })
          .catch(() => {});
      },
      // 主动呼叫 roletype 1：助诊医生 2：接诊医生
      drivingCall(id, roletype) {
        if (roletype == 1 && this.isUserChat) {
          return false;
        }
        if (roletype == 2 && this.isDoctorChat) {
          return false;
        }
        this.getInfo(id).then((res) => {
          const params = {
            imAccId: res,
            imTeamId: this.item.imTeamId,
            liveRoomId: this.item.roomId,
          };
          callDirect(params).then((res) => {
            if (res.code === '000000') {
              if (roletype == 1) {
                this.isUserChat = true;
              } else {
                this.isDoctorChat = true;
              }
            } else {
              this.$message({
                message: res.message,
                type: 'warning',
              });
            }
          });
        });
      },
      openChat() {
        if (this.showChat) {
          this.$message({
            message: '不可同时进入多个诊室，请先退出已进入的诊室，再试。',
            type: 'warning',
            duration: 1000,
          });
          return false;
        }
        const i = this.item;
        this.$store.dispatch('main/gotoInquiry', i);
      },
      openAdvice() {
        if (this.showAdvice) {
          this.$message({
            message: '不可同时打开多个诊断建议，请先退出已打开的诊断建议，再试。',
            type: 'warning',
            duration: 1000,
          });
          return false;
        }
        // const i = 11;
        doctorAdviceList({
          diagnoseLogId: this.item.diagnoseLogId,
        })
          .then((res) => {
            if (res.code == '000000') {
              console.log(res.data);
              this.$store.commit('main/updateShowAdvice', true);
              this.$store.commit('main/updateCurrentAdvice', res.data);
            } else {
              this.$message({
                message: res.message,
                type: 'warning',
                duration: 1000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
</script>

<style lang="scss" scoped>
.inquiry-wrap {
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 20px 32px;
  background: #ffffff;
  border-radius: 18px;
  user-select: none;
  // min-width: 610px;
  border: 1px solid #cccccc;
  .line {
    display: flex;
    justify-content: space-between;
    .left {
      color: #02120f;
      font-size: 28px;
      .dep {
        font-size: 20px;
      }
    }
    .right {
      .right-status {
        color: #0d9078;
        font-size: 14px;
      }
      .right-time {
        margin-top: 5px;
        color: #6a7990;
        font-size: 12px;
      }
      .grey {
        color: #6a7990;
      }
      .org {
        color: #ff5e57;
      }
    }
    .inquiry-user-container {
      width: 49%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inquiry-user {
        width: calc(100% - 10px);
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 0 5px;
        .inquiry-user-l {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .inquiry-user-img {
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            width: 40px;
            height: 40px;
            .offline {
              position: absolute;
              left: -4px;
              top: -4px;
              z-index: 10;
            }
            .avatar {
              position: absolute;
              left: 0;
              top: 0;
              background: #dddddd;
              border-radius: 36px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
          .inquiry-user-info {
            font-size: 14px;
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .info-name-wrap {
              display: flex;
              align-items: center;
            }

            .info-name {
              display: inline-block;
              max-width: 85px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 18px;
              color: #02120f;
              font-weight: bold;
            }

            .info-container {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-direction: row;
              height: 25px;
              line-height: 25px;
              .info-phone {
                color: #6a7990;
                font-size: 16px;
              }
              .info-call-time {
                color: #ff5e57;
              }
              .info-calling {
                width: 15px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  width: 15px;
                  height: 15px;
                }
              }
            }
          }
        }

        .call-status {
          width: 45px;
          height: 46px;
          img {
            cursor: pointer;
            width: 45px;
            height: 46px;
          }
        }
      }
    }

    .line-btn {
      cursor: pointer;
      position: relative;
      width: 100%;
      height: 37px;
      background: rgba(68, 146, 132, 0.09);
      border-radius: 23px;
      border: 1px solid rgba(68, 146, 132, 0.31);
      text-align: center;
      line-height: 37px;
      color: #0d9078;
      font-size: 14px;
      font-weight: bold;
      .line-btn-tap {
        position: absolute;
        top: -10px;
        right: 20px;
        width: 48px;
        height: 20px;
        background: #0d9078;
        border-radius: 7px 7px 7px 0px;
        font-size: 14px;
        color: #ffffff;
        line-height: 20px;
      }
      span {
        font-weight: bold;
      }
    }
  }
  .tag-container {
    display: flex;
    justify-content: flex-start;
    .talk {
      margin-right: 5px;
      width: 120px;
      height: 24px;
      line-height: 24px;
      background: #f0f2f5;
      border-radius: 23px;
      font-size: 14px;
      color: #6a7990;
      display: flex;
      justify-content: center;
      align-items: center;
      .talk-icon {
        margin-right: 5px;
      }
    }
    .time {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 217px;
      height: 24px;
      line-height: 24px;
      background: #f0f2f5;
      border-radius: 23px;
      font-size: 14px;
      color: #6a7990;
    }
  }

  .mt30 {
    margin-top: 30px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .appointment {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url('../../assets/image/workbench/appointment.png') no-repeat;
    background-size: cover;
    margin-right: 5px;
  }
  .video {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url('../../assets/image/workbench/video.png') no-repeat;
    background-size: cover;
  }
  .photo {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url('../../assets/image/workbench/photo.png') no-repeat;
    background-size: cover;
  }
  .voice {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url('../../assets/image/workbench/voice.png') no-repeat;
    background-size: cover;
  }
}
</style>
