<template>
<div>
<el-form :inline="true" :model="listQuery" :rules="rules" style="margin-top:25px;margin-left:2%">
  <el-form-item label="反馈内容">
    <el-input v-model="listQuery.content" placeholder="反馈内容"></el-input>
  </el-form-item>
  <el-form-item label="用户手机号">
    <el-input v-model.trim="listQuery.tel" placeholder="用户手机号" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
  </el-form-item>
 <el-form-item label="处理状态">
    <el-select v-model="listQuery.handleStatus" placeholder="选择类型">
        <el-option label="选择状态" value="" />
        <el-option label="未处理" value="2"/>
        <el-option label="正在处理" value="3"/>
        <el-option label="已处理" value="1"/>
    </el-select>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="info" @click="empty">清空</el-button>
  </el-form-item>

</el-form>
  <el-row>
  <el-button type="primary" plain style="margin-top:25px;margin-left:2%" @click="TransactionReplyOpen">处理</el-button>
  </el-row>
<div style="margin-top:25px;">
  <el-table
    v-loading="listLoading"
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
     prop="content"
      label="反馈内容">
      <template slot-scope="scope">
      <a :title="scope.row.content" v-if="scope.row.content !=null">
          <span style="color: #8B8378	">
            {{ scope.row.content.length>='20'?scope.row.content.substring(0,20)+'..':scope.row.content }}
          </span>
          <span v-if="scope.row.content==='null'">
            {{ scope.row.content='' }}
          </span>
      </a>
      </template>
    </el-table-column>
    <el-table-column prop="transactionTitle" label="反馈截图" align="center">
           <template slot-scope="scope">
             <img v-for="img in scope.row.taFeedbackImgLsit" :src="img" preview  width="50" height="50">
           </template>
    </el-table-column>
    <el-table-column
      prop="taUserTel"
      label="用户手机号">
    </el-table-column>
    <el-table-column
      prop="estateSource"
      label="来源房产">
    </el-table-column>
    <el-table-column
      prop="updateDate"
      label="反馈时间">
      <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
    </el-table-column>
    <el-table-column
      prop="handleStatus"
      label="处理状态">
      <template slot-scope="scope">
          <span v-if="scope.row.handleStatus ==1">已处理</span>
          <span v-if="scope.row.handleStatus ==2">未处理</span>
          <span v-if="scope.row.handleStatus ==3">正在处理</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="handleRemark"
      label="处理备注">
       <template slot-scope="scope">
      <a :title="scope.row.handleRemark" v-if="scope.row.handleRemark !=null">
          <span style="color: #8B8378	">
            {{ scope.row.handleRemark.length>='20'?scope.row.handleRemark.substring(0,20)+'..':scope.row.handleRemark }}
          </span>
          <!-- <span v-if="scope.row.handleRemark==='null'">
            {{ scope.row.handleRemark='' }}
          </span> -->
      </a>
       </template>
    </el-table-column>
    <el-table-column
      prop="handleUser"
      label="处理人">
    </el-table-column>
     <el-table-column
      prop="handleTime"
      label="处理时间">
      <template slot-scope="scope">{{ formatDate(scope.row.handleTime) }}</template>
    </el-table-column>
  </el-table>
  <div class="footer-page">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 40, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
</div>
<el-dialog title="处理反馈" :visible.sync="listQuery.dialogFormVisible" :show-close="listQuery.close" :rules="rules">
      <el-form :model="listQuery" >
        <el-form-item label="处理状态 *" style="margin-top:25px;margin-left:16.2%" prop="name">
          <el-select v-model="listQuery.handleStatus"  placeholder="选择类型">
            <el-option label="未处理" value="2"/>
            <el-option label="正在处理" value="3"/>
            <el-option label="已处理" value="1"/>
         </el-select>
        </el-form-item>
        <el-form-item label="处理备注 *"   prop="name" style="margin-left:16.2%">
          <textarea v-model="listQuery.handleRemark" style="width:70%"   rows="8"></textarea> 
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="TransactionReplyOff">取 消</el-button>
        <el-button type="primary" @click="feedbackupdate()">确 定</el-button>
      </div>
    </el-dialog>
</div>
</template>

<style>

</style>

<script>
  export default {
    data() {
      return {
        listQuery: {
          dialogFormVisible: false,  
          id: '',  
          content: '',
          handleStatus: '',
          tel: '',
          handleRemark: '',
          pageNum: 1,
          pageSize: 10,
          allId: [],
          close: false
        },
        total: 0, // 总数
        tableData: [],
        selectId: [], // 表格选择框
        listLoading: false, // 表格加载框
        rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, required: true, message: '请输入11位手机号', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      }
      }
    },
    mounted() {
    this.getFeedback()
  },
    methods: {
    getFeedback() { // 查询Role列表
      this.listLoading = true
      this.$store.dispatch('Feedback', this.listQuery).then((response) => {
          this.tableData = response.data.item
          this.total = response.data.total
          this.listLoading = false
          return
        this.listLoading = false
      }).catch(() => {
        console.log('error Feedback')
        this.listLoading = false
      })
    },

      onSubmit() {
       this.getFeedback()
      },
      // 表格批量选择
      handleSelectionChange(rows) {
      this.selectId = []
      for (const i in rows) {
        this.selectId.push(rows[i].id)
      }
    },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.getFeedback()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      console.log('val',val)
      this.getFeedback()
    },
    // 时间
    formatDate(val) {
      if (val === null) {
        return
      }
      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
    },
    addPhone(){
         this.$router.push({ name: 'phoneconfig-phoneconfigAdd'})
    },

    empty(){
        this.listQuery.handleRemark = ''
        this.listQuery.handleStatus = ''
        this.listQuery.tel = ''
        this.listQuery.pageNum = 1
        this.listQuery.pageSize = 10
        this.getFeedback()
    },
     // 弹出层
    TransactionReplyOpen(id){
       if(this.selectId.length < 1){
            this.$message.error("请至少选择一条数据");
            this.listLoading = false
            return
        }
      this.listQuery.handleRemark = ''
      this.listQuery.handleStatus = ''     
      this.listQuery.dialogFormVisible = true
      this.listQuery.id = id
    },
    //关闭
    TransactionReplyOff(){
    this.listQuery.handleRemark = ''
    this.listQuery.handleStatus = ''      
     this.listQuery.dialogFormVisible = false    
    },
    // 处理
    feedbackupdate(){
       this.listLoading = true
       console.log('this.listQuery.handleStatus',this.listQuery.handleStatus) 
      if(this.listQuery.handleStatus ==''){
         this.$message.error("请选择处理状态");
         this.listLoading = false
         return
      }
      console.log('this.listQuery.handleRemark',this.listQuery.handleRemark) 
      if(this.listQuery.handleRemark ==''){
         this.$message.error("请填写处理备注");
         this.listLoading = false
         return
      }
        this.listQuery.allId = this.selectId
        this.$store.dispatch('Updfeedback', this.listQuery).then((response) => {
        this.listQuery.dialogFormVisible = false
        this.listQuery.handleRemark = ''
        this.listQuery.handleStatus = ''
        this.getFeedback()        
        this.listLoading = false
      }).catch(() => {
        console.log('error Feedback')
        this.listLoading = false
      })
    
    }
  }
}
</script>
<style>
.footer-page {
  display: flex;
  justify-content: flex-end;
}
.textarea-inherit {
        width: 70%;
        overflow: auto;
        word-break: break-all; 
        margin-left: 11.5%;
        
    }
</style>
