
<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item" label="回复人姓名" >
        <el-input v-model.trim="listQuery.taUserName" placeholder="回复人姓名" />
      </el-form-item>
      <el-form-item class="filter-item" label="被回复人姓名" >
        <el-input v-model.trim="listQuery.replyTaUserName" placeholder="被回复人姓名" />
      </el-form-item>

      <el-form-item class="filter-item" label="筛选" >
        <el-select v-model="listQuery.status" placeholder="请选择">
         <el-option label="回复我的" value="0"/>
         <el-option label="回复全部物业人员的" value="1"/>
         <el-option label="全部物业人员回复的" value="2"/>
         <el-option label="话题发起人回复的" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item class="filter-item" label="日期">
        <span >
        <span class="demonstration"></span>
        <el-date-picker
        v-model="listQuery.dataValue"
        type="date"
        placeholder="年-月-日">
        </el-date-picker>
      </span>
      </el-form-item>
      <el-form-item>
        <el-button type="info" class="filter-item" @click="handleFilter">清空</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="button">
      <el-button type="danger" @click="deleteReply">作废</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="transactionsList"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column prop="taUserName" label="回复人" align="center"/>
       <el-table-column prop="replyContent" label="回复内容" align="center"/>
      <el-table-column prop="transactionTitle" label="回复配图" align="center">
           <template slot-scope="scope">
             <img v-for="sr in scope.row.tdImagesLists" :src="sr" preview  width="50" height="50">
           </template>
      </el-table-column>
      <el-table-column prop="replyTaUserName" label="被回复人" align="center"/>
      <el-table-column prop="createDate" label="时间" align="center"><template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template></el-table-column>
      <el-table-column prop="viewCount" label="操作" align="center">
      <template slot-scope="scope"><a><span style="color: #63B8FF" @click="TransactionReplyOpen(scope.row.id)">{{ '回复此回复' }}</span></a></template>
      </el-table-column>  
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <el-dialog title="回复发帖人" :visible.sync="listQuery.dialogFormVisible" :show-close="listQuery.close">
      <el-form :model="listQuery">
        <el-form-item  :label-width="listQuery.formLabelWidth">
          <textarea v-model="listQuery.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>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        communityId: '',
				createDate: '',
				releaseIdentity: '',
				replyContent: '',
				replyTaUserId: '',
				replyTaUserName: '',
				taUserId: '1',
				taUserName: '',
				transactionId: '',
        pageNum: '1',
        pageSize: 10,
        dataValue: '',
        tatus: '',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        contentImg: [], 
        close: false  
      },
      contentImgList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      total: 0, // 数据总数
      transactionsList: [],
      deleteIds: [], // 选择的id集合
      listLoading: true // 加载圈
    }
  },
  mounted() {
    this.listQuery.transactionId = this.$route.query.id
    // 获取数据
    this.dataQuery()
  },
  methods: {
    ...mapActions('listAnnouncement', [
      'BserPassCertification'
    ]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    handlePictureCardPreview(file) { //配图文件列表中已上传的文件时的钩子
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) { //配图移除时
      this.listQuery.contentImg = []
      for (let i = 0; i < fileList.length; i++) {
        this.listQuery.contentImg.push(fileList[i].response.data[0])
      }
      console.log(file, fileList)
    },
    handleSuccessContentImg(response, file, fileList) { // 配图上传成功时回调
      const resImg = response.data[0]
      this.listQuery.contentImg.push(resImg)
    },
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('transaction/TransactionReplyList', this.listQuery).then((res) => {
        const resData = res.data
        this.transactionsList = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error TransactionsList')
      })
    },
    handleSelectionChange(data) {
      // 设置为 空
      this.deleteIds = []
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
    },
	  search() {
      this.listQuery.pageNum = 1
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.ownerName =''
      this.listQuery.status=''
      this.listQuery.taUserName=''
      this.listQuery.dataValue=''
      this.listQuery.dataValue=''
      this.listQuery.replyTaUserName=''
      this.dataQuery()
    },
    deleteReply(){
      const ids = this.deleteIds
      this.listLoading = true
      if(ids<1){
      this.$message.error('请选择一条数据')
        }
      this.$store.dispatch('transaction/DeleteReply', ids).then((res) => {
        this.listLoading = false
        this.dataQuery()
      }).catch(() => {
        this.listLoading = false
        console.log('error TransactionsDelete')
      })
    },

    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      return year + '-' + month + '-' + day
    },
    // 弹出层
    TransactionReplyOpen(id){
      this.listQuery.dialogFormVisible = true
      this.listQuery.id = id
    },
    // 取消
    TransactionReplyOff(){
       this.listQuery.replyContent = ''
       this.listQuery.dialogFormVisible = false
       this.contentImgList = []
       this.listQuery.contentImg = []
       this.dataQuery()
    },
    // 添加评论
    TransactionReplyAdd(){
       this.listQuery.dialogFormVisible = false
       console.log(this.listQuery.id,'this.listQuery.id')    
        this.$store.dispatch('transaction/TransactionReplyAdd', this.listQuery).then((res) => {
        this.listLoading = false
        this.contentImgList = []
        this.listQuery.contentImg = []
        this.listQuery.replyContent = ''
        this.dataQuery()
      }).catch(() => {
        this.listLoading = false
        console.log('error TransactionReplyAdd')
      })
    } 
  }
}
</script>

<style scoped>
.root{
  display: flex;
  flex-flow: column;
}
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.operation{
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.button {
  margin-left: 20px;
}
.textarea-inherit {
        width: 100%;
        overflow: auto;
        word-break: break-all; 
        margin-left: -11.5%;
    }
</style>

