<template>
    <div class="project-handle">
        <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
            <div class="project-detail">
                <div class="project-detail-tip">话题详情</div>
                <el-form label-position="right" label-width="120px">
                    <el-form-item label="话题内容:" prop="eventContent">
                        <div>{{dataForm.topicContent}}</div>
                        <el-image v-for="url in dataForm.images"
                                  style="width: 100px; height: 100px; margin-right: 10px"
                                  :key="url"
                                  :src="url"
                                  :preview-src-list="previewImgList"
                                  @click="clickImg(url)">
                        </el-image>
                    </el-form-item>
                    <el-form-item label="所属网格:" prop="allDeptNames">
                        <div>{{dataForm.allDeptNames}}</div>
                    </el-form-item>
                    <el-form-item label="话题来源:" prop="groupName">
                        <div>{{dataForm.groupName}}</div>
                    </el-form-item>
                    <el-form-item label="发言人:" prop="nickName">
                        <div>{{dataForm.nickname}}</div>
                    </el-form-item>
                    <el-form-item label="评论:">
                      <el-button type="primary" @click="innerVisible = true">点击查看评论</el-button>
                    </el-form-item>
                </el-form>
                <div class="container">
                    <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.topicAddress}}</div>
                    <div id="map"></div>
                </div>
            </div>
            <div style="width: 100%; text-align:center; float:left;">
                <el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
            </div>
        </el-form>
        <el-dialog width="90%" title="评论" :visible.sync="innerVisible" append-to-body>
          <el-table :data="commentsDTOs" border style="width: 100%;">
              <el-table-column prop="user.userName" label="发言人" header-align="center" align="center"></el-table-column>
              <el-table-column prop="commentTime" label="发言时间" header-align="center" align="center"></el-table-column>
              <el-table-column prop="content" label="发言内容" header-align="center" align="center"></el-table-column>
              <el-table-column prop="replyComment.userName" label="被回复人" header-align="center" align="center"></el-table-column>
              <el-table-column prop="replyComment.content" label="被回复内容" header-align="center" align="center"></el-table-column>
              <el-table-column :label="$t('handle')" header-align="center" align="center" width="150" v-if="false">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.shieldFlag === '0'" type="button" size="small" @click="deleteComment(scope.row.commentId)">屏蔽</el-button>
                  <el-button v-if="scope.row.shieldFlag === '1'" type="text" size="small">已屏蔽</el-button>
                </template>
              </el-table-column>
          </el-table>
          <el-pagination
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="limitVal"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChangeHandleNew"
            @current-change="pageCurrentChangeHandleNew">
          </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
export default {
  data () {
    return {
      innerVisible: false,
      dataForm: {
        id: ''
      },
      previewImgList: [],
      order: '',
      orderField: '',
      pageIndex: 1,
      limitVal: 10,
      total: 0,
      commentsDTOs: []
    }
  },
  mounted () {
    this.dataForm.id = this.$route.query.id
    this.init()
  },
  methods: {
    back () {
      this.$parent.init()
    },
    initBmap (latitude, longitude) {
      this.map = new BMap.Map('map')
      const point = new BMap.Point(longitude, latitude)
      var marker = new BMap.Marker(point)
      this.map.addOverlay(marker)
      this.map.centerAndZoom(point, 13)
      this.map.enableScrollWheelZoom(true)
    },
    clickImg (url) {
      this.previewImgList = []
      this.previewImgList.push(url)
    },
    init () {
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
          this.getCommentList()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/group/topic/detail/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        this.initBmap(this.dataForm.topicLatitude, this.dataForm.topicLongitude)
      }).catch(() => {})
    },
    pageSizeChangeHandleNew (val) {
      this.pageIndex = 1
      this.limitVal = val
      this.getCommentList()
    },
    pageCurrentChangeHandleNew (val) {
      this.pageIndex = val
      this.getCommentList()
    },
    getCommentList () {
      this.$http.get('/group/topiccomment/comments', { params: { id: this.dataForm.id, order: this.order, orderField: this.orderField, page: this.pageIndex, limit: this.limitVal }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.commentsDTOs = []
          this.total = 0
          return this.$message.error(res.msg)
        }
        this.commentsDTOs = res.data.list
        this.total = res.data.total
      }).catch(() => {})
    },
    deleteComment (val) {
      this.$http['post'](
        '/group/topiccomment/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getCommentList()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss">
    .project-handle {
        .el-timeline {
            padding-left: 9px;
            font-size: 13px;
        }
    }
    .el-form-item__label {
        font-weight: bold;
    }
</style>

<style lang="scss" scoped>
    .project-handle {
        width: 100%;
        height: calc(100vh - 120px);
        background: #ffffff;
        box-sizing: border-box;
        padding: 10px;
        .project-detail {
          width: 100%;
          height: 80%;
          border: 2px solid #ccc;
          box-sizing: border-box;
          padding: 10px;
          padding-top: 20px;
          float:left;
          margin-bottom: 1%;
          position:relative;
          .project-detail-tip {
            position: absolute;
            top: 0;
            left:0;
            width: 80px;
            height: 30px;
            line-height: 30px;
            color: #ffffff;
            background: #4ac38b;
            text-align:center;
          }
            .el-form {
                width: 58%;
                height: 100%;
                float:left;
                overflow-y:auto;
                &::-webkit-scrollbar {
                    width: 5px;
                    height: 1px;
                }
                &::-webkit-scrollbar-thumb {
                    border-radius: 5px;
                    background: #fff;
                }
                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                    background: #fff;
                }
            }
            .container {
                width: 40%;
                height: 100%;
                float: right;
                .location {
                    height: 30px;
                    line-height: 30px;
                }
                #map {
                    width: 100%;
                    height: calc(100% - 30px);
                }
            }
        }
        .project-progress {
            width: 20%;
            height: 100%;
            float: right;
            border: 2px solid #ccc;
            box-sizing: border-box;
            margin-left: 1%;
            padding-top: 20px;
            overflow-y:auto;
            &::-webkit-scrollbar {
                width: 5px;
                height: 1px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: #aaa;
            }
            &::-webkit-scrollbar-track {
                border-radius: 10px;
                background: #ccc;
            }
        }
        .handle-operation {
            width: 79%;
            height: 49%;
            box-sizing: border-box;
            border: 2px solid #ccc;
            float:left;
        }
    }
</style>
