<template>
  <div class="snapshot-detail">
    <div class="info">
      <div class="info-item">
        <text>上报人：</text>
        <text>{{ detail.nickName }}</text>
      </div>
      <div class="info-item">
        <text>联系电话：</text>
        <text>{{ detail.phone }}</text>
      </div>
      <div class="info-item">
        <text>上报时间：</text>
        <text>{{ detail.createTime }}</text>
      </div>
      <div class="info-item">
        <text>处理状态：</text>
        <text>{{ $dict.getLabel('reportAtWillHandleStatus', detail.status) }}</text>
      </div>
    </div>
    <div class="body">
      <u-row class="location" justify="space-between">
        <text>{{ detail.address }}</text>
        <u-icon :name="$cdn + 'Location2@2x.png'" :custom-style="{width:'24px',height:'24px'}"></u-icon>
      </u-row>
      <u-row justify="space-between" class="type" v-if="detail.reportType">
        <text>上报类型</text>
        <text>{{ $dict.getLabel('integralDetailType', detail.reportType) }}</text>
      </u-row>
      <text class="title">事件描述</text>
      <div class="content">{{ detail.explain }}</div>
      <div class="photos">
        <img :src="item.url" alt="" v-for="(item,index) in detail.files" :key="index"
             @click.stop="previewImage(detail.files,index)">
      </div>
      <template v-if="detail.handleResult">
        <u-row justify="space-between" class="result">
          <text class="title">处理结果</text>
          <text>{{ detail.integral|formt }}</text>
        </u-row>
        <div class="content">{{ detail.handleResult }}</div>
        <div class="photos">
          <img :src="item.url" alt="" v-for="(item,index) in detail.handleFiles" :key="index"
               @click.stop="previewImage(detail.handleFiles,index)">
        </div>
        <u-row justify="space-between" class="type">
          <div shrink>事件类型</div>
          <text>{{ detail.ruleName }}</text>
        </u-row>
        <u-row justify="space-between" class="type">
          <text>处理人</text>
          <text class="nonmal">{{ detail.handleUserName }}</text>
        </u-row>
        <!--        <u-row justify="space-between" class="type">-->
        <!--          <text>联系电话</text>-->
        <!--          <text class="nonmal">18707170017</text>-->
        <!--        </u-row>-->
        <u-row justify="space-between" class="type">
          <text>处理时间</text>
          <text class="nonmal">{{ detail.handleTime }}</text>
        </u-row>
      </template>

    </div>
    <div bottom v-if="!detail.handleResult">
      <u-button type="primary" v-if="!detail.handleResult" @click="handle">去处理</u-button>
    </div>
    <back></back>
  </div>
</template>

<script>
import Back from "../../components/AiBack";

export default {
  name: "snapshotDetail",
  components: {Back},
  onLoad(opt) {
    if (opt.id) {
      this.id = opt.id
    }
  },

  onShow() {
    this.$dict.load('reportAtWillHandleStatus', 'integralDetailType').then(() => {
      this.getDetail()
    })
  },

  data() {
    return {
      detail: {},
      id: null,
    }
  },
  methods: {
    previewImage(data, index) {
      uni.previewImage({
        urls: data.map(e => e.url),
        current: data[index].url
      })
    },
    handle() {
      uni.navigateTo({
        url: `/pages/snapshot/handleResult?id=${this.id}&reportType=${this.detail.reportType}`
      })
    },
    getDetail() {
      this.$http.post(`/app/appreportatwillinfo/queryDetailById`, null, {
        params: {
          id: this.id
        }
      }).then(res => {
        if (res.code == 0) {
          this.detail = res.data
        }
      })
    }
  },

  filters: {
    formt(val) {
      return +val > 0 ? `+${val}` : val
    }
  }
}
</script>

<style lang="scss" scoped>
.snapshot-detail {
  min-height: 100%;
  background-color: #F3F6F9;
  padding-bottom: 160px;

  .info {
    height: 384px;
    background-color: #3975C6;
    box-sizing: border-box;
    padding: 32px;

    .info-item {
      font-size: 28px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 40px;
      margin-bottom: 16px;
    }
  }

  .body {
    width: 686px;
    margin: 0 auto;
    margin-top: -96px;
    background: #FFFFFF;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 34px 32px;

    .location {
      & > text {
        font-size: 32px;
        font-weight: 800;
        color: #333333;
        line-height: 44px;
      }
    }

    .type {
      font-size: 32px;
      margin: 68px 0;

      & > text:nth-child(1) {
        color: #666666;
      }

      & > text:nth-child(2) {
        color: #135AB8;
      }

      .nonmal {
        color: #333333 !important;
      }
    }

    .title {
      font-size: 32px;
      color: #666666;
    }

    .content {
      margin-top: 10px;
      font-size: 32px;
      color: #333333;
      line-height: 44px;
      word-break: break-all;
    }

    .photos {
      display: flex;
      flex-wrap: wrap;
      margin: 30px 0;

      & > img {
        width: 196px;
        height: 196px;
        margin: 0 14px 14px 0;
        flex-shrink: 0;

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    .result {
      margin-top: 48px;

      & > text:nth-child(2) {
        font-size: 34px;
        font-weight: 600;
        color: #E6736E;
      }
    }
  }
}
</style>
