<template>
	<div class="complaints">
		<block v-if="complaintsMsg.SUGGESTION_CREATEDATE">

			<p class="content-date">
				{{complaintsMsg.SUGGESTION_CREATEDATE}}
			</p>
			<div class="complaints-content" >
				<span class="fwq">{{complaintsMsg.SERVERPART_NAME}}</span>
				<span class="ry">{{complaintsMsg.SUGGESTION_NAME}}</span>
				<span class="dh">{{complaintsMsg.PHONE_NUMBER}}</span>
			
			</div>
			<p class="centent-reason">{{complaintsMsg.SUGGESTION_REASON}} </p>

			<div class="centent-images" v-if="complaintsMsg.ImgList">
				<div class="centent-image" v-for="(image,i) in complaintsMsg.ImgList" :key="image.IMAGE_ID" @click="seePhone(complaintsMsg.ImgList,i)">
					<image mode="aspectFit" :src="image.IMAGE_URL" ></image>
				</div>
			</div>
		</block>
		<!-- <div>
			<p>处理意见</p>
			<div></div>
		</div> -->

	
	</div>
</template>

<script>
import noData from '@/components/noData.vue'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      loadingType: 1,
      complaintsMsg: {},
      pageMsg: {
        id: ''

      }
    }
  },
  components: {
    noData
  },
  computed: {
    ...mapGetters(['user', 'serverPart'])
  },
  methods: {
    seePhone (item, i) {
      let urls = []
      item.map(n => { urls.push(n.IMAGE_URL) })
      mpvue.previewImage({
        current: urls[i], // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      })
    },
    getMsg () {
      let _this = this

      _this.$api.postCoop({
        action_type: 'GetSuggestionDetail',
        suggestionId: _this.pageMsg.id

      }).then(function (res) {
        _this.complaintsMsg = res.Data

        res.Data.List.map(v => {
          if (v.SUGGESTION_STATE === 1000) {
            v.SUGGESTION_STATE = '待处理'
          } else if (v.SUGGESTION_STATE === 2000) {
            v.SUGGESTION_STATE = '待反馈'
          } else if (v.SUGGESTION_STATE === 3000) {
            v.SUGGESTION_STATE = '已处理'
          }
          v.date = _this.$utils.cutDate(new Date(v.SUGGESTION_CREATEDATE), 'YYYY-MM-DD hh:mm:ss')
        })

        _this.loadingType = 0
      })
    }
  },
  onUnload () {
    this.pageMsg.id = ''
    this.complaintsMsg = {}
  },
  onLoad (option) {
    this.loadingType = 1 // 正在在加载
    this.pageMsg.id = option.id
    this.getMsg()
  }
}
</script>

<style lang="stylus" scoped>
.complaints
	background #fff
	padding 32rpx
	height 100%
.content-date
	color #666
	font-size 26rpx
.complaints-content
	margin-top 16rpx
	display flex
	align-items center
	justify-content space-between
	padding-right 180rpx
	color #666
	font-size 24rpx
.fwq
	font-size 22rpx
	border-radius 30rpx
	height 40rpx
	line-height 40rpx
	padding 0 16rpx
	border 1rpx solid #ededed
.ry,
.dh
	display flex
	align-items center
.ry:before
	content ''
	background #fff url("https://eshangtech.com/ShopICO/icos/tsjy_ry2.png") no-repeat center
	background-size contain
	height 24rpx
	width 21rpx
	margin-right 4rpx
.dh:before
	content ''
	background #fff url("https://eshangtech.com/ShopICO/icos/tsjy_dh.png") no-repeat center
	background-size contain
	height 24rpx
	width 17rpx
	margin-right 4rpx

.centent-reason
	padding 32rpx 0
	line-height 1.5
	font-size 32rpx
.centent-images
	white-space nowrap
	overflow auto
	padding-bottom 32rpx
	width 100%
.centent-image
	display inline-block
	vertical-align middle
	width 332rpx
	height 238rpx
	text-align center
.centent-image + .centent-image
	margin-left 16rpx
.centent-image image
	background-color #eee
	width 332rpx
	height 238rpx
	border-radius 8rpx

</style>
