<template>
  <div class="page">
    <div class="detail">
      <div class="detail-header">
        <p class="info-title">[{{ $dict.getLabel('leaveMessageType', detailInfo.type) }}] {{ detailInfo.title }}</p>
        <div class="info-item">
          <span class="label">留言编号：</span>
          <span class="value">{{ detailInfo.msgCode }}</span>
        </div>
        <div class="info-item">
          <span class="label">留言时间：</span>
          <span class="value">{{ detailInfo.createTime }}</span>
        </div>
        <!-- <div class="info-item">
          <span class="label">受理单位：</span>
          <span class="value">{{detailInfo.createTime}}</span>
        </div> -->
        <div class="info-item">
          <span class="label">处理状态：</span>
          <span class="value">{{ $dict.getLabel('leaveMessageStatus', detailInfo.status) }}</span>
        </div>
      </div>
      <div class="detail-content">
        <p class="info-content">{{ detailInfo.content }}</p>
        <div class="img-list" v-if="detailInfo.iamgeList.length">
          <img :src="item.url" alt="" v-for="(item,index) in detailInfo.iamgeList" :key="index"
               @click="previewdealListImage(index, detailInfo.iamgeList)">
        </div>
      </div>
      <div class="reply-content" v-if="appLeaveMessageReplyList.length">
        <div class="reply-title">
          <img src="https://cdn.cunwuyun.cn/img/dialogue.svg" alt="">沟通记录
        </div>
        <div class="reply-list">
          <div class="item" v-for="(item, index) in appLeaveMessageReplyList" :key="index">
            <div class="item-top">
              <div class="user-img-bg" v-if="item.createUnitName">{{ item.first }}</div>
              <img :src="item.headPortrait" alt="" class="user-img"
                   v-if="!item.createUnitName && item.createUserName && !item.openId">
              <img :src="avatarUrl" alt="" class="user-img" v-if="item.openId">

              <span class="item-title" v-if="item.createUnitName">{{ item.createUnitName }} 回复</span>
              <span class="item-title" v-if="!item.createUnitName && item.createUserName && !item.openId">{{
                  item.createUserName
                }} 回复</span>
              <span class="item-title" v-if="item.openId">我的 回复</span>

              <span class="item-time">{{ item.createTime }}</span>
            </div>
            <div class="item-content">
              <p>{{ item.content }}</p>
              <div class="img-list">
                <img :src="items.url" alt="" v-for="(items,indexs) in item.images" :key="indexs"
                     @click="previewdealListImage(indexs, item.images)">
              </div>
            </div>
          </div>
          <div class="no-more">------------ 没有更多回复了 ------------</div>
        </div>
      </div>
    </div>
    <div class="fixed-bottom confirm-btn" @click="toReply" v-if="detailInfo.status != 2">发表回复</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "my",
  computed: {
    ...mapState(['user', 'token'])
  },
  data() {
    return {
      id: '',
      detailInfo: {},
      appLeaveMessageReplyList: [],
      avatarUrl: ''
    }
  },
  onLoad(options) {
    this.id = options.id
    this.avatarUrl = this.user.avatarUrl
  },
  onShow() {
    this.$dict.load('leaveMessageType', 'leaveMessageStatus')
    this.getEventDetail()
  },
  methods: {
    getEventDetail() {
      this.$instance.post(`/app/appleavemessage/queryDetailById-wx?id=${this.id}`).then(res => {
        console.log(res)
        if (res.code == 0) {
          if (res.data) {
            res.data.iamgeList = JSON.parse(res.data.images)
            this.detailInfo = res.data;
            res.data.appLeaveMessageReplyList.map(item => {
              if (item.createUnitName) {
                item.first = item.createUnitName.substring(0, 1);
              }
              if (item.images) {
                item.images = JSON.parse(item.images);
              }
              return item
            })
            this.appLeaveMessageReplyList = res.data.appLeaveMessageReplyList;
          }
        }
      })
    },
    previewdealListImage(current, imgList) {
      var tempList = []
      for (var i in imgList) {
        tempList.push(imgList[i].url)
      }
      uni.previewImage({
        current: tempList[current],
        urls: tempList
      })
    },
    //回复
    toReply() {
      this.$linkTo(`./reply?code=${this.detailInfo.msgCode}`)
    }
  }
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  background-color: #f3f6f9;

  .detail {
    padding-bottom: 112px;

    .detail-header {
      width: 100%;
      background: #197DF0;
      padding: 24px 32px 16px 32px;
      box-sizing: border-box;
      color: #FFF;

      .info-title {
        font-weight: 500;
        line-height: 64px;
        word-break: break-all;
        font-size: 40px;
        margin-bottom: 16px;
      }

      .info-item {
        line-height: 40px;
        font-size: 28px;
        margin-bottom: 16px;

        .label {
          display: inline-block;
          text-align: justify;
          text-align-last: justify;
          width: 148px;
          vertical-align: top;
        }

        .value {
          display: inline-block;
          width: calc(100% - 148px);
        }
      }
    }

    .detail-content {
      background-color: #fff;
      padding: 32px 32px 032px;
      margin-bottom: 16px;

      .info-content {
        line-height: 56px;
        color: #666;
        font-size: 32px;
        padding-bottom: 32px;
      }

      .img-list {
        padding-bottom: 16px img {
          width: 218px;
          height: 218px;
          margin: 0 16px 16px 0;
        }

        img:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }

    .reply-content {
      background-color: #fff;
      padding: 032px;

      .reply-title {
        width: 100%;
        height: 112px;
        line-height: 112px;
        font-weight: 500;
        color: #333;
        font-size: 32px img {
          width: 48px;
          height: 48px;
          vertical-align: middle;
          margin-right: 8px;
        }
      }

      .reply-list {
        .item {
          margin-bottom: 32px;

          .item-top {
            margin-bottom: 16px;

            .user-img {
              width: 64px;
              height: 64px;
              border-radius: 50%;
              margin-right: 16px;
              vertical-align: middle;
            }

            .user-img-bg {
              display: inline-block;
              width: 64px;
              height: 64px;
              line-height: 64px;
              text-align: center;
              color: #fff;
              font-size: 28px;
              border-radius: 50%;
              margin-right: 16px;
              vertical-align: middle;
              background-color: #197DF0;
            }

            .item-title {
              display: inline-block;
              width: 342px;
              font-size: 28px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #197DF0;
              line-height: 40px;
            }

            .item-time {
              font-size: 28px;
              color: #999;
              line-height: 40px;
            }
          }

          .item-content {
            width: 606px;
            padding: 16px 16px 0;
            box-sizing: border-box;
            background: #F3F6F9;
            margin-left: 72px p {
              line-height: 40px;
              color: #333;
              font-size: 28px;
              word-break: break-all;
              padding-bottom: 16px;
            }

            .img-list {
              img {
                width: 132px;
                height: 132px;
                margin: 0 16px 16px 0;
              }

              img:nth-of-type(4n) {
                margin-right: 0;
              }
            }
          }
        }

        .no-more {
          padding: 64px 0;
          color: #999;
          font-size: 24px;
          text-align: center;
        }
      }
    }
  }
}
</style>
