<template>
  <view class="m-content">
    <view class="m-card">
      <view class="m-card-header">
        <view class="m-card-header-title">{{ type == "1" ? '投诉' : '建议' }}信息</view>
      </view>
      <view class="n-card-body">
        <view class="m-card-item">
          <view class="m-card-item-label">对象:</view>
          <view class="m-card-item-value">{{ complaintInfo.ctype || '-' }}</view>
        </view>
        <view class="m-card-item">
          <view class="m-card-item-label">原因:</view>
          <view class="m-card-item-value">{{ complaintInfo.creason || '-' }}</view>
        </view>
        <view class="m-card-item">
          <view class="m-card-item-label">证据:</view>
          <view class="m-card-item-value">
            <image v-for="(items, indexs) in complaintInfo.cimages" :src="imgUrl + items" class="sug_img"
              mode="aspectFill"></image>
          </view>
        </view>
        <view class="m-card-item">
          <view class="m-card-item-label">位置:</view>
          <view class="m-card-item-value">{{ complaintInfo.address || '-' }}</view>
        </view>
      </view>
    </view>
    <view class="m-card" v-if="complaintInfo.complaintReplyDO">
      <view class="m-card-header">
        <view class="m-card-header-title">回复信息</view>
      </view>
      <view class="n-card-body">
        <view class="m-card-item flex-column">
          <view class="m-card-item-label">回复内容:</view>
          <view class="m-card-item-value">
            <u-parse :content="complaintInfo.complaintReplyDO.content || '暂无信息'" />
          </view>
        </view>
        <view class="m-card-item">
          <view class="m-card-item-label">回复图集:</view>
          <view class="m-card-item-value">
            <image v-for="(items, indexs) in complaintInfo.complaintReplyDO.images" :src="items" class="sug_img"
              mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uParse from "../components/gaoyia-parse/parse.vue";
export default ({
  components: {
    uParse,
  },
  data() {
    return {
      type: "1",
      imgUrl: this.$config.ROOTPATH,
      complaintInfo: null,
    }
  },
  computed: {},
  methods: {
    getComplaintinfo(val) {
      var data = {
        id: val
      }
      this.$Request.get(this.$config.getComplaintinfo, data, null, null, false, false).then(res => {
        console.log(res)
        if (res.data.cimages != null && res.data.cimages != undefined) {
          if (res.data.cimages.includes(',')) {
            res.data.cimages = res.data.cimages.split(',')

          } else {
            res.data.cimages = [res.data.cimages]

          }
        }
        if (res.data.complaintReplyDO && res.data.complaintReplyDO.images) {
          if (res.data.complaintReplyDO.images.includes(',')) {
            res.data.complaintReplyDO.images = res.data.complaintReplyDO.images.split(',')

          } else {
            res.data.complaintReplyDO.images = [res.data.complaintReplyDO.images]

          }
        }
        this.complaintInfo = res.data
      })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    if (options) {
      console.log(options)
      this.type = options.type
      this.getComplaintinfo(options.id)
    }
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
    uni.setNavigationBarTitle({
      title: this.type == "1" ? '投诉详情' : '建议详情'
    });
  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}) 
</script>

<style scoped lang="scss">
.m-content {
  padding-bottom: 150rpx;

  .m-card {
    margin: 20rpx;
    padding: 20rpx 30rpx;
    border: solid 1rpx #dcedff;
    box-shadow: 0 0 10px 1px #dcedff;
    border-radius: 20rpx;
    background-color: #fff;

    .m-card-header {

      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      border-bottom: solid 1rpx #eee;
      padding-bottom: 20rpx;

      .m-card-header-title {
        font-size: 35rpx;
        color: #363636;
      }
    }

    .n-card-body {
      display: flex;
      flex-direction: column;

      .m-card-item {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 30rpx;

        .m-card-item-label {
          flex: none;
          margin-right: 10rpx;
        }

        .m-card-item-value {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-wrap: wrap;
        }
      }

      .flex-column{
        flex-direction: column;
        .m-card-item-label{
          margin-bottom: 20rpx;
        }
      }
    }

  }
}

image {
  width: 200rpx;
  height: 200rpx;
}
</style>