<template>
  <div class="DetailGetway" v-if="pageShow">
    <div class="detail-header">
      <h2>{{ info.name }}的返乡登记信息</h2>
      <div class="item-info">
        <div class="item-info__item">
          <image src="/static/img/from-icon.png"/>
          <span>{{ info.startAreaName }}</span>
        </div>
        <div class="item-info__item">
          <image src="/static/img/to-icon.png"/>
          <span>{{ info.arriveAreaName }}</span>
        </div>
        <div class="item-info__item">
          <image src="/static/img/to-date.png"/>
          <span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }} 到达</span>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>基本信息</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>姓名</label>
        </div>
        <div class="right">
          <span>{{ info.name }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>身份证号</label>
        </div>
        <div class="right">
          <span>{{ info.idNumber }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>手机号码</label>
        </div>
        <div class="right" @click="call(info.phone)" hover-class="text-hover">
          <image src="https://cdn.cunwuyun.cn/dvcp/h5/common/phone.png"/>
          <span style="color: #4181FF">{{ info.phone }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>人员类别</label>
        </div>
        <div class="right">
          <span :style="{color: /[03]/.test(info.type) ? '#42D784' : '#FF4466'}">{{
              $dict.getLabel('epidemicMemberType', info.type)
            }}</span>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>行程信息</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>出行方式</label>
        </div>
        <div class="right">
          <span>{{ $dict.getLabel('epidemicRecentTravel', info.travelType) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>出发时间</label>
        </div>
        <div class="right">
          <span>{{ info.startTime && info.startTime.substr(0, info.startTime.length - 3) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>出发地区</label>
        </div>
        <div class="right">
          <span :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{ info.startAreaName }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>出发地址</label>
        </div>
        <div class="right">
          <span>{{ info.startAddress }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>到达时间</label>
        </div>
        <div class="right">
          <span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>返乡地区</label>
        </div>
        <div class="right">
          <span>{{ info.arriveAreaName }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>返乡地址</label>
        </div>
        <div class="right">
          <span>{{ info.arriveAddress }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>行程描述</label>
        </div>
        <div class="right">
          <span>{{ info.description }}</span>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>核酸检测信息</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>核酸检测日期</label>
        </div>
        <div class="right">
          <span>{{ info.checkTime.split(' ')[0] }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>核酸检测结果</label>
        </div>
        <div class="right">
          <span :style="{color: info.checkResult === '0' ? '#42D784' : '#FF4466'}">{{
              $dict.getLabel('epidemicRecentTestResult', info.checkResult)
            }}</span>
        </div>
      </div>
      <div class="detail-info__item detail-info__item--img">
        <div class="left" style="max-width: 100%;">
          <label>本人健康码截图或核酸检测报告</label>
        </div>
        <div class="right">
          <image :src="item.url" @click="preview(item.url)" v-for="(item, index) in info.checkPhoto" :key="index"/>
        </div>
      </div>
    </div>
    <div class="detail-info">
      <h2>健康状况</h2>
      <div class="detail-info__item">
        <div class="left">
          <label>当前体温</label>
        </div>
        <div class="right">
          <span :style="{color: info.temperature >= 37.3 ? '#FF4466' : '#42D784'}">{{ info.temperature }}℃</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>14天内是否接触新冠确诊或疑似患者</label>
        </div>
        <div class="right">
          <span :style="{color: info.touchInFourteen === '0' ? '#42D784' : '#FF4466'}">{{
              $dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)
            }}</span>
        </div>
      </div>
      <div class="detail-info__item">
        <div class="left">
          <label>当前健康状况</label>
        </div>
        <div class="right">
          <span :style="{color: !info.isHealth ? '#42D784' : '#FF4466'}">{{ info.healthName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  appName: "卡口登记详情",
  data() {
    return {
      info: {},
      pageShow: false
    }
  },

  onLoad(query) {
    this.$loading()
    this.$dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
      this.getInfo(query.id)
    })
  },

  methods: {
    preview(url) {
      uni.previewImage({
        urls: this.info.checkPhoto.map(v => v.url),
        current: url
      })
    },

    getInfo(id) {
      this.$instance.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.info.checkPhoto = JSON.parse(res.data.checkPhoto)
          let healthName = ''
          this.info.isHealth = false
          res.data.health.split(',').forEach(v => {
            if (v > 0) {
              this.info.isHealth = true
            }
            healthName = healthName + this.$dict.getLabel('epidemicRecentHealth', v)
          })
          this.info.healthName = healthName

          this.$nextTick(() => {
            this.pageShow = true
          })
        }

        this.$hideLoading()
      })
    },

    call(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    }
  }
}
</script>

<style lang="scss">
.DetailGetway {
  padding-bottom: 40px;

  .detail-header {
    padding: 32px;
    background: #fff;

    h2 {
      margin-bottom: 32px;
      color: #333333;
      font-size: 40px;
      font-weight: 600;
    }

    .item-info {
      .item-info__item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        image {
          width: 32px;
          height: 32px;
          margin-right: 16px;
        }

        span {
          color: #333;
          font-size: 28px;
        }
      }
    }
  }

  .detail-info {
    margin-top: 24px;
    padding: 0 32px;
    background: #fff;

    & > h2 {
      height: 116px;
      line-height: 116px;
      font-size: 38px;
      font-weight: 600;
      color: #333;
    }

    .detail-info__item {
      display: flex;
      justify-content: space-between;
      padding: 34px 0;
      border-bottom: 1px solid #DDDDDD;

      &:last-child {
        border: none;
      }

      .left {
        display: flex;
        line-height: 1.3;
        max-width: 360px;

        label {
          position: relative;
          color: #999999;
          font-size: 32px;
        }
      }

      .right {
        display: flex;
        max-width: 450px;

        span {
          color: #333333;
          font-size: 32px;
          text-align: right;
        }

        image {
          width: 40px;
          height: 40px;
        }
      }
    }

    .detail-info__item--img {
      display: block;

      .right {
        flex-wrap: wrap;
        max-width: 100%;
        margin-top: 34px;

        image {
          width: 226px;
          height: 226px;
          margin: 0 9px 9px 0;

          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
