<template>
  <div id="root">
    <el-form ref="form" label-width="100px" label-position="left">
      <el-form-item label="话题类型">
         <span v-if="ruleForm.type==='0'">{{'议事大厅'}}</span>
         <span v-if="ruleForm.type==='1'">{{'邻里互助'}}</span>
         <span v-if="ruleForm.type==='2'">{{'二手/租赁'}}</span>
         <span v-if="ruleForm.type==='3'">{{'其他话题'}}</span>
      </el-form-item>
      <el-form-item label="话题标题">
        <div class="activityContext">
          {{ ruleForm.transactionTitle }}
        </div>
      </el-form-item>  
      <el-form-item label="详情描述">
        <div class="activityContext">
          {{ ruleForm.transactionContent }}
        </div>
      </el-form-item>
      <el-form-item label="话题配图">
        <template v-for="site in ruleForm.img">
          <img :src="site" width="100" height="100" >
        </template>
      </el-form-item>
      <el-form-item label="权重值">
        <span>{{ ruleForm.sort }}</span>
      </el-form-item>
    </el-form>
    <div class="bom-button">
      <el-button v-if="isEdi" type="primary" style="width: 100px;" @click="edi">修改</el-button>
      <el-button v-if="isEdi" type="primary" style="width: 100px;" @click="replyAdd">回复帖子</el-button>
      <el-button v-if="isEdi" type="primary" style="width: 150px;" @click="replyList">查看全部{{ ruleForm.replySum }}条回复</el-button>
    </div>
    <el-dialog title="回复发帖人" :visible.sync="ruleForm.dialogFormVisible" :show-close="ruleForm.close">
      <el-form :model="ruleForm">
        <el-form-item  :label-width="ruleForm.formLabelWidth">
          <textarea v-model="ruleForm.replyContent" placeholder="回复TA" class="textarea-inherit" rows="8"></textarea> 
        </el-form-item>
        <el-form-item>
        <el-upload
          :limit="8"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccessContentImg"
          :file-list="contentImgList"
          name="uploadFiles"
          action="http://106.14.20.193:8086/property-api/uploadimage"
          list-type="picture-card">
          <i class="el-icon-plus"/>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img :src="dialogImageUrl" width="100%" alt="">
        </el-dialog>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="TransactionReplyOff">取 消</el-button>
        <el-button type="primary" @click="TransactionReplyAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      ruleForm: {
        communityId: '',
				createDate:'',
				createUser:'',
				id:'',
				isReported:'',
				status:'',
				taUserId:'',
				transactionContent:'',
				transactionTitle:'',
				type:'',
				updateDate:'',
				updateUser:'',
				userName:'',
        viewCount:'',
        contentImg: [], // 内容配图
        img: [], // 详情图
        sort: 1, // 权重
        dialogFormVisible: false,
        close: false,
        replyType: 1,
        replySum: '' 
      },
      dialogVisible: false,
      dialogImageUrl: '',
      contentImgList: [],
      isEdi: true // 默认显示修改按钮
    }
  },
  mounted() {
    this.ruleForm.id = this.$route.query.id
    this.getById()
  },
  methods: {
    getById() { // 根据ID获取活动信息
      this.$store.dispatch('transaction/TransactionById', this.ruleForm.id).then((res) => {
        this.ruleForm.transactionTitle = res.data.tpTransaction.transactionTitle
         this.ruleForm.type = res.data.tpTransaction.type
         this.ruleForm.transactionContent = res.data.tpTransaction.transactionContent
         this.ruleForm.replySum = res.data.tpTransaction.replySum
         this.ruleForm.sort = res.data.tpTransaction.sort
        //  this.contentImgList = res.data.list
         console.log(' res.data.tpTransaction.list', res.data.list)

         // 多张图片进行遍历
        for (let i = 0; i < res.data.list.length; i++) {
          this.ruleForm.img.push(res.data.list[i])
        }
      
      })
    },
    handlePictureCardPreview(file) { //配图文件列表中已上传的文件时的钩子
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) { //配图移除时
      this.ruleForm.contentImg = []
      for (let i = 0; i < fileList.length; i++) {
        this.ruleForm.contentImg.push(fileList[i].response.data[0])
      }
      console.log(file, fileList)
    },
    handleSuccessContentImg(response, file, fileList) { // 配图上传成功时回调
      const resImg = response.data[0]
      this.ruleForm.contentImg.push(resImg)
    },
    formatDate(val) {
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    edi() { 
      this.$router.push({ name: 'transaction-edit', query: { id: this.ruleForm.id }})
    },
    // 查看此帖子的所有回复
    replyList(){
      if(this.ruleForm.replySum == '0'){
        return
      }
      this.$router.push({ name: 'transactionreply-index', query: { id: this.ruleForm.id }})
    },
    // 弹出层
    replyAdd(){
    this.ruleForm.dialogFormVisible = true
    },
    // 取消层显示
    TransactionReplyOff(){
       this.ruleForm.dialogFormVisible = false
       this.contentImgList = []
       this.ruleForm.contentImg = []
    },
    // 回复帖子
    TransactionReplyAdd(){
       this.ruleForm.dialogFormVisible = false
       console.log(this.ruleForm.id,'this.ruleForm.id')    
        this.$store.dispatch('transaction/TransactionReplyAdd', this.ruleForm).then((res) => {
        this.listLoading = false
        // this.contentImgList = []
        // this.ruleForm.contentImg = []
        // this.ruleForm.replyContent = ''
         this.$router.push({ name: 'transactionreply-index', query: { id:  this.ruleForm.id }})
      }).catch(() => {
        this.listLoading = false
        console.log('error TransactionReplyAdd')
      })
    } 
  }
}
</script>

<style scoped>
#root {
  display: flex;
  flex-flow: column;
  width: 500px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}
.activityTile{
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}
.activityContext{
  /*margin-top: 20px;*/
  margin-bottom: 20px;
  font-size: 20px;
  justify-items: center;
}
.inner-layer {
  background-color: aquamarine;
  height: 6px;
  width: 100px;
  position: relative;
  margin-top: -4px;
}
.bom-button{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 100px;
  margin-left:-25%
}
.textarea-inherit {
        width: 100%;
        overflow: auto;
        word-break: break-all; 
    }
</style>
